diff --git a/index.html b/index.html
index 0f7fb66..fd23aaa 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,9 @@
+
+
+
📚 Productivity Tracker
diff --git a/script.js b/script.js
index ca39a81..27ba09f 100644
--- a/script.js
+++ b/script.js
@@ -1,5 +1,29 @@
let tasks = [];
+// 🌙 Dark Mode Toggle
+const themeToggle = document.getElementById("theme-toggle");
+
+themeToggle.addEventListener("click", () => {
+ document.body.classList.toggle("dark-mode");
+
+ // Save theme preference
+ if (document.body.classList.contains("dark-mode")) {
+ localStorage.setItem("theme", "dark");
+ } else {
+ localStorage.setItem("theme", "light");
+ }
+});
+
+// Load saved theme on refresh
+window.addEventListener("load", () => {
+ const savedTheme = localStorage.getItem("theme");
+
+ if (savedTheme === "dark") {
+ document.body.classList.add("dark-mode");
+ }
+});
+
+
// ➤ Add Task
function addTask() {
let input = document.getElementById("taskInput");
@@ -21,8 +45,10 @@ function renderTasks() {
let li = document.createElement("li");
li.innerHTML = `
- ${task.text}
+ ${task.text}
+
+
`;
@@ -43,6 +69,22 @@ function toggleTask(index) {
renderTasks();
}
+// ➤ Edit Task
+function editTask(index) {
+
+ let newText = prompt("Edit your task:", tasks[index].text);
+
+ if (newText === null) return;
+
+ newText = newText.trim();
+
+ if (newText === "") return;
+
+ tasks[index].text = newText;
+
+ renderTasks();
+}
+
// ➤ Delete Task
function deleteTask(index) {
tasks.splice(index, 1);
@@ -66,14 +108,13 @@ function updateProgress() {
`Progress: ${percent}% (${doneTasks}/${total} tasks completed)`;
}
-
// ⏱️ Timer
let seconds = 0;
let timer = null;
function startTimer() {
- if (timer !== null) return; // prevent multiple timers
+ if (timer !== null) return;
timer = setInterval(() => {
seconds++;
diff --git a/style.css b/style.css
index 79f3665..10cff6f 100644
--- a/style.css
+++ b/style.css
@@ -1,21 +1,52 @@
+:root {
+ --bg-color: #f4f4f4;
+ --container-color: white;
+ --text-color: black;
+ --task-bg: #eee;
+}
+
+body.dark-mode {
+ --bg-color: #222;
+ --container-color: #333;
+ --text-color: white;
+ --task-bg: #444;
+}
+
body {
font-family: Arial;
- background: #f4f4f4;
+ background: var(--bg-color);
+ color: var(--text-color);
text-align: center;
+ transition: 0.3s;
+}
+
+/* 🌙 Theme Toggle Button */
+#theme-toggle {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ padding: 10px;
+ border: none;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 18px;
}
.container {
width: 300px;
margin: auto;
margin-top: 50px;
- background: white;
+ background: var(--container-color);
padding: 20px;
border-radius: 10px;
+ transition: 0.3s;
}
input {
padding: 8px;
width: 70%;
+ background: white;
+ color: black;
}
button {
@@ -24,10 +55,20 @@ button {
cursor: pointer;
}
+/* ✅ Improved Task Styling */
li {
list-style: none;
margin: 10px 0;
- background: #eee;
- padding: 5px;
+ background: var(--task-bg);
+ padding: 10px;
border-radius: 5px;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+/* ✅ Task Buttons Alignment */
+li button {
+ margin-left: 5px;
}
\ No newline at end of file