From 46541ca874abfcaedd6d39a5588d844493631f1b Mon Sep 17 00:00:00 2001 From: Hatef Eidi Date: Thu, 20 Mar 2025 21:57:45 +0000 Subject: [PATCH 1/3] First version, add todo button, remove all, completed button are all working --- .gitignore | 3 +- Sprint-3/todo-list/index.html | 18 ++++++---- Sprint-3/todo-list/script.js | 63 ++++++++++++++++++++++++++++++++--- Sprint-3/todo-list/style.css | 51 ++++++++++++++++++++++++++++ 4 files changed, 122 insertions(+), 13 deletions(-) diff --git a/.gitignore b/.gitignore index bde36e530..480fd120e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ node_modules .DS_Store .vscode -**/.DS_Store \ No newline at end of file +**/.DS_Store +.qodo diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html index ee3ef64fd..32263c70f 100644 --- a/Sprint-3/todo-list/index.html +++ b/Sprint-3/todo-list/index.html @@ -3,25 +3,29 @@ - Title here + Todo list + + + -
+
- +
-
- +
+
+
    +
      diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index 61982a54f..c269e82c4 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -1,10 +1,42 @@ 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. + list.innerHTML = ""; + // list.appendChild(list.createElement("p").innerText="My To Do List"); + todos.forEach((todo, index) => { + const listItem = document.createElement("li"); + listItem.className = 'todo-item'; + listItem.style.textDecoration = todo.completed ? 'line-through' : 'none'; + + + //Creating the text node for the task + const taskText = document.createTextNode(todo.task); + listItem.appendChild(taskText); + + //Creating Span container for the buttons + const buttonContainer = document.createElement("span"); + buttonContainer.className = 'inner-button-container'; + + //Creating the complete button + const completeButton = document.createElement("button"); + completeButton.textContent = 'Complete ✔️'; + completeButton.onclick = () => toggleComplete(index); + buttonContainer.appendChild(completeButton); + + // Create the 'Delete' button + const deleteButton = document.createElement('button'); + deleteButton.textContent = 'Delete 🗑️'; + deleteButton.onclick = () => deleteTask(index); + buttonContainer.appendChild(deleteButton); + + // Append the button container to the list item + listItem.appendChild(buttonContainer); + + list.appendChild(listItem); + }); } -// 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 }, @@ -12,14 +44,35 @@ let todos = [ 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 toggleComplete(index) { + todos[index].completed = !todos[index].completed; + populateTodoList(todos); +} + +function deleteTask(index) { + todos.splice(index, 1); + populateTodoList(todos); +} + 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 taskInput = document.getElementById("todoInput"); + const task = taskInput.value.trim(); + if (task){ + todos.push({task, completed: false}); + populateTodoList(todos); + taskInput.value = ""; + populateTodoList(todos); + } } +document.getElementById('todo-form').addEventListener('submit', addNewTodo); +document.getElementById('remove-all-completed').addEventListener('click', deleteAllCompletedTodos); // 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(todo => !todo.completed); + populateTodoList(todos); } diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css index 8b1378917..cab1debe8 100644 --- a/Sprint-3/todo-list/style.css +++ b/Sprint-3/todo-list/style.css @@ -1 +1,52 @@ +#todo-form{ + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + width: 100%; + margin-top: 20px; + padding: 20px; +} +.body{ + text-align: center; +} + +.outer-button-countainer{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + gap: 10px; + flex-wrap: wrap; +} +#todoInput{ +border: none; +padding: 10px; +width: 100%; +margin-top: 10px; +border: 1px solid #ccc; +border-radius: 5px; +box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); +} +#todo-list{ + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + width: 100%; + margin-top: 20px; + padding: 20px; + +} +#todo-list span{ + display: flex; + margin: 10px; + flex-direction: row; + align-items: center; + justify-content: space-around; + gap: 10px; +} +#todo-list li{ + padding: 5px; +} \ No newline at end of file From 3927b07ed34ebff4efd53865a60dbb6386c3ab78 Mon Sep 17 00:00:00 2001 From: Hatef Eidi Date: Thu, 20 Mar 2025 22:47:00 +0000 Subject: [PATCH 2/3] Creating paragraph, seperating todos and done --- Sprint-3/todo-list/script.js | 136 +++++++++++++++++++++++------------ Sprint-3/todo-list/style.css | 4 +- 2 files changed, 94 insertions(+), 46 deletions(-) diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index c269e82c4..85bfe047e 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -1,78 +1,126 @@ -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. - list.innerHTML = ""; - // list.appendChild(list.createElement("p").innerText="My To Do List"); - todos.forEach((todo, index) => { +let todos = [ + { task: "Wash the dishes", completed: false }, + { task: "Do the shopping", completed: false }, +]; + +let done = []; + +function populateTodoList() { + const todoList = document.getElementById("todo-list"); + const completedList = document.getElementById("completed-todo-list"); + + // Clearing the existing list items + todoList.innerHTML = ""; + completedList.innerHTML = ""; + + // Function to create list items + function createListItem(todo, index, isCompleted) { const listItem = document.createElement("li"); listItem.className = 'todo-item'; - listItem.style.textDecoration = todo.completed ? 'line-through' : 'none'; - - //Creating the text node for the task + // Creating the text node for the task const taskText = document.createTextNode(todo.task); listItem.appendChild(taskText); - //Creating Span container for the buttons + // Creating Span container for the buttons const buttonContainer = document.createElement("span"); buttonContainer.className = 'inner-button-container'; - //Creating the complete button + // Creating the complete/uncomplete button const completeButton = document.createElement("button"); - completeButton.textContent = 'Complete ✔️'; - completeButton.onclick = () => toggleComplete(index); + completeButton.textContent = isCompleted ? 'Uncomplete ❌' : 'Complete ✔️'; + completeButton.onclick = () => toggleComplete(index, isCompleted); buttonContainer.appendChild(completeButton); - // Create the 'Delete' button - const deleteButton = document.createElement('button'); - deleteButton.textContent = 'Delete 🗑️'; - deleteButton.onclick = () => deleteTask(index); - buttonContainer.appendChild(deleteButton); + // Creating the delete button + const deleteButton = document.createElement("button"); + deleteButton.textContent = 'Delete 🗑️'; + deleteButton.onclick = () => deleteTask(index, isCompleted); + buttonContainer.appendChild(deleteButton); // Append the button container to the list item listItem.appendChild(buttonContainer); - list.appendChild(listItem); - }); + return listItem; + } + + // Populate the todo list with incomplete tasks + todos.forEach((todo, index) => { + const listItem = createListItem(todo, index, false); + todoList.appendChild(listItem); + }); + + // Populate the completed list with completed tasks + done.forEach((todo, index) => { + const listItem = createListItem(todo, index, true); + completedList.appendChild(listItem); + }); } +//Creating paragraph depending on the list +function createParagraph() { + const todoList = document.getElementById("todo-list"); + const completedList = document.getElementById("completed-todo-list"); + if (completedList.hasChildNodes()) { + const doneParagraph = document.createElement("p"); + doneParagraph.textContent = "Completed Tasks"; + completedList.insertBefore(doneParagraph, completedList.firstChild); + } -let todos = [ - { task: "Wash the dishes", completed: false }, - { task: "Do the shopping", completed: false }, -]; - -populateTodoList(todos); - -function toggleComplete(index) { - todos[index].completed = !todos[index].completed; - populateTodoList(todos); + if (todoList.hasChildNodes()) { + const todoParagraph = document.createElement("p"); + todoParagraph.textContent = "To Do Tasks"; + todoList.insertBefore(todoParagraph, todoList.firstChild); + } +} +function toggleComplete(index, isCompleted) { + if (isCompleted) { + // Move from done to todos + const [task] = done.splice(index, 1); + task.completed = false; + todos.push(task); + } else { + // Move from todos to done + const [task] = todos.splice(index, 1); + task.completed = true; + done.push(task); + } + populateTodoList(); + createParagraph(); } -function deleteTask(index) { - todos.splice(index, 1); - populateTodoList(todos); +function deleteTask(index, isCompleted) { + if (isCompleted) { + done.splice(index, 1); + } else { + todos.splice(index, 1); + } + populateTodoList(); + createParagraph(); } function addNewTodo(event) { - event.preventDefault(); const taskInput = document.getElementById("todoInput"); const task = taskInput.value.trim(); - if (task){ - todos.push({task, completed: false}); - populateTodoList(todos); + if (task) { + todos.push({ task, completed: false }); taskInput.value = ""; - populateTodoList(todos); + populateTodoList(); + createParagraph(); } } -document.getElementById('todo-form').addEventListener('submit', addNewTodo); -document.getElementById('remove-all-completed').addEventListener('click', deleteAllCompletedTodos); -// 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(todo => !todo.completed); - populateTodoList(todos); + done = []; + populateTodoList(); + createParagraph(); } + +document.getElementById('todo-form').addEventListener('submit', addNewTodo); +document.getElementById('remove-all-completed').addEventListener('click', deleteAllCompletedTodos); + +// Initial population of the todo list +populateTodoList(); +createParagraph(); diff --git a/Sprint-3/todo-list/style.css b/Sprint-3/todo-list/style.css index cab1debe8..6a42d5c17 100644 --- a/Sprint-3/todo-list/style.css +++ b/Sprint-3/todo-list/style.css @@ -29,7 +29,7 @@ border: 1px solid #ccc; border-radius: 5px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); } -#todo-list{ +#todo-list, #completed-todo-list{ display: flex; flex-direction: column; align-items: center; @@ -39,7 +39,7 @@ box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); padding: 20px; } -#todo-list span{ +#todo-list span, #completed-todo-list span{ display: flex; margin: 10px; flex-direction: row; From 50d13bbb3abef4651cd0f5a9b1e2ffab34876016 Mon Sep 17 00:00:00 2001 From: Hatef Eidi Date: Sat, 29 Mar 2025 10:02:10 +0000 Subject: [PATCH 3/3] Typo correction --- Sprint-3/todo-list/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js index 85bfe047e..87bfe33c8 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -28,7 +28,7 @@ function populateTodoList() { // Creating the complete/uncomplete button const completeButton = document.createElement("button"); - completeButton.textContent = isCompleted ? 'Uncomplete ❌' : 'Complete ✔️'; + completeButton.textContent = isCompleted ? 'Incomplete ❌' : 'Complete ✔️'; completeButton.onclick = () => toggleComplete(index, isCompleted); buttonContainer.appendChild(completeButton);