Added current date display at top of productivity tracker

index.html

@@ -9,6 +9,9 @@
     <div class="container">
         <h1>📚 Productivity Tracker</h1>
 
+
+<div id="date"></div>
+
         <!-- Task Input -->
         <input type="text" id="taskInput" placeholder="Enter your task">
         <button onclick="addTask()">Add</button>

script.js

@@ -97,4 +97,9 @@ function updateTime() {
 
 function pad(num) {
     return num < 10 ? "0" + num : num;
-}
+}
+
+
+//date and time 
+  const today = new Date();
+  document.getElementById("date").innerText = today.toDateString();

style.css

@@ -30,4 +30,27 @@ li {
     background: #eee;
     padding: 5px;
     border-radius: 5px;
-}
+}
+
+
+body {
+  margin: 0;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+#date {
+  font-size: 18px;
+  color: black;
+  padding: 10px;
+  border: 1px solid gray;
+  border-radius: 20px;
+  width: fit-content;
+  margin: 20px auto;
+  text-align: center;
+  background-color: lightyellow;
+}