JIYAJAIN30 · 2400031665 · May 15, 2026
diff --git a/README.md b/README.md
@@ -15,13 +15,20 @@ A high-performance, minimalist productivity tool designed to help you stay organ
 - **🚀 Dynamic Task Management**: 
     - Effortlessly add new tasks.
     - Mark tasks as completed with a single click.
-    - Remove tasks you no longer need.
+    - Edit or remove tasks you no longer need.
 - **📊 Real-time Progress Tracking**: 
     - Stay motivated with a live progress indicator that calculates your completion percentage instantly.
 - **⏱️ Precision Timer**: 
     - Built-in stopwatch to track the time spent on your productivity sessions.
 - **📱 Clean & Responsive UI**: 
     - A distraction-free interface that works across various devices.
+- **🌙 Dark Mode Toggle**:  
+    - Switch between light and dark themes with smooth transitions.
+- **🧭 Navigation Tabs**:  
+    - Dedicated pages for **Tasks**, **Progress**, and **Timer** for better organization.
+- **⚖️ Sticky Footer**:  
+    - Professional footer with copyright and GitHub profile link.
+
 
 ## 🛠️ Tech Stack
 

diff --git a/index.html b/index.html
@@ -5,28 +5,42 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-
-    <div class="container">
+    <header>
         <h1>📚 Productivity Tracker</h1>
+        <nav>
+            <a href="#" onclick="showPage('tasks')">Tasks</a>
+            <a href="#" onclick="showPage('progress')">Progress</a>
+            <a href="#" onclick="showPage('timer')">Timer</a>
+            <button onclick="toggleDarkMode()">🌙 Dark Mode</button>
+        </nav>
+    </header>
 
-        <!-- Task Input -->
-        <input type="text" id="taskInput" placeholder="Enter your task">
-        <button onclick="addTask()">Add</button>
-
-        <!-- Task List -->
-        <ul id="taskList"></ul>
+    <main>
+        <!-- Tasks Page -->
+        <section id="tasks" class="page active">
+            <input type="text" id="taskInput" placeholder="Enter your task">
+            <button onclick="addTask()">Add</button>
+            <ul id="taskList"></ul>
+        </section>
 
-        <!-- Progress -->
-        <h3 id="progress">Progress: 0% (0/0 tasks completed)</h3>
+        <!-- Progress Page -->
+        <section id="progress" class="page">
+            <h3 id="progressText">Progress: 0% (0/0 tasks completed)</h3>
+        </section>
 
-        <!-- Timer -->
-        <div class="timer">
+        <!-- Timer Page -->
+        <section id="timer" class="page">
             <h2 id="time">00:00:00</h2>
             <button onclick="startTimer()">Start</button>
             <button onclick="stopTimer()">Stop</button>
-        </div>
-    </div>
+        </section>
+    </main>
+
+    <footer>
+        <p>© 2026 <a href="https://github.com/JIYAJAIN30" target="_blank">JIYAJAIN30</a>. All rights reserved.</p>
+    </footer>
 
     <script src="script.js"></script>
 </body>
-</html>
+</html>
+
diff --git a/script.js b/script.js
@@ -1,100 +1,106 @@
-let tasks = [];
+let tasks = []
+let seconds = 0
+let timer = null
+
+// ➤ Navigation
+function showPage(pageId) {
+    document.querySelectorAll(".page").forEach(p => p.classList.remove("active"))
+    document.getElementById(pageId).classList.add("active")
+}
 
 // ➤ Add Task
 function addTask() {
-    let input = document.getElementById("taskInput");
-    let taskText = input.value.trim();
-
-    if (taskText === "") return;
-
-    tasks.push({ text: taskText, done: false });
-    input.value = "";
-    renderTasks();
+    let input = document.getElementById("taskInput")
+    let taskText = input.value.trim()
+    if (taskText === "") return
+    tasks.push({ text: taskText, done: false })
+    input.value = ""
+    renderTasks()
 }
 
