From 32c28162cb0247d73f982c46d7e6c0a3aecff78f Mon Sep 17 00:00:00 2001 From: fikret ellek Date: Fri, 26 Jan 2024 17:27:21 +0000 Subject: [PATCH 1/2] todo js done --- week-3/todo-list/script.js | 79 +++++++++++++++++++++++++++++++++----- 1 file changed, 69 insertions(+), 10 deletions(-) diff --git a/week-3/todo-list/script.js b/week-3/todo-list/script.js index 61982a54..62420993 100644 --- a/week-3/todo-list/script.js +++ b/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. -} -// 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 }, -]; + for (const todo of todos) { + const toDoListElement = document.createElement("li"); + toDoListElement.innerText = todo.task; + toDoListElement.classList.add(todo.task.replaceAll(" ", "-")); -populateTodoList(todos); + if (todo.completed) { + toDoListElement.style.textDecoration = "line-through"; + } + + const doneBtn = document.createElement("button"); + doneBtn.innerText = "Done"; + + const deleteBtn = document.createElement("button"); + deleteBtn.innerText = "Delete"; + + toDoListElement.appendChild(doneBtn); + toDoListElement.appendChild(deleteBtn); + list.appendChild(toDoListElement); + } +} // 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 toDoInput = document.querySelector("input"); + todos.push({ task: toDoInput.value, completed: false }); + + toDoInput.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(); } + +// 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 }, +]; + +const list = document.createElement("ul"); +document.body.appendChild(list); + +const addBtn = document.querySelector("button"); +const deleteAllBtn = document.getElementById("remove-all-completed"); + +addBtn.addEventListener("click", addNewTodo); + +deleteAllBtn.addEventListener("click", deleteAllCompletedTodos); + +list.addEventListener("click", (event) => { + const target = event.target; + for (const todo of todos) { + if (todo.task.replaceAll(" ", "-") === target.parentNode.className) + if (target.innerText === "Done") { + todo.completed = true; + target.innerText = "Undone"; + } else if (target.innerText === "Undone") { + todo.completed = false; + target.innerText = "Done"; + } else if (target.innerText === "Delete") { + todos.splice(todos.indexOf(todo), 1); + } + } + populateTodoList(); +}); + +window.onload = populateTodoList; From 2630759e69094fefc5c74d4215083fe48e6a2424 Mon Sep 17 00:00:00 2001 From: fikret ellek Date: Fri, 26 Jan 2024 19:21:37 +0000 Subject: [PATCH 2/2] updated css and js --- week-3/todo-list/script.js | 57 ++++++++++++++++++++++++-------------- week-3/todo-list/style.css | 53 +++++++++++++++++++++++++++++++++++ 2 files changed, 89 insertions(+), 21 deletions(-) diff --git a/week-3/todo-list/script.js b/week-3/todo-list/script.js index 62420993..ae4ce450 100644 --- a/week-3/todo-list/script.js +++ b/week-3/todo-list/script.js @@ -8,18 +8,28 @@ function populateTodoList() { toDoListElement.innerText = todo.task; toDoListElement.classList.add(todo.task.replaceAll(" ", "-")); - if (todo.completed) { - toDoListElement.style.textDecoration = "line-through"; - } - const doneBtn = document.createElement("button"); doneBtn.innerText = "Done"; + doneBtn.classList.add("todo-btn"); + doneBtn.classList.add("done-btn"); + doneBtn.classList.add("right-gap"); const deleteBtn = document.createElement("button"); deleteBtn.innerText = "Delete"; + deleteBtn.classList.add("todo-btn"); + deleteBtn.classList.add("delete-btn"); - toDoListElement.appendChild(doneBtn); - toDoListElement.appendChild(deleteBtn); + const span = document.createElement("span"); + + if (todo.completed) { + toDoListElement.style.textDecoration = "line-through"; + toDoListElement.style.listStyleType = "disc"; + doneBtn.innerText = "Undone"; + } + + span.appendChild(doneBtn); + span.appendChild(deleteBtn); + toDoListElement.appendChild(span); list.appendChild(toDoListElement); } } @@ -55,30 +65,35 @@ let todos = [ ]; const list = document.createElement("ul"); +list.setAttribute("id", "todo-list"); document.body.appendChild(list); const addBtn = document.querySelector("button"); +addBtn.classList.add("right-gap"); const deleteAllBtn = document.getElementById("remove-all-completed"); addBtn.addEventListener("click", addNewTodo); deleteAllBtn.addEventListener("click", deleteAllCompletedTodos); -list.addEventListener("click", (event) => { - const target = event.target; - for (const todo of todos) { - if (todo.task.replaceAll(" ", "-") === target.parentNode.className) - if (target.innerText === "Done") { - todo.completed = true; - target.innerText = "Undone"; - } else if (target.innerText === "Undone") { - todo.completed = false; - target.innerText = "Done"; - } else if (target.innerText === "Delete") { - todos.splice(todos.indexOf(todo), 1); +document + .getElementById("todo-list") + .addEventListener("click", function (event) { + const target = event.target; + const classSpan = target.parentNode; + const classLi = classSpan.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(); -}); + } + populateTodoList(); + }); window.onload = populateTodoList; diff --git a/week-3/todo-list/style.css b/week-3/todo-list/style.css index 8b137891..014ca117 100644 --- a/week-3/todo-list/style.css +++ b/week-3/todo-list/style.css @@ -1 +1,54 @@ +* { + padding: 0px; + margin: 0px; + border: none; + margin-bottom: 10px; +} +body { + margin-top: 50px; + background-image: url("./assets/world.jpg"); + background-size: cover; + display: flex; + flex-direction: column; + align-items: center; +} +form { + width: 500px; + display: flex; + flex-direction: column; +} +input { + width: 460px; + height: 45px; + border-radius: 9999px; + padding-left: 40px; +} +button { + height: 45px; + padding: 0px 30px 0px 30px; + border-radius: 9999px; + font-size: 15px; +} +.todo-btn { + height: 30px; + padding: 0px 20px 0px 20px; +} + +.right-gap { + margin-right: 10px; +} + +.done-btn { + justify-self: flex-end; +} + +li { + width: 500px; + display: flex; + flex-direction: row; + justify-content: space-between; + font-size: 20px; + color: white; + margin-bottom: 5px; +}