diff --git a/index.html b/index.html index cad86de..d5e4523 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,6 @@

Developer's Todo List

-

Number of Tasks:

Number of Tasks: />
+

Number of Tasks:

+
diff --git a/script.js b/script.js index f79f67b..b6e2ccd 100644 --- a/script.js +++ b/script.js @@ -2,6 +2,7 @@ document.addEventListener("DOMContentLoaded", () => { const todoForm = document.getElementById("todo-form"); const todoInput = document.getElementById("todo-input"); const todoList = document.getElementById("todo-list"); + const markAllDoneButton = document.getElementById("mark-all-done"); // Load todos from localStorage let todos = JSON.parse(localStorage.getItem("todos")) || []; @@ -44,18 +45,25 @@ document.addEventListener("DOMContentLoaded", () => { todoForm.addEventListener("submit", (e) => { e.preventDefault(); - const text = todoInput.value.trim(); - if (text) { - const todo = { - id: Date.now(), - text, - completed: false, - }; - todos.push(todo); - todoInput.value = ""; + const text = todoInput.value.trim(); + if (text) { + const todo = { + id: Date.now(), + text, + completed: false, + }; + todos.push(todo); + todoInput.value = ""; + saveTodos(); + renderTodos(); + } + }); + + markAllDoneButton.addEventListener("click", () => { + todos.forEach(todo => todo.completed = true); saveTodos(); renderTodos(); - } + }); function countListItems() { @@ -81,6 +89,7 @@ const change = () =>{ document.querySelector("body").style.backgroundColor = "black"; document.querySelector("body").style.color = "#f5f5f5"; document.querySelector("h1").style.color = "white"; + document.querySelector("h2").style.color = "white"; } else{ @@ -91,6 +100,7 @@ const change = () =>{ document.querySelector("body").style.backgroundColor = "#f5f5f5"; document.querySelector("body").style.color = "black"; document.querySelector("h1").style.color = "black"; + document.querySelector("h2").style.color = "black"; } } mode.addEventListener("click", change); \ No newline at end of file diff --git a/styles.css b/styles.css index 8aecb82..c3f704c 100644 --- a/styles.css +++ b/styles.css @@ -24,6 +24,13 @@ h1 { margin-bottom: 1.5rem; } +h2 { + text-align: center; + color: #333; + margin-bottom: 1.5rem; +} + + #todo-form { display: flex; gap: 0.5rem; @@ -90,4 +97,14 @@ h1 { border-radius: 4px; cursor: pointer; float: right; +} + +#mark-all-done { + margin: 2mm; + padding: 0.5rem 1rem; + background: #0066cc; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; } \ No newline at end of file