initialization of a new child

1 files changed, 99 insertions, 0 deletions

diff --git a/crazy-clock.html b/crazy-clock.html
new file mode 100644
index 0000000..ca446b6
--- /dev/null
+++ b/crazy-clock.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+    <head>
+      <style>
+        #clock {
+          display: flex;
+          gap: 1rem;
+        }
+        .digitContainer {
+          display: block;
+          background-color: green;
+          height: 100px;
+          width: 60px;
+        }
+        .digitContainer img {
+          width: 100%;  
+          height: 100%;  
+        }
+      </style>
+    </head>
+    <body>
+
+      <div id="test"></div>
+
+      <div id="clock">
+        <div class="digitContainer"><img id="hour1"></img></div>
+        <div class="digitContainer"><img id="hour2"></img></div>
+
+        <div class="digitContainer"><img id="minute1"></img></div>
+        <div class="digitContainer"><img id="minute2"></img></div>
+
+        <div class="digitContainer"><img id="second1"></img></div>
+        <div class="digitContainer"><img id="second2"></img></div>
+      </div>
+
+      <script>
+        // gather relevant elements
+        let hour1 = document.getElementById("hour1");
+        let hour2 = document.getElementById("hour2");
+
+        let minute1 = document.getElementById("minute1");
+        let minute2 = document.getElementById("minute2");
+
+        let second1 = document.getElementById("second1");
+        let second2 = document.getElementById("second2");
+
+        // prepare clock
+        let clock = document.getElementById("test");
+        let timeFormat = new Intl.DateTimeFormat("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+            timeZone: "America/New_York",
+        });
+
+        // start text-clock
+        clock.innerText = timeFormat.format(Date.now());
+        setInterval(() => { 
+            clock.innerText = timeFormat.format(Date.now());
+        }, 1000); 
+
+        // start crazy-clock
+        setInterval(() => {
+          const time = timeFormat.format(Date.now());
+
+          const i1 = Math.round(Math.random()) + 1;
+          const i2 = Math.round(Math.random()) + 1;
+          const i3 = Math.round(Math.random()) + 1;
+          const i4 = Math.round(Math.random()) + 1;
+          const i5 = Math.round(Math.random()) + 1;
+          const i6 = Math.round(Math.random()) + 1;
+
+          const h1 = time[0];
+          const h2 = time[1];
+
+          const m1 = time[3];
+          const m2 = time[4];
+
+          const s1 = time[6];
+          const s2 = time[7];
+
+          // console.log(h1 + h2 + ':' + m1 + m2 + ':' + s1 + s2);
+
+          hour1.src = "./numbers/" + h1 + "/" + i1 + ".png";
+          hour2.src = "./numbers/" + h2 + "/" + i2 + ".png";
+
+          minute1.src = "./numbers/" + m1 + "/" + i3 + ".png";
+          minute2.src = "./numbers/" + m2 + "/" + i4 + ".png";
+
+          second1.src = "./numbers/" + s1 + "/" + i5 + ".png";
+          second2.src = "./numbers/" + s2 + "/" + i6 + ".png";
+          
+
+        }, 1000);
+
+      </script>  
+
+    </body>
+</html>
\ No newline at end of file