From 1fb53aaf026786fb8fadd7298a527967425f17dd Mon Sep 17 00:00:00 2001 From: Rahul Aggarwal <91338578+Rahulagg13@users.noreply.github.com> Date: Wed, 19 Oct 2022 17:41:14 +0530 Subject: [PATCH] Analog Clock (#102) * Smoke Effect * Analog Clock --- Analog clock/index.html | 67 +++++++++++++++++++++++ Analog clock/script.js | 14 +++++ Analog clock/style.css | 114 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 195 insertions(+) create mode 100644 Analog clock/index.html create mode 100644 Analog clock/script.js create mode 100644 Analog clock/style.css diff --git a/Analog clock/index.html b/Analog clock/index.html new file mode 100644 index 0000000..7bd89d5 --- /dev/null +++ b/Analog clock/index.html @@ -0,0 +1,67 @@ + + + + + + + + Clock + + + + + +
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
+ + + + + \ No newline at end of file diff --git a/Analog clock/script.js b/Analog clock/script.js new file mode 100644 index 0000000..b233ed4 --- /dev/null +++ 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 new file mode 100644 index 0000000..f166cfa --- /dev/null +++ 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; +} +