Resilient-Labs · slandieps · Mar 9, 2025
diff --git a/todo.css 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
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>To-Do List</title>
+    <link rel="stylesheet" href="todo.css">
+</head>
+<body>
+    <h1>To-Do List</h1>
+    <input type="text" id="taskInput" placeholder="Add new task...">
+    <button id="addTaskButton">Add Task</button>
+    <button id="clearAllButton">Clear All</button>
+    <ul id="taskManager"></ul>
+    <script src="todo.js" defer></script>
+</body>
+</html>
diff --git a/todo.js 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 = "";
+    }
+});
+
+
+
+
+
+
+
+
+