From 63e615aaaf0f4668c6c18f986f59c6fed177be32 Mon Sep 17 00:00:00 2001 From: halimatou-saddiyaa Date: Wed, 13 Aug 2025 19:14:01 +0200 Subject: [PATCH 1/6] Implemented the populateTodoList, addNewTodo, and deleteAllCompletedTodos functions --- Sprint-3/todo-list/script.js | 68 ++++++++++++++++++++++++++++++------ 1 file changed, 58 insertions(+), 10 deletions(-) diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index 61982a54f..fc91d99ea 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -1,25 +1,73 @@ function populateTodoList(todos) { let list = document.getElementById("todo-list"); - // Write your code to create todo list elements with completed and delete buttons here, all todos should display inside the "todo-list" element. + list.innerHTML = ""; + + todos.forEach((todo) => { + let li = document.createElement("li"); + li.textContent = todo.task; + li.className = `list-group-item ${todo.completed ? "completed" : ""}`; + + let span = document.createElement("span"); + span.className = "badge bg-light rounded-pill"; + + let checkIcon = document.createElement("i"); + checkIcon.className = "fa fa-check todo-icon"; + checkIcon.setAttribute("aria-hidden", "true"); + checkIcon.addEventListener("click", () => { + todo.completed = !todo.completed; + li.classList.toggle("completed"); + }); + + let trashIcon = document.createElement("i"); + trashIcon.className = "fa fa-trash todo-icon"; + trashIcon.setAttribute("aria-hidden", "true"); + trashIcon.addEventListener("click", () => { + const index = todos.indexOf(todo); + if (index > -1) { + todos.splice(index, 1); + } + populateTodoList(todos); + }); + + span.appendChild(checkIcon); + span.appendChild(trashIcon); + + li.appendChild(span); + + list.appendChild(li); + }); } -// These are the same todos that currently display in the HTML -// You will want to remove the ones in the current HTML after you have created them using JavaScript let todos = [ { task: "Wash the dishes", completed: false }, { task: "Do the shopping", completed: false }, ]; -populateTodoList(todos); - -// This function will take the value of the input field and add it as a new todo to the bottom of the todo list. These new todos will need the completed and delete buttons adding like normal. function addNewTodo(event) { - // The code below prevents the page from refreshing when we click the 'Add Todo' button. event.preventDefault(); - // Write your code here... and remember to reset the input field to be blank after creating a todo! + let input = document.getElementById("todoInput"); + let newTask = input.value.trim(); + + if (/[^A-Za-z\s]/.test(newTask)) { + alert("Please enter letters and spaces only."); + input.value = ""; + return; + } + + if (newTask !== "") { + todos.push({ task: newTask, completed: false }); + populateTodoList(todos); + input.value = ""; + } } +populateTodoList(todos); -// Advanced challenge: Write a fucntion that checks the todos in the todo list and deletes the completed ones (we can check which ones are completed by seeing if they have the line-through styling applied or not). function deleteAllCompletedTodos() { - // Write your code here... + todos = todos.filter((todo) => !todo.completed); + populateTodoList(todos); } + +document.getElementById("todo-form").addEventListener("submit", addNewTodo); +document + .getElementById("remove-all-completed") + .addEventListener("click", deleteAllCompletedTodos); From 70fd62339adbd35a8f5482ab9fd90c6aef6fe0d0 Mon Sep 17 00:00:00 2001 From: halimatou-saddiyaa Date: Wed, 13 Aug 2025 19:15:54 +0200 Subject: [PATCH 2/6] Implemented changes to html to build the to do list --- Sprint-3/todo-list/index.html | 50 +++++++++++++++++++++++------------ 1 file changed, 33 insertions(+), 17 deletions(-) diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index ee3ef64fd..1f5f4f3c6 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -2,26 +2,42 @@ - - Title here + + To Do List App + + -
-
- -
-
- - -
-
+
+
+
+ +
+
+ + +
+
+
    +
    From 4bb42f09269a0ddca9e78f2bbea7b00e1f471e62 Mon Sep 17 00:00:00 2001 From: halimatou-saddiyaa Date: Wed, 13 Aug 2025 19:20:58 +0200 Subject: [PATCH 3/6] Added some styling to the Css file --- Sprint-3/todo-list/style.css | 64 ++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css index 8b1378917..4baf9d888 100644 --- a/Sprint-3/todo-list/style.css +++ b/Sprint-3/todo-list/style.css @@ -1 +1,65 @@ +.completed { + text-decoration: line-through; + color: gray; +} +.todo-icon { + cursor: pointer; + margin-left: 8px; + font-size: 1.2rem; + padding: 8px; + color: inherit; +} + +.completed .fa-check { + color: green; +} + +.todo-icon:hover { + opacity: 0.7; +} + +.todo-container { + max-width: 400px; + margin: 50px auto; + text-align: center; +} + +.todo-container form > div { + margin-bottom: 15px; +} + +#todoInput { + width: 100%; + padding: 10px; + font-size: 1rem; +} + +button { + border-radius: 5px; + padding: 12px 20px; + font-size: 1rem; + cursor: pointer; + min-height: 44px; +} + +button:hover { + opacity: 0.9; +} + +.list-group-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 15px; + margin-bottom: 8px; +} + +.badge { + display: flex; + gap: 8px; + padding: 6px 10px; + background-color: #f8f9fa; + color: #000; + border-radius: 50px; +} From 9588977d183a56fb0cf1317328269dcc451816b6 Mon Sep 17 00:00:00 2001 From: halimatou-saddiyaa Date: Fri, 15 Aug 2025 17:43:28 +0200 Subject: [PATCH 4/6] Added a different color for the 'remove all-completed' button --- Sprint-3/todo-list/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index 1f5f4f3c6..07135d346 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -30,7 +30,7 @@ From 32858f9ab1561224d15fa0fb7256b47a719dd7c5 Mon Sep 17 00:00:00 2001 From: halimatou-saddiyaa Date: Fri, 15 Aug 2025 17:51:48 +0200 Subject: [PATCH 5/6] Separated data updates and UI changes --- Sprint-3/todo-list/script.js | 80 ++++++++++++++++++++---------------- 1 file changed, 44 insertions(+), 36 deletions(-) diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index fc91d99ea..b97bd4488 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -1,40 +1,52 @@ -function populateTodoList(todos) { - let list = document.getElementById("todo-list"); - list.innerHTML = ""; +function toggleTodoCompletion(todo) { + todo.completed = !todo.completed; +} - todos.forEach((todo) => { - let li = document.createElement("li"); - li.textContent = todo.task; - li.className = `list-group-item ${todo.completed ? "completed" : ""}`; +function removeTodo(todos, todo) { + return todos.filter((t) => t !== todo); +} + +function deleteAllCompletedTodos() { + todos = todos.filter((todo) => !todo.completed); + populateTodoList(todos); +} - let span = document.createElement("span"); - span.className = "badge bg-light rounded-pill"; +function createTodoElement(todo, todos) { + let li = document.createElement("li"); + li.textContent = todo.task; + li.className = `list-group-item ${todo.completed ? "completed" : ""}`; - let checkIcon = document.createElement("i"); - checkIcon.className = "fa fa-check todo-icon"; - checkIcon.setAttribute("aria-hidden", "true"); - checkIcon.addEventListener("click", () => { - todo.completed = !todo.completed; - li.classList.toggle("completed"); - }); + let span = document.createElement("span"); + span.className = "badge bg-light rounded-pill"; - let trashIcon = document.createElement("i"); - trashIcon.className = "fa fa-trash todo-icon"; - trashIcon.setAttribute("aria-hidden", "true"); - trashIcon.addEventListener("click", () => { - const index = todos.indexOf(todo); - if (index > -1) { - todos.splice(index, 1); - } - populateTodoList(todos); - }); + let checkIcon = document.createElement("i"); + checkIcon.className = "fa fa-check todo-icon"; + checkIcon.setAttribute("aria-hidden", "true"); + checkIcon.addEventListener("click", () => { + toggleTodoCompletion(todo); + li.classList.toggle("completed"); + }); + + let trashIcon = document.createElement("i"); + trashIcon.className = "fa fa-trash todo-icon"; + trashIcon.setAttribute("aria-hidden", "true"); + trashIcon.addEventListener("click", () => { + todos = removeTodo(todos, todo); + populateTodoList(todos); + }); - span.appendChild(checkIcon); - span.appendChild(trashIcon); + span.appendChild(checkIcon); + span.appendChild(trashIcon); + li.appendChild(span); - li.appendChild(span); + return li; +} - list.appendChild(li); +function populateTodoList(todos) { + let list = document.getElementById("todo-list"); + list.innerHTML = ""; + todos.forEach((todo) => { + list.appendChild(createTodoElement(todo, todos)); }); } @@ -60,14 +72,10 @@ function addNewTodo(event) { input.value = ""; } } -populateTodoList(todos); - -function deleteAllCompletedTodos() { - todos = todos.filter((todo) => !todo.completed); - populateTodoList(todos); -} document.getElementById("todo-form").addEventListener("submit", addNewTodo); document .getElementById("remove-all-completed") .addEventListener("click", deleteAllCompletedTodos); + +populateTodoList(todos); From f96d9912e597c1c4f3c45ebc4ce5b13b9f44725b Mon Sep 17 00:00:00 2001 From: halimatou-saddiyaa Date: Sat, 16 Aug 2025 16:00:47 +0200 Subject: [PATCH 6/6] Changed the code to add a 'empty field alert' --- Sprint-3/todo-list/index.html | 4 +++- Sprint-3/todo-list/script.js | 15 +++++++++------ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index 07135d346..bf8a4f786 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -26,7 +26,9 @@ />
    - +