From c8d51d3b17761968dda8ba44a6d6d5e4d7e9a6ee Mon Sep 17 00:00:00 2001 From: "[Hibo Sharif]" <[hibo.sharif87@gmail.com]git config --global --list> Date: Fri, 25 Jul 2025 12:04:25 +0100 Subject: [PATCH 1/5] Implemented the to-do list --- Sprint-3/todo-list/index.html | 26 +++---- Sprint-3/todo-list/script.js | 115 ++++++++++++++++++++++++++++- Sprint-3/todo-list/style.css | 135 ++++++++++++++++++++++++++++++++++ 3 files changed, 257 insertions(+), 19 deletions(-) diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index ee3ef64fd..f0d1a0679 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -3,25 +3,21 @@ - Title here + Todo list -
-
- + +
+

Todo List

+ + + + + +
    +
    -
    - - -
    - diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index 61982a54f..f053a2c52 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -1,6 +1,39 @@ +// Write your code here... 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 = ""; // clears the available list + if (todos.length === 0) { + list.innerHTML = `
  • No todos yet. Add one above!
    • `; + return; + } + todos.forEach((todo, index) => { + // create the todo elements + const listItem = document.createElement("li"); // create list item + listItem.className = todo.completed ? "todo-item completed" : "todo-item"; + + let todoText = document.createElement("span"); + todoText.className = todo.completed ? "todo-text completed" : "todo-text"; + todoText.textContent = todo.task; + + let completeButton = document.createElement("button"); // create complete button + completeButton.className = todo.completed + ? "complete-btn completed" + : "complete-btn"; + completeButton.textContent = todo.completed ? "Undo" : "Complete"; + completeButton.onclick = () => toggleComplete(index); + + let deleteButton = document.createElement("button"); // create delete button + deleteButton.className = "delete-btn"; + deleteButton.textContent = "Delete"; + deleteButton.onclick = () => deleteTodo(index); + + listItem.appendChild(todoText); // append elements to list item + listItem.appendChild(completeButton); + listItem.appendChild(deleteButton); + + list.appendChild(listItem); // append list item to todo list + }); } // These are the same todos that currently display in the HTML @@ -10,16 +43,90 @@ let todos = [ { task: "Do the shopping", completed: false }, ]; -populateTodoList(todos); +function toggleComplete(index) { + // function to toggle complete status + todos[index].completed = !todos[index].completed; + populateTodoList(todos); +} + +function deleteTodo(index) { + //function to delete specific todo + todos.splice(index, 1); + populateTodoList(todos); +} + +populateTodoList(todos); // initial population // 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("new-todo-input") || + document.getElementById("todo-input") || + document.querySelector('input[type="text"]'); + + let todoText = input.value.trim(); + + if (todoText === "") { + alert("Please enter a todo item!"); + return; + } + let newTodo = { + // create new todo object + task: todoText, + completed: false, + }; + + todos.push(newTodo); // ad todos array + + input.value = ""; //clear input field + + populateTodoList(todos); //refresh the todo list } -// 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). +// Advanced challenge: Write a function 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); // filter out the completed todos + + populateTodoList(todos); // refresh the display + + console.log("The completed todos are deleted!"); } +// Event listener +document.addEventListener("DOMContentLoaded", function () { + // Try to find the form by different selectors + let form = + document.querySelector("form") || + document.querySelector(".add-todo-form") || + document.getElementById("todo-form"); + + if (form) { + form.addEventListener("submit", addNewTodo); + } else { + console.log( + "No form found. Make sure your HTML has a form element or call addNewTodo() directly from a button onclick." + ); + + // Try to find an add button and attach the event + let addButton = + document.querySelector('button[type="submit"]') || + document.querySelector(".add-btn") || + document.getElementById("add-todo-btn"); + + if (addButton) { + addButton.addEventListener("click", addNewTodo); + } + } + + // Try to find delete all completed button + let deleteAllBtn = + document.querySelector(".delete-all-btn") || + document.getElementById("delete-all-btn"); + + if (deleteAllBtn) { + deleteAllBtn.addEventListener("click", deleteAllCompletedTodos); + } +}); diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css index 8b1378917..637ce9a63 100644 --- a/Sprint-3/todo-list/style.css +++ b/Sprint-3/todo-list/style.css @@ -1 +1,136 @@ +body { + font-family: Arial, sans-serif; + max-width: 600px; + margin: 50px auto; + padding: 20px; + background-color: #f5f5f5; +} +.container { + background: white; + padding: 30px; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; + color: #333; + margin-bottom: 30px; +} + +.add-todo-form { + display: flex; + gap: 10px; + margin-bottom: 30px; +} + +#new-todo-input { + flex: 1; + padding: 12px; + border: 2px solid #ddd; + border-radius: 5px; + font-size: 16px; +} + +#new-todo-input:focus { + outline: none; + border-color: #4CAF50; +} + +button { + padding: 12px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s; +} + +.add-btn { + background-color: #a2af4c; + color: white; +} + +.add-btn:hover { + background-color: #a0458c; +} + +.delete-all-btn { + background-color: #3936f4; + color: white; + margin-bottom: 20px; +} + +.delete-all-btn:hover { + background-color: #0bdac2; +} + +#todo-list { + list-style: none; + padding: 0; +} + +.todo-item { + display: flex; + align-items: center; + gap: 10px; + padding: 15px; + margin: 10px 0; + background-color: #f9f9f9; + border-radius: 5px; + border-left: 4px solid #547f56; +} + +.todo-item.completed { + border-left-color: #ccc; + background-color: #f0f0f0; +} + +.todo-text { + flex: 1; + font-size: 16px; + transition: all 0.3s; +} + +.todo-text.completed { + text-decoration: line-through; + color: #888; +} + +.complete-btn { + background-color: #2196F3; + color: white; + padding: 8px 12px; + font-size: 14px; +} + +.complete-btn:hover { + background-color: #1976D2; +} + +.complete-btn.completed { + background-color: #FF9800; +} + +.complete-btn.completed:hover { + background-color: #F57C00; +} + +.delete-btn { + background-color: #f44336; + color: white; + padding: 8px 12px; + font-size: 14px; +} + +.delete-btn:hover { + background-color: #da190b; +} + +.empty-state { + text-align: center; + color: #888; + font-style: italic; + padding: 40px; +} From d3502bf8add271581cb7bdc881a3ab16dcb83f7a Mon Sep 17 00:00:00 2001 From: "[Hibo Sharif]" <[hibo.sharif87@gmail.com]git config --global --list> Date: Tue, 12 Aug 2025 22:37:42 +0100 Subject: [PATCH 2/5] Updated the index.html file --- Sprint-3/todo-list/index.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index f0d1a0679..4ddca418a 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -7,17 +7,17 @@ - -
    -

    Todo List

    -
    - +
    +

    Todo List

    + + - -
      - -
      + + Delete All Completed + +
        +
        From ee464b2eb33a81018c968fc039a41defecfe01fa Mon Sep 17 00:00:00 2001 From: "[Hibo Sharif]" <[hibo.sharif87@gmail.com]git config --global --list> Date: Tue, 12 Aug 2025 22:43:36 +0100 Subject: [PATCH 3/5] I have reduced the code in line 13 --- Sprint-3/todo-list/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index f053a2c52..e9331b3de 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -10,7 +10,7 @@ function populateTodoList(todos) { todos.forEach((todo, index) => { // create the todo elements const listItem = document.createElement("li"); // create list item - listItem.className = todo.completed ? "todo-item completed" : "todo-item"; + listItem.className = "todo-item" + (todo.completed ? "completed" : ""); let todoText = document.createElement("span"); todoText.className = todo.completed ? "todo-text completed" : "todo-text"; From 915340df6c7be3178fabe85096e1b8b58c5ad3b8 Mon Sep 17 00:00:00 2001 From: "[Hibo Sharif]" <[hibo.sharif87@gmail.com]git config --global --list> Date: Tue, 12 Aug 2025 22:47:44 +0100 Subject: [PATCH 4/5] I have updated the code in line 16 --- Sprint-3/todo-list/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index e9331b3de..2e4e7a82f 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -10,10 +10,10 @@ function populateTodoList(todos) { todos.forEach((todo, index) => { // create the todo elements const listItem = document.createElement("li"); // create list item - listItem.className = "todo-item" + (todo.completed ? "completed" : ""); + listItem.className = "todo-item" + (todo.completed ? " completed" : ""); let todoText = document.createElement("span"); - todoText.className = todo.completed ? "todo-text completed" : "todo-text"; + todoText.className = "todo.text" + (todo.completed ? " completed" : ""); todoText.textContent = todo.task; let completeButton = document.createElement("button"); // create complete button From 36b438bd5411194ea50302ae4b10d920748ca697 Mon Sep 17 00:00:00 2001 From: "[Hibo Sharif]" <[hibo.sharif87@gmail.com]git config --global --list> Date: Tue, 12 Aug 2025 22:55:42 +0100 Subject: [PATCH 5/5] Simplified the code in line 66 --- Sprint-3/todo-list/script.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index 2e4e7a82f..414d14b1d 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -63,10 +63,7 @@ function addNewTodo(event) { event.preventDefault(); // Write your code here... and remember to reset the input field to be blank after creating a todo! - let input = - document.getElementById("new-todo-input") || - document.getElementById("todo-input") || - document.querySelector('input[type="text"]'); + let input = document.getElementById("new-todo-input"); let todoText = input.value.trim();