diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index ee3ef64f..f49e4b78 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -3,7 +3,7 @@ - Title here + Todo List @@ -22,6 +22,7 @@ + diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index 61982a54..9800bb99 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -1,25 +1,102 @@ function populateTodoList(todos) { let list = document.getElementById("todo-list"); + 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. + if (todos.length <= 0) { + let createLi = document.createElement("li"); + + createLi.innerHTML = "No Todos "; + list.appendChild(createLi); + } else { + todos.map((todo, index) => { + //display li + const createLi = document.createElement("li"); + const taskSpan = document.createElement("span"); + taskSpan.innerHTML = todo.task; + createLi.appendChild(taskSpan); + list.appendChild(createLi); + //end li + if (todo.completed == true) { + taskSpan.style.textDecoration = "line-through"; + } + //add button in li + let completeButton = document.createElement("button"); + let deleteButton = document.createElement("button"); + completeButton.textContent = todo.completed == true ? "✅" : "❌"; + deleteButton.innerText = "Delete"; + createLi.appendChild(completeButton); + createLi.append(deleteButton); + //button eventListener + completeButton.addEventListener("click", () => { + // if (todos[index].completed) { + // todos[index].completed = false; + // } else { + // todos[index].completed = true; + // } + todos[index].completed = !todos[index].completed; + console.log(`You click complete button${index}`); + populateTodoList(todos); + }); + deleteButton.addEventListener("click", () => { + console.log(`you click delete button ${index}`); + todos.splice(index, 1); + populateTodoList(todos); + }); + //end button in li + }); + } } // 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: "Wash the dishes", completed: true }, { task: "Do the shopping", completed: false }, ]; populateTodoList(todos); +deleteAllCompletedTodos(); +//add to do button listener +const addTodoButton = document.querySelector("button[type='submit']"); +const deleteAllButton = document.getElementById("remove-all-completed"); + +addTodoButton.addEventListener("click", (event) => { + event.preventDefault(); + console.log("you click add to do button"); + addNewTodo(event); +}); // 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(); + // event.preventDefault(); + const addValue = document.querySelector("input[type='text']"); + if (addValue.value == "" || addValue.value == " ") { + alert("Please add todoList"); + } else { + // alert(addValue.value); + const newAddObj = { task: addValue.value, completed: false }; + todos.push(newAddObj); + populateTodoList(todos); + addValue.value = ""; + } // Write your code here... and remember to reset the input field to be blank after creating a todo! } -// 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). +// Advanced challenge: Write a function 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... + //remove all button listener + deleteAllButton.addEventListener("click", () => { + console.log("you click delete all button"); + // const finalFilter = todos.filter((ele) => ele.completed === "true"); + //just mutate it + for (let i = todos.length - 1; i >= 0; i--) { + if (todos[i].completed === true) { + todos.splice(i, 1); + } + } + + populateTodoList(todos); + }); } diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css index 8b137891..15849fc3 100644 --- a/Sprint-3/todo-list/style.css +++ b/Sprint-3/todo-list/style.css @@ -1 +1,5 @@ - +li { + padding-bottom: 12px; + display: flex; + gap: 10px; +}