From daa41ad37cacf942dad7cb1578e7ddadb5d36597 Mon Sep 17 00:00:00 2001 From: SANDESH LENDVE <123884782+mrsandy1965@users.noreply.github.com> Date: Tue, 26 Nov 2024 10:12:24 +0530 Subject: [PATCH] Add files via upload --- index.html | 30 +++++++++++++++++++ script.js | 21 +++++++++++++ styles.css | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 139 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..fdad07b --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + + + + + Clock + + +
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
+ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..ab63d41 --- /dev/null +++ b/script.js @@ -0,0 +1,21 @@ +setInterval(setClock, 1000) + +const hourHand = document.querySelector('[data-hour-hand]') +const minuteHand = document.querySelector('[data-minute-hand]') +const secondHand = document.querySelector('[data-second-hand]') + +function setClock() { + const currentDate = new Date() + const secondsRatio = currentDate.getSeconds() / 60 + const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60 + const hoursRatio = (minutesRatio + currentDate.getHours()) / 12 + setRotation(secondHand, secondsRatio) + setRotation(minuteHand, minutesRatio) + setRotation(hourHand, hoursRatio) +} + +function setRotation(element, rotationRatio) { + element.style.setProperty('--rotation', rotationRatio * 360) +} + +setClock() \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5837389 --- /dev/null +++ b/styles.css @@ -0,0 +1,88 @@ +*, *::after, *::before { + box-sizing: border-box; + font-family: Gotham Rounded, sans-serif; +} + +body { + background: linear-gradient(to right, hsl(200, 100%, 50%), hsl(175, 100%, 50%)); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + overflow: hidden; +} + +.clock { + width: 300px; + height: 300px; + background-color: rgba(255, 255, 255, .8); + border-radius: 50%; + border: 2px solid black; + position: relative; +} + +.clock .number { + --rotation: 0; + position: absolute; + width: 100%; + height: 100%; + text-align: center; + transform: rotate(var(--rotation)); + font-size: 1.5rem; +} + +.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; + bottom: 50%; + left: 50%; + border: 1px solid white; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + transform-origin: bottom; + z-index: 10; + transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg)); +} + +.clock::after { + content: ''; + position: absolute; + background-color: black; + z-index: 11; + width: 15px; + height: 15px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; +} + +.clock .hand.second { + width: 3px; + height: 45%; + background-color: red; +} + +.clock .hand.minute { + width: 7px; + height: 40%; + background-color: black; +} + +.clock .hand.hour { + width: 10px; + height: 35%; + background-color: black; +} \ No newline at end of file