add time to elements

KASRA10 · KASRA10 · commit ec321a7d84e9 · 2026-01-08T14:27:21.000+03:30
diff --git a/Mini Digital Clock/index.html b/Mini Digital Clock/index.html
@@ -46,7 +46,7 @@ <h1 class="title">
             <div class="hours"></div>
             <div class="separator">:</div>
             <div class="minutes"></div>
-            <div class="persiod"></div>
+            <div class="period"></div>
             <div class="seconds"></div>
           </div>
           <div class="wrapper"></div>
@@ -62,6 +62,6 @@ <h1 class="title">
         </div>
       </section>
     </main>
-    <script src="./js/main.js" type="text/js"></script>
+    <script src="./js/main.js"></script>
   </body>
 </html>
diff --git a/Mini Digital Clock/js/main.js b/Mini Digital Clock/js/main.js
@@ -1 +1,64 @@
-document.addEventListener("DOMContentLoaded", function () { });
+document.addEventListener("DOMContentLoaded", function () {
+    // Clock Items
+    const hourItem = document.getElementsByClassName("hours");
+    const minutesItem = document.querySelector(".minutes");
+    const secondsItem = document.getElementsByClassName("seconds");
+    const periodItem = document.querySelector(".period");
+
+    // Calender Items
+    const monthItem = document.getElementsByClassName("month");
+    const dayItem = document.querySelector(".day");
+    const dayNumberItem = document.getElementsByClassName("day-number");
+    const yearItem = document.querySelector(".year");
+
+    // Easy Access To Days and Month
+    const days = [
+        "Sunday",
+        "Monday",
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday",
+    ];
+    const month = [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+    ];
+
+    function setTimePeriod(time) {
+        let period = "";
+        if (time < 12) {
+            period = "AM";
+        } else {
+            period = "PM";
+        }
+        return period;
+    }
+
+    // Js Current Time And Add To Elements
+    function clock() {
+        const currentDate = new Date();
+        const hours = currentDate.hours();
+        const minutes = currentDate.minutes();
+        const seconds = currentDate.seconds();
+
+        // Add to HTML DOM
+        hourItem.innerHTML = addZero(hours);
+        minutesItem.innerHTML = addZero(minutes);
+        secondsItem.innerHTML = addZero(seconds);
+        periodItem.innerHTML = setTimePeriod(hours);
+    }
+    clock();
+
+});
