NW6 | Zeliha Pala | JS2 Module | [TECH ED] Build todo-list app | Week 4

week-3/todo-list/script.js

@@ -1,25 +1,84 @@
-function populateTodoList(todos) {
-  let list = document.getElementById("todo-list");
+function populateTodoList() {
+  list.innerHTML = "";
   // Write your code to create todo list elements with completed and delete buttons here, all todos should display inside the "todo-list" element.
+
+  for (let element of todos) {
+    const todo = document.createElement("li");
+    todo.innerText = element.task;
+    todo.classList.add(element.task.replaceAll(" ", "-"));
+
+    const doneButton = document.createElement("button");
+    doneButton.innerText = "Done";
+    doneButton.classList.add("done-btn");
+    const deleteButton = document.createElement("button");
+    deleteButton.innerText = "Delete";
+    deleteButton.classList.add("delete-btn");
+
+    todo.appendChild(doneButton);
+    todo.appendChild(deleteButton);
+    list.appendChild(todo);
+
+    if (element.completed) {
+      todo.style.textDecoration = "line-through";
+      doneButton.innerText = "Undone";
+    }
+  }
 }
 
+const list = document.createElement("ul");
+list.setAttribute("id", "todo-list");
+document.body.appendChild(list);
+
+document
+  .getElementById("todo-list")
+  .addEventListener("click", function (event) {
+    const target = event.target;
+    const classLi = target.parentNode.className;
+    for (let element of todos) {
+      if (element.task.replaceAll(" ", "-") === classLi) {
+        if (target.innerText === "Undone") {
+          element.completed = false;
+        } else if (target.innerText === "Done") {
+          element.completed = true;
+        } else if (target.innerText === "Delete") {
+          todos.splice(todos.indexOf(element), 1);
+        }
+      }
+    }
+    populateTodoList();
+  });
+
 // 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);
+window.onload = populateTodoList;
 
 // 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!
+  const inbox = document.querySelector("input");
+
+  todos.push({ task: inbox.value, completed: false });
+  console.log(todos);
+  inbox.value = "";
+  populateTodoList();
 }
 
 // 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((element) => !element.completed);
+  populateTodoList();
 }
+
+document.querySelector("button").addEventListener("click", addNewTodo);
+document
+  .getElementById("remove-all-completed")
+  .addEventListener("click", deleteAllCompletedTodos);

week-3/todo-list/style.css

@@ -1 +1,84 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300;1,500&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", "san-serif";
+}
 
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: url("/week-3/todo-list/assets/world.jpg") center/cover no-repeat;
+}
+
+.box {
+  position: relative;
+  width: 550px;
+  height: 550px;
+  border-radius: 40px;
+  background: #124c63;
+  box-shadow: 25px 25px 75px rgb(72, 85, 81),
+    inset 5px 10px 10px rgba(148, 167, 165, 0.5),
+    inset 5px 5px 20px rgba(241, 239, 239, 0.25);
+}
+
+h1 {
+  width: 100%;
+  font-weight: 600;
+  text-align: center;
+  color: white;
+  font-size: 1.75em;
+  margin: 10px;
+  padding-top: 25px;
+}
+
+#inputBox {
+  position: relative;
+  width: 95%;
+  border: none;
+  outline: none;
+  padding: 15px 15px;
+  margin-bottom: 20px;
+  border-radius: 30px;
+  font-size: 1em;
+  box-shadow: 5px 5px 6px;
+}
+
+/* to do buttons*/
+button[type="submit"],
+#remove-all-completed {
+  display: inline-block;
+  width: 40%;
+  padding: 10px;
+  margin-right: 5%;
+  border: none;
+  border-radius: 7px;
+  background-color: hsl(218, 79%, 19%);
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  box-shadow: 5px 5px 6px;
+}
+
+button[type="submit"]:hover {
+  background-color: #3e1c7c;
+}
+
+#remove-all-completed {
+  background-color: hsl(218, 79%, 19%);
+  margin-right: 0;
+  transition: background-color 0.3s ease;
+}
+#remove-all-completed:hover {
+  background-color: #3e1c7c;
+}
+
+/* Add space between buttons */
+button[type="submit"] + #remove-all-completed {
+  margin-top: 10px;
+}