-// ➤ Render Tasks
+// ➤ Render Tasks (with CRUD buttons)
 function renderTasks() {
-    let list = document.getElementById("taskList");
-    list.innerHTML = "";
-
+    let list = document.getElementById("taskList")
+    list.innerHTML = ""
     tasks.forEach((task, index) => {
-        let li = document.createElement("li");
-
+        let li = document.createElement("li")
         li.innerHTML = `
             ${task.text}
             <button onclick="toggleTask(${index})">✔</button>
+            <button onclick="updateTask(${index})">✏️</button>
             <button onclick="deleteTask(${index})">❌</button>
-        `;
-
+        `
         if (task.done) {
-            li.style.textDecoration = "line-through";
-            li.style.color = "gray";
+            li.style.textDecoration = "line-through"
+            li.style.color = "gray"
         }
-
-        list.appendChild(li);
-    });
-
-    updateProgress();
+        list.appendChild(li)
+    })
+    updateProgress()
 }
 
-// ➤ Toggle Task
+// ➤ Toggle Task Completion
 function toggleTask(index) {
-    tasks[index].done = !tasks[index].done;
-    renderTasks();
+    tasks[index].done = !tasks[index].done
+    renderTasks()
+}
+
+// ➤ Update Task Text
+function updateTask(index) {
+    let newText = prompt("Edit your task:", tasks[index].text)
+    if (newText !== null && newText.trim() !== "") {
+        tasks[index].text = newText.trim()
+        renderTasks()
+    }
 }
 
 // ➤ Delete Task
 function deleteTask(index) {
-    tasks.splice(index, 1);
-    renderTasks();
+    tasks.splice(index, 1)
+    renderTasks()
 }
 
 // ➤ Progress Calculation
 function updateProgress() {
-    let total = tasks.length;
-
+    let total = tasks.length
+    let progressText = document.getElementById("progressText")
     if (total === 0) {
-        document.getElementById("progress").innerText =
-            "Progress: 0% (0/0 tasks completed)";
-        return;
+        progressText.innerText = "Progress: 0% (0/0 tasks completed)"
+        return
     }
-
-    let doneTasks = tasks.filter(task => task.done).length;
-    let percent = Math.round((doneTasks / total) * 100);
-
-    document.getElementById("progress").innerText =
-        `Progress: ${percent}% (${doneTasks}/${total} tasks completed)`;
+    let doneTasks = tasks.filter(task => task.done).length
+    let percent = Math.round((doneTasks / total) * 100)
+    progressText.innerText = `Progress: ${percent}% (${doneTasks}/${total} tasks completed)`
 }
 
-
-
-// ⏱️ Timer
-let seconds = 0;
-let timer = null;
-
+// ⏱️ Timer Functions
 function startTimer() {
-    if (timer !== null) return; // prevent multiple timers
-
+    if (timer !== null) return
     timer = setInterval(() => {
-        seconds++;
-        updateTime();
-    }, 1000);
+        seconds++
+        updateTime()
+    }, 1000)
 }
 
 function stopTimer() {
-    clearInterval(timer);
-    timer = null;
+    clearInterval(timer)
+    timer = null
 }
 
 function updateTime() {
-    let hrs = Math.floor(seconds / 3600);
-    let mins = Math.floor((seconds % 3600) / 60);
-    let secs = seconds % 60;
-
+    let hrs = Math.floor(seconds / 3600)
+    let mins = Math.floor((seconds % 3600) / 60)
+    let secs = seconds % 60
     document.getElementById("time").innerText =
-        `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
+        `${pad(hrs)}:${pad(mins)}:${pad(secs)}`
 }
 
 function pad(num) {
-    return num < 10 ? "0" + num : num;
-}
+    return num < 10 ? "0" + num : num
+}
+
+// 🌙 Dark Mode Toggle
+function toggleDarkMode() {
+    document.body.classList.toggle("dark-mode")
+}
+
diff --git a/style.css b/style.css
@@ -1,33 +1,114 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-    font-family: Arial;
-    background: #f4f4f4;
+    font-family: Arial, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    transition: background 0.4s ease, color 0.4s ease;
+}
+
+:root {
+    --bg: #f4f4f4;
+    --text: #000;
+    --primary: #4CAF50;
+    --secondary: #eee;
+}
+
+.dark-mode {
+    --bg: #181818;
+    --text: #e0e0e0;
+    --primary: #00b894;
+    --secondary: #242424;
+}
+
+header, footer {
+    background: var(--primary);
+    color: white;
+    padding: 12px;
     text-align: center;
+    transition: background 0.4s ease;
 }
 
-.container {
-    width: 300px;
-    margin: auto;
-    margin-top: 50px;
-    background: white;
+nav a, nav button {
+    margin: 0 10px;
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+nav a:hover, nav button:hover {
+    text-decoration: underline;
+}
+
+main {
+    flex: 1;
     padding: 20px;
-    border-radius: 10px;
+    text-align: center;
+}
+
+footer {
+    margin-top: auto;
+}
+
+footer a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+.page {
+    display: none;
+}
+
+.page.active {
+    display: block;
 }
 
 input {
     padding: 8px;
     width: 70%;
+    border: 1px solid #ccc;
+    border-radius: 5px;
 }
 
 button {
-    padding: 8px;
+    padding: 8px 12px;
     margin: 5px;
     cursor: pointer;
+    border: none;
+    border-radius: 5px;
+    background: var(--primary);
+    color: white;
+    transition: 0.3s;
+}
+
+button:hover {
+    opacity: 0.85;
 }
 
 li {
     list-style: none;
     margin: 10px 0;
-    background: #eee;
-    padding: 5px;
+    background: var(--secondary);
+    padding: 8px;
     border-radius: 5px;
-}
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background 0.4s ease;
+}
+