Made a simple digital+analog clock using HTML, CSS, JS

siddchab03 · Oct 21, 2022 · 06bf5ca · 06bf5ca
1 parent 8d4ad87
commit 06bf5ca
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 0 deletions.
diff --git a/clock-sidd/clock.jpg b/clock-sidd/clock.jpg
diff --git a/clock-sidd/index.html b/clock-sidd/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Clock</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="inter.js"></script>
+</head>
+<body> 
+    <div id="main">
+        <div id="hour"></div>
+        <div id="minutes"></div>
+        <div id="seconds"></div>
+    </div>
+    <div>
+        <div id="digital">00:00:00AM</div>
+    </div>
+</body>
+</html>
diff --git a/clock-sidd/inter.js b/clock-sidd/inter.js
@@ -0,0 +1,37 @@
+
+setInterval(() => {
+    d = new Date(); 
+    hr = d.getHours();
+    min = d.getMinutes();
+    sec = d.getSeconds();
+    hr_rotation = 30 * hr + min / 2; 
+    min_rotation = 6 * min;
+    sec_rotation = 6 * sec;
+
+    hour.style.transform = `rotate(${hr_rotation}deg)`;
+    minutes.style.transform = `rotate(${min_rotation}deg)`;
+    seconds.style.transform = `rotate(${sec_rotation}deg)`;
+}, 1000);
+
+setInterval(showTime, 1000);
+function showTime() {
+    let time = new Date();
+    let hour = time.getHours();
+    let min = time.getMinutes();
+    let sec = time.getSeconds();
+    am_pm = "AM";
+        if (hour > 12) {
+        hour -= 12;
+        am_pm = "PM";
+    }
+    if (hour == 0) {
+        hr = 12;
+        am_pm = "AM";
+    }
+    hour = hour < 10 ? "0" + hour : hour;
+    min = min < 10 ? "0" + min : min;
+    sec = sec < 10 ? "0" + sec : sec;
+    let currentTime = hour + ":" + min + ":" + sec + am_pm;
+        document.getElementById("digital").innerHTML = currentTime;
+    }
+showTime();
diff --git a/clock-sidd/style.css b/clock-sidd/style.css
@@ -0,0 +1,57 @@
+body{
+    background-color:rgb(0, 0, 0)
+}
+
+#main{
+    position:relative;
+    margin:auto;
+    height:40vw;
+    width:40vw;
+    background: url(clock.jpg) no-repeat;
+    background-size:100%;
+    border-radius:2900px;
+
+}
+
+#hour, #minutes, #seconds{
+    position:absolute;
+    background:black;
+    border-radius:10px;
+    transform-origin:bottom;
+}
+
+#hour{
+    width:1.8%;
+    height:25%;
+    top:25%;
+    left:48.85%;
+    opacity:0.8;
+}
+
+#minutes{
+    width: 1.6%;
+    height: 30%;
+    top: 19%;
+    left: 48.9%;
+    opacity: 0.8;
+}
+
+#seconds{
+    width: 1%;
+    height: 40%;
+    top: 9%;
+    left: 49.25%;
+    opacity: 0.8;
+}
+
+#digital {
+
+    font-size: 175px;
+    color:white;
+    width: 900px;
+    margin:auto;
+    margin-top:50px;
+    text-align: center;
+    border: 10px solid rgb(252, 252, 252);
+    border-radius: 20px;
+  }