diff --git a/week-3/todo-list/index.html b/week-3/todo-list/index.html index ee3ef64f..19542d98 100644 --- a/week-3/todo-list/index.html +++ b/week-3/todo-list/index.html @@ -3,25 +3,40 @@ - 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..e75e7932 100644 --- a/week-3/todo-list/script.js +++ b/week-3/todo-list/script.js @@ -1,25 +1,128 @@ 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. -} + todos.forEach((element) => { + const listing = document.createElement("li"); + const rem = document.createElement("span"); + const add = document.createElement("span"); + const dateCale = document.createElement("span"); + const dateInput = document.createElement("input"); + dateInput.type = "date"; + dateInput.classList.add("inputing"); + dateInput.style.display = "none"; + rem.textContent = "🗑"; + add.textContent = "✅"; + dateCale.textContent = "📅"; + listing.appendChild(rem); + listing.appendChild(add); + listing.appendChild(dateCale); + listing.appendChild(dateInput); + const taskText = document.createTextNode(element.task); + listing.appendChild(taskText); + list.appendChild(listing); + let clickCount = 0; + dateCale.addEventListener("click", () => { + if (dateInput.style.display === "none") { + dateInput.style.display = "block"; + } else { + dateInput.style.display = "none"; + } + }); + + + 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(); + }); + }); + } -// 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); -// 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 inputTodo = document.getElementById("textboxinput"); + 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"); + const dateCale = document.createElement("span"); + const dateInput = document.createElement("input"); + dateInput.type = "date"; + dateInput.classList.add("inputing"); + dateInput.style.display = "none"; + rem.textContent = "🗑"; + add.textContent = "✅"; + dateCale.textContent = "📅"; + newList.appendChild(rem); + newList.appendChild(add); + newList.appendChild(dateCale); + newList.appendChild(dateInput); + newList.append(tex); + list.appendChild(newList); + + + let clickCount = 0; -// 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). + + dateCale.addEventListener("click", () => { + if (dateInput.style.display === "none") { + dateInput.style.display = "block"; + } else { + dateInput.style.display = "none"; + } + }); + 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(); + }); + }); + + + } +addNewTodo(); function deleteAllCompletedTodos() { - // Write your code here... + const del = document.getElementById("remove-all-completed"); + let list = document.getElementById("todo-list"); + del.addEventListener("click", () => { + list.textContent = ""; + }); + } +deleteAllCompletedTodos(); + + + diff --git a/week-3/todo-list/style.css b/week-3/todo-list/style.css index 8b137891..e3b25eae 100644 --- a/week-3/todo-list/style.css +++ b/week-3/todo-list/style.css @@ -1 +1,59 @@ +body { + background-color: aquamarine; + + + font-size: 2rem; + } + #todo-list li { + display: flex; + align-items: center; + } + .inputing { + position: fixed; + left: 600px; + } + + + 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%; + display: block; + } + button { + padding: 0.5rem; + border-radius: 10px; + background-color: aquamarine; + margin-top: 30px; + margin-left: 15%; + margin-bottom: 10%; + } + + + + + + \ No newline at end of file