Add progress bars

lulunac27a · lulunac27a · commit f1c60705ae63 · 2025-04-26T17:06:01.000-05:00
diff --git a/index.html b/index.html
@@ -1,21 +1,45 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-    <title>Current Date and Time Progress</title>
-    <link rel="stylesheet" href="styles.css" />
-</head>
-
-<body>
-    <h1>Current Date and Time Progress</h1>
-    <!--current local date and time-->
-    <p>Current date and time: <span id="currentDateTime"></span></p>
-    <!--current date and time in UTC-->
-    <p>
-        Current date and time (UTC): <span id="currentDateTimeUtc"></span>
-    </p>
-    <p>Current progress: <br /><span id="currentProgress"></span></p>
-    <script src="main.js"></script>
-</body>
-
-</html>
+    <head>
+        <title>Current Date and Time Progress</title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <h1>Current Date and Time Progress</h1>
+        <!--current local date and time-->
+        <p>Current date and time: <span id="currentDateTime"></span></p>
+        <!--current date and time in UTC-->
+        <p>
+            Current date and time (UTC): <span id="currentDateTimeUtc"></span>
+        </p>
+        <p>Current progress: <br /><span id="currentProgress"></span></p>
+        <p>
+            Year progress: <br /><progress id="yearProgress" max="1"></progress>
+        </p>
+        <p>
+            Month progress: <br /><progress
+                id="monthProgress"
+                max="1"
+            ></progress>
+        </p>
+        <p>
+            Day progress: <br /><progress id="dayProgress" max="1"></progress>
+        </p>
+        <p>
+            Hour progress: <br /><progress id="hourProgress" max="1"></progress>
+        </p>
+        <p>
+            Minute progress: <br /><progress
+                id="minuteProgress"
+                max="1"
+            ></progress>
+        </p>
+        <p>
+            Second progress: <br /><progress
+                id="secondProgress"
+                max="1"
+            ></progress>
+        </p>
+        <script src="main.js"></script>
+    </body>
+</html>
diff --git a/main.js b/main.js
@@ -139,4 +139,16 @@ const secondProgress =
     (currentDateTime - secondStart) / (secondEnd - secondStart); //second progress
 const secondProgressUtc =
     (currentUtcDateTime - secondStartUtc) / (secondEndUtc - secondStartUtc); //second progress in UTC
+const yearProgressText = document.getElementById("yearProgress"); //year progress text
+const monthProgressText = document.getElementById("monthProgress"); //month progress text
+const dayProgressText = document.getElementById("dayProgress"); //day progress text
+const hourProgressText = document.getElementById("hourProgress"); //hour progress text
+const minuteProgressText = document.getElementById("minuteProgress"); //minute progress text
+const secondProgressText = document.getElementById("secondProgress"); //second progress text
+yearProgressText.value = yearProgress; //set year progress text
+monthProgressText.value = monthProgress; //set month progress text
+dayProgressText.value = dayProgress; //set day progress text
+hourProgressText.value = hourProgress; //set hour progress text
+minuteProgressText.value = minuteProgress; //set minute progress text
+secondProgressText.value = secondProgress; //set second progress text
 currentProgressText.textContent = `Year progress: ${yearProgress} (${yearProgressUtc})\nMonth progress: ${monthProgress} (${monthProgressUtc})\nDay progress: ${dayProgress} (${dayProgressUtc})\nHour progress: ${hourProgress} (${hourProgressUtc})\nMinute progress: ${minuteProgress} (${minuteProgressUtc})\nSecond progress: ${secondProgress} (${secondProgressUtc})`; //set current progress text based on current date and time progress
