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..87bfe33c8 100644 --- a/Sprint-3/todo-list/script.js +++ b/Sprint-3/todo-list/script.js @@ -1,25 +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. -} - -// 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); +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'; + + // 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/uncomplete button + const completeButton = document.createElement("button"); + completeButton.textContent = isCompleted ? 'Incomplete ❌' : 'Complete ✔️'; + completeButton.onclick = () => toggleComplete(index, isCompleted); + buttonContainer.appendChild(completeButton); + + // 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); + + 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); + } + + 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, isCompleted) { + if (isCompleted) { + done.splice(index, 1); + } else { + todos.splice(index, 1); + } + populateTodoList(); + createParagraph(); +} -// 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 taskInput = document.getElementById("todoInput"); + const task = taskInput.value.trim(); + if (task) { + todos.push({ task, completed: false }); + taskInput.value = ""; + populateTodoList(); + createParagraph(); + } } -// 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... + 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 8b1378917..6a42d5c17 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, #completed-todo-list{ + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + width: 100%; + margin-top: 20px; + padding: 20px; + +} +#todo-list span, #completed-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