diff --git a/week-3/todo-list/index.html b/week-3/todo-list/index.html index ee3ef64f..76fc308f 100644 --- a/week-3/todo-list/index.html +++ b/week-3/todo-list/index.html @@ -3,25 +3,38 @@ - Title here + Todo List app + -
-
- -
-
- - -
-
- +

To Do Lists

+
+ +
+
+ +
+
+ + +
+
+ +
+ + + diff --git a/week-3/todo-list/script.js b/week-3/todo-list/script.js index 61982a54..8b2d6237 100644 --- a/week-3/todo-list/script.js +++ b/week-3/todo-list/script.js @@ -1,8 +1,40 @@ function populateTodoList(todos) { let list = document.getElementById("todo-list"); + todos.forEach((element) => { + const listing = document.createElement("li"); + const rem = document.createElement("span"); + const add = document.createElement("span"); + rem.textContent = "🗑"; + add.textContent = "✅"; + listing.appendChild(rem); + listing.appendChild(add); + const taskText = document.createTextNode(element.task); + listing.appendChild(taskText); + list.appendChild(listing); + let clickCount = 0; + + + add.addEventListener("click", () => { + clickCount++; + let isEvenClick = clickCount % 2 === 0; + + + if (isEvenClick) { + listing.style.textDecoration = "none"; + } else { + listing.style.textDecoration = "line-through"; + } + }); + + + rem.addEventListener("click", () => { + listing.remove(); + }); + }); // Write your code to create todo list elements with completed and delete buttons here, all todos should display inside the "todo-list" element. } + // 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 = [ @@ -10,16 +42,68 @@ let todos = [ { 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) { + const inputTodo = document.querySelector("input"); + const buttonTodo = document.querySelector("button"); + buttonTodo.addEventListener("click", (event) => { + event.preventDefault(); + const newList = document.createElement("li"); + let list = document.getElementById("todo-list"); + const tex = document.createTextNode(inputTodo.value); + inputTodo.value = ""; + const rem = document.createElement("span"); + const add = document.createElement("span"); + rem.textContent = "🗑"; + add.textContent = "✅"; + newList.appendChild(rem); + newList.appendChild(add); + newList.append(tex); + list.appendChild(newList); + + + let clickCount = 0; + + + add.addEventListener("click", () => { + clickCount++; + let isEvenClick = clickCount % 2 === 0; + + + if (isEvenClick) { + newList.style.textDecoration = "none"; + } else { + newList.style.textDecoration = "line-through"; + } + }); + + + rem.addEventListener("click", () => { + newList.remove(); + }); + }); + + // 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! } - +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). function deleteAllCompletedTodos() { + const del = document.getElementById("remove-all-completed"); + let list = document.getElementById("todo-list"); + del.addEventListener("click", () => { + list.textContent = ""; + }); // Write your code here... } +deleteAllCompletedTodos(); + + + diff --git a/week-3/todo-list/style.css b/week-3/todo-list/style.css index 8b137891..b8b7e87e 100644 --- a/week-3/todo-list/style.css +++ b/week-3/todo-list/style.css @@ -1 +1,47 @@ - +body { + background-color: aquamarine; + + + font-size: 2rem; + } + section { + background-color: beige; + width: 78%; + margin-right: 10%; + margin-top: 10%; + margin-left: 20%; + } + h1 { + text-align: center; + } + div { + background-color: beige; + } + + + li { + list-style-type: none; + } + span { + position: relative; + left: 350px; + cursor: pointer; + } + input { + padding: 0.5rem; + margin-left: 20%; + } + button { + padding: 0.5rem; + border-radius: 10px; + background-color: aquamarine; + margin-top: 30px; + margin-left: 15%; + margin-bottom: 10%; + } + + + + + +