Added Dynamic Visual Progress Bar for Real-Time Task Tracking

index.html

@@ -18,6 +18,9 @@ <h1>📚 Productivity Tracker</h1>
 
         <!-- Progress -->
         <h3 id="progress">Progress: 0% (0/0 tasks completed)</h3>
+        <div class="progress-container">
+    <div id="progressBar"></div>
+</div>
 
         <!-- Timer -->
         <div class="timer">

script.js

@@ -97,4 +97,25 @@ function updateTime() {
 
 function pad(num) {
     return num < 10 ? "0" + num : num;
+}
+
+const progressBar = document.getElementById("progressBar");
+
+function updateProgress() {
+    const totalTasks = tasks.length;
+    const completedTasks = tasks.filter(task => task.completed).length;
+
+    const progressPercent =
+        totalTasks === 0 ? 0 : (completedTasks / totalTasks) * 100;
+
+    progressText.innerText =
+        `Progress: ${Math.round(progressPercent)}%`;
+
+    progressBar.style.width = `${progressPercent}%`;
+
+    if (progressPercent === 100) {
+        progressBar.style.background = "green";
+    } else {
+        progressBar.style.background = "#4caf50";
+    }
 }

style.css

@@ -30,4 +30,20 @@ li {
     background: #eee;
     padding: 5px;
     border-radius: 5px;
+}
+
+.progress-container {
+    width: 100%;
+    height: 12px;
+    background: #ddd;
+    border-radius: 10px;
+    overflow: hidden;
+    margin-top: 10px;
+}
+
+#progressBar {
+    height: 100%;
+    width: 0%;
+    background: #4caf50;
+    transition: width 0.3s ease;
 }