diff --git a/todo.css b/todo.css new file mode 100644 index 00000000..90275ec5 --- /dev/null +++ b/todo.css @@ -0,0 +1,34 @@ +/* Style for the task list */ +ul { + list-style-type: none; + padding: 0; +} + +li { + padding: 10px; + margin: 5px 0; + background-color: #f4f4f4; + border: 1px solid #ddd; + border-radius: 5px; + display: flex; + justify-content: space-between; + align-items: center; +} + +/* Completed task style */ +.complete { + text-decoration: line-through; + color: grey; +} + +/*Delete button style*/ + +.deleteButton { + background-color: red; + color: white; + border: none; + border-radius: 50%; + padding: 5px 10px; + font-weight: bold; +} + diff --git a/todo.html b/todo.html new file mode 100644 index 00000000..637c8364 --- /dev/null +++ b/todo.html @@ -0,0 +1,17 @@ + + + + + + To-Do List + + + +

To-Do List

+ + + + + + + diff --git a/todo.js b/todo.js new file mode 100644 index 00000000..7efb4a56 --- /dev/null +++ b/todo.js @@ -0,0 +1,63 @@ + //function to clear all task items + function clearAllTasks() { + let taskManager = document.getElementById('taskManager'); + taskManager.innerHTML = ""; // This will remove all list items from the task list +} + +//event listener for button click to clear all task items + document.getElementById('clearAllButton').addEventListener('click', clearAllTasks); + +//DOM fully loaded before adding listeners +document.addEventListener("DOMContentLoaded", function() { + + //event listener for button click + document.getElementById('addTaskButton').addEventListener('click', addNewTask); + + //function to add a new task to the list + function addNewTask() { + let taskInput = document.getElementById('taskInput'); // Get the input element by the updated ID + let taskText = taskInput.value.trim(); // Get the input value and remove extra spaces + + //if input is empty, do nothing + if (taskText === "") { + return; // Don't do anything if the input is empty + } + + //create new list item (li) + let li = document.createElement("li"); + li.textContent = taskText; // Set the text of the li element + + //create 'X' button + let deleteButton = document.createElement("button"); + deleteButton.textContent = "x"; + deleteButton.classList.add("deleteButton"); // Add a class for styling + + //add event listener for 'x' button to remove task item + deleteButton.addEventListener('click', function() { + li.remove(); // Remove the list item when the 'X' is clicked + }); + + //append 'x' button to the list item + li.appendChild(deleteButton); + + //add an event listener to toggle 'complete' class when item is selected + li.onclick = function () { + this.classList.toggle("complete"); // Toggle 'complete' and strikethrough + }; + + //append new task to task manager list + document.getElementById("taskManager").appendChild(li); + + //clear input field after adding the task + taskInput.value = ""; + } +}); + + + + + + + + +