CodeYourFuture · sernamalala · Jan 11, 2025 · Jan 11, 2025 · Jan 11, 2025 · Jan 11, 2025
diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
@@ -3,16 +3,20 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Todo List📃</title>
     <link rel="stylesheet" href="style.css" />
+    <script
+      src="https://kit.fontawesome.com/ffdbc20524.js"
+      crossorigin="anonymous"
+    ></script>
   </head>
   <body>
     <form>
       <div>
-        <input type="text" placeholder="New todo..." />
+        <input type="text" id="todo-input" placeholder="New todo..." />
       </div>
       <div>
-        <button type="submit">Add Todo</button>
+        <button type="submit" id="add-todo-btn">Add Todo</button>
         <button
           type="button"
           id="remove-all-completed"
@@ -21,6 +25,7 @@
           Remove all completed
         </button>
       </div>
+      <ul id="todo-list"></ul>
     </form>
     <script src="script.js"></script>
   </body>

diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js
@@ -1,6 +1,88 @@
 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.
+  let body = document.querySelector("body");
+
+  list.innerHTML = "";
+
+  let todoButtonsIndex = 0;
+
+  let todoButtons = `<span class="badge bg-primary rounded-pill">
+                     <i class="fa-solid fa-check" aria-hidden="true"></i>
+                     <i class="fa fa-trash" aria-hidden="true"></i>
+                     </span>`;
+
+  todos.forEach((todoItem, index) => {
+
+    let listItem = document.createElement("li");
+    listItem.id = index;
+
+    let breakLine = document.createElement("br");
+    let span = document.createElement("span");
+
+
+    span.innerHTML = todoButtons;
+    listItem.style.background = "lightblue";
+    listItem.style.padding = "1em";
+    listItem.style.display = "inline-block";
+    listItem.style.margin = "0.5em";
+    listItem.textContent = todoItem.task;
+    list.style.margin = "0 auto";
+    list.style.backgroundColor = "#FCC4AB";
+    body.style.textAlign = "center"
+
+    list.appendChild(breakLine);
+
+    if (todoItem.completed === true) {
+      listItem.style.textDecoration = "line-through";
+    }
+    listItem.appendChild(span);
+    list.appendChild(listItem);
+    //target the span instead of targetin the document, to make it more precise
+    const checkMark = span.querySelector(".fa-check");
+    const deleteButton = span.querySelector(".fa-trash");
+
+    checkMark.id = todoButtonsIndex;
+    deleteButton.id = todoButtonsIndex;
+    todoButtonsIndex++;
+
+    //when the checkmark or trash buttons are clicked
+    //make span be inside the listItem element and target the nearest listItem
+
+
+    checkMark.addEventListener("click", function () {
+
+      const listItem = this.closest("li");
+      const todoID = listItem.id;
+
+      if (todoID && todos[parseInt(todoID)].completed === false) {
+        todos[parseInt(todoID)].completed = true;
+        listItem.style.textDecoration = "line-through";
+
+      }
+      else {
+        todos[parseInt(todoID)].completed = false;
+        listItem.style.textDecoration = "none";
+      }
+
+    })
+
+
+    deleteButton.addEventListener("click", function () {
+      const listItem = this.closest("li");
+      const todoID = listItem.id;
+
+      if (todoID) {
+        todos.splice(parseInt(todoID), 1);
+        listItem.remove();
+        populateTodoList(todos);
+
+      }
+
+
+    })
+
+
+  });
 }
 
 // These are the same todos that currently display in the HTML
@@ -12,14 +94,51 @@ let todos = [
 
 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 inputField = document.getElementById("todo-input");
+  let inputFieldValue = inputField.value;
+  let completedStatus = false;
+
+  let todo = {};
+
+  if (inputFieldValue.length > 0) {
+    todo["task"] = inputFieldValue
+    todo["completed"] = completedStatus;
+    todos.push(todo);
+
+    console.log(`Added new Todo - Task:${todo.task}: Status:${todo.completed}`);
+    populateTodoList(todos);
+  }
+  else {
+    alert("Please input a new todo item!!");
+  }
+
+
+
 }
 
+
+//need to target form when the button is clicked
+
+let form = document.querySelector("form");
+form.addEventListener("submit", addNewTodo);
+
 // 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).
+
+let removeButton = document.getElementById("remove-all-completed");
 function deleteAllCompletedTodos() {
-  // Write your code here...
+
+  todos = todos.filter((todoItem) => {
+    return todoItem.completed === false;
+  })
+
+  populateTodoList(todos);
 }
+
+removeButton.addEventListener("click", deleteAllCompletedTodos);
+