initial year progress bar

DhanushNehru · Sep 20, 2024 · 5add873 · 5add873
1 parent 7b888c2
commit 5add873
Showing 1 changed file with 58 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Year Progress Bar</title>
+  <style>
+    .progress-container {
+      width: 100%;
+      background-color: #e0e0e0;
+      border-radius: 5px;
+      height: 30px;
+      position: relative;
+    }
+    .progress-bar {
+      height: 100%;
+      background-color: #3b82f6;
+      width: 0;
+      border-radius: 5px;
+      transition: width 0.5s ease;
+    }
+    .progress-text {
+      position: absolute;
+      width: 100%;
+      top: 0;
+      text-align: center;
+      line-height: 30px;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+  <div class="progress-container">
+    <div class="progress-bar" id="progress-bar"></div>
+    <div class="progress-text" id="progress-text">0.000000% Year Completed</div>
+  </div>
+
+  <script>
+    function calculateProgress() {
+      const now = new Date();
+      const start = new Date(now.getFullYear(), 0, 1);
+      const end = new Date(now.getFullYear() + 1, 0, 1);
+      const progress = ((now - start) / (end - start)) * 100;
+      const progressFormatted = progress.toFixed(6);
+
+      // Update progress bar and text
+      const progressBar = document.getElementById("progress-bar");
+      const progressText = document.getElementById("progress-text");
+      progressBar.style.width = progress + "%";
+      progressText.textContent = progressFormatted + "% Year Completed";
+    }
+
+    // Update every second
+    setInterval(calculateProgress, 1000);
+    calculateProgress(); // Initial call to set progress on page load
+  </script>
+</body>
+</html>