Analog Clock (#102)

* Smoke Effect * Analog Clock
pulkit-30 · Oct 19, 2022 · 1fb53aa · 1fb53aa
1 parent 909cfee
commit 1fb53aa
Show file tree

Hide file tree

Showing 3 changed files with 195 additions and 0 deletions.
diff --git a/Analog clock/index.html b/Analog clock/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Clock</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
+</head>
+
+<body>
+    <div class="clock">
+        <div class="hand hour"></div>
+        <div class="hand minute"></div>
+        <div class="hand second"></div>
+        <div class="number number1">1</div>
+        <div class="number number2">2</div>
+        <div class="number number3">3</div>
+        <div class="number number4">4</div>
+        <div class="number number5">5</div>
+        <div class="number number6">6</div>
+        <div class="number number7">7</div>
+        <div class="number number8">8</div>
+        <div class="number number9">9</div>
+        <div class="number number10">10</div>
+        <div class="number number11">11</div>
+        <div class="number number12">12</div>
+    </div>
+</body>
+
+</html>
+
+<!-- <!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link href="style.css" rel="stylesheet">
+    <script defer src="script.js"></script>
+    <title>Clock</title>
+</head>
+
+<body>
+    <div class="clock">
+        <div class="hand hour"></div>
+        <div class="hand minute"></div>
+        <div class="hand second"></div>
+        <div class="number number1">1</div>
+        <div class="number number2">2</div>
+        <div class="number number3">3</div>
+        <div class="number number4">4</div>
+        <div class="number number5">5</div>
+        <div class="number number6">6</div>
+        <div class="number number7">7</div>
+        <div class="number number8">8</div>
+        <div class="number number9">9</div>
+        <div class="number number10">10</div>
+        <div class="number number11">11</div>
+        <div class="number number12">12</div>
+    </div>
+</body>
+
+</html> -->
diff --git a/Analog clock/script.js b/Analog clock/script.js
@@ -0,0 +1,14 @@
+setInterval(() => {
+  const hour = document.querySelector(".hour");
+  const minute = document.querySelector(".minute");
+  const second = document.querySelector(".second");
+  const deg = 6;
+  const date = new Date();
+  const setminute = date.getMinutes();
+  const setSecond = date.getSeconds();
+  const setHour = date.getHours();
+
+  hour.style.setProperty("--rotation", setHour * 30 + setminute / 2);
+  minute.style.setProperty("--rotation", setminute * 6);
+  second.style.setProperty("--rotation", setSecond * 6);
+}, 1000);
diff --git a/Analog clock/style.css b/Analog clock/style.css
@@ -0,0 +1,114 @@
+*{
+    box-sizing: border-box;
+}
+
+
+body{
+    background-color: #21D4FD;
+    background-image: linear-gradient(to right, #21D4FD 0%, #B721FF 100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    overflow: hidden;
+}
+
+.clock{
+    height:500px;
+    width:500px;
+    background-color: rgba(255, 255, 255, .4);
+    border-radius: 50%;
+    border: 2px solid black;
+    position: relative;
+}
+
+.clock .number{
+    --rotation :0;
+    font-size: 45px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transform: rotate(var(--rotation));
+}
+
+.clock .number1{
+    --rotation : 30deg;
+}
+.clock .number2{
+    --rotation:60deg;
+}
+.clock .number3{
+    --rotation:90deg;
+}
+.clock .number4{
+    --rotation:120deg;
+}
+.clock .number5{
+    --rotation:150deg;
+}
+.clock .number6{
+    --rotation:180deg;
+}
+.clock .number7{
+    --rotation:210deg;
+}
+.clock .number8{
+    --rotation:240deg;
+}
+.clock .number9{
+    --rotation:270deg;
+}
+.clock .number10{
+    --rotation:300deg;
+}
+.clock .number11{
+    --rotation:330deg;
+}
+
+.clock .hand{
+    --rotation:0;
+    position: absolute;
+    width: 10px;
+    bottom: 50%;
+    left: 50%;
+    height: 40%;
+    background-color: black;
+    border-top-left-radius:10px;
+    border-top-right-radius:10px;
+    z-index: 10;
+    transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
+    transform-origin: bottom;
+}
+
+.clock::after{
+    content:"";
+    background-color: black;
+    z-index: 11;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+    border-radius: 50%;
+
+
+}
+
+.clock .hand.second{
+    width:3px;
+    height:42%;
+    background-color: red;
+}
+.clock .hand.minute{
+    width:7px;
+    height:40%;
+    background-color: black;
+}
+.clock .hand.hour{
+    width:7px;
+    height:35%;
+    background-color: black;
+}
+