From 5f818ff6a04d6447315cc241deb21b695cabbbb7 Mon Sep 17 00:00:00 2001 From: TarasMykytiuk Date: Thu, 24 Jul 2025 12:19:55 +0300 Subject: [PATCH 1/3] sprint_3 todo_list_app --- Sprint-3/todo-list/index.html | 53 +++++++++++++++++--------------- Sprint-3/todo-list/script.js | 57 +++++++++++++++++++++++++++++++++-- 2 files changed, 83 insertions(+), 27 deletions(-) diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index ee3ef64fd..c9b148e64 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -1,27 +1,30 @@ - - - - Title here - - - -
-
- -
-
- - -
-
- - - + + + + + Title here + + + + +
+
+ +
+
+ + +
+
+ + + + + + \ No newline at end of file diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index 61982a54f..0a7353cbd 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -1,5 +1,18 @@ +const addNewTodoButton = document.getElementById("add-new-todo"), + removeAllCompletedButton = document.getElementById("remove-all-completed"), + inputDom = document.getElementById("task-input"), + listDom = document.getElementById("todo-list"); + +addNewTodoButton.addEventListener("click", function (event) { + addNewTodo(event); + inputDom.value = ''; +}); + function populateTodoList(todos) { - let list = document.getElementById("todo-list"); + for (const todo of todos) { + createNewTodoDom(todo); + } + // Write your code to create todo list elements with completed and delete buttons here, all todos should display inside the "todo-list" element. } @@ -17,9 +30,49 @@ 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! + const todo = { task: inputDom.value, completed: false }; + todos.push(todo); + createNewTodoDom(todo); +} + +function createNewTodoDom(todo) { + const todoLiDom = document.createElement("li"), + entryTextDom = document.createElement("p"); + if (todo.completed) { + todoLiDom.setAttribute("class", "completed"); + } + todoLiDom.appendChild(entryTextDom); + entryTextDom.textContent = todo.task; + listDom.appendChild(todoLiDom); + + const completeButton = document.createElement("button"); + completeButton.setAttribute("class", "completeBtn"); + completeButton.textContent = "Complete"; + const deleteButton = document.createElement("button"); + deleteButton.setAttribute("class", "deleteBtn"); + deleteButton.textContent = "Delete"; + todoLiDom.appendChild(completeButton); + todoLiDom.appendChild(deleteButton); + + completeButton.addEventListener("click", () => { + entryTextDom.style.textDecoration = 'line-through'; + todoLiDom.setAttribute("class", "completed") + }); + deleteButton.addEventListener("click", () => { + todoLiDom.remove(); + }); } +removeAllCompletedButton.addEventListener("click", () => { + deleteAllCompletedTodos(); +}); + // 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... + const activeListElements = listDom.children; + for (const item of activeListElements) { + if (item.classList.contains("completed")) { + item.remove(); + } + } } From 4eb5fdfabc3d3eeccea392f55c2767d78ee6eae3 Mon Sep 17 00:00:00 2001 From: TarasMykytiuk Date: Thu, 24 Jul 2025 12:37:02 +0300 Subject: [PATCH 2/3] sprint_3 todo_list_app --- Sprint-3/todo-list/index.html | 1 - Sprint-3/todo-list/script.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index c9b148e64..a3f130b66 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -21,7 +21,6 @@ diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index 0a7353cbd..4e6376b11 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -75,4 +75,4 @@ function deleteAllCompletedTodos() { item.remove(); } } -} +} \ No newline at end of file From c6581719b19336120f59827d73e243eb5492324a Mon Sep 17 00:00:00 2001 From: TarasMykytiuk Date: Thu, 31 Jul 2025 20:30:34 +0300 Subject: [PATCH 3/3] to_do_list_app bugfix --- Sprint-3/todo-list/script.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index 4e6376b11..83d1c13a4 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -69,10 +69,9 @@ removeAllCompletedButton.addEventListener("click", () => { // 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() { - const activeListElements = listDom.children; - for (const item of activeListElements) { - if (item.classList.contains("completed")) { - item.remove(); + for (let i = listDom.children.length - 1; i >= 0; i--) { + if (listDom.children[i].classList.contains("completed")) { + listDom.children[i].remove() } } } \ No newline at end of file