Skip to content

Commit bd8fb1e

Browse files
gurleen3gurleen3
committed
Basic Clock
1 parent 593ad3f commit bd8fb1e

File tree

3 files changed

+140
-0
lines changed

3 files changed

+140
-0
lines changed

‎Clock/gurleen3/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link href="styles.css" rel="stylesheet">
8+
<script defer src="script.js"></script>
9+
<title>Clock</title>
10+
</head>
11+
<body>
12+
<div class="clock">
13+
<div class="hand hour" data-hour-hand></div>
14+
<div class="hand minute" data-minute-hand></div>
15+
<div class="hand second" data-second-hand></div>
16+
<div class="number number1">1</div>
17+
<div class="number number2">2</div>
18+
<div class="number number3">3</div>
19+
<div class="number number4">4</div>
20+
<div class="number number5">5</div>
21+
<div class="number number6">6</div>
22+
<div class="number number7">7</div>
23+
<div class="number number8">8</div>
24+
<div class="number number9">9</div>
25+
<div class="number number10">10</div>
26+
<div class="number number11">11</div>
27+
<div class="number number12">12</div>
28+
</div>
29+
</body>
30+
</html>

‎Clock/gurleen3/script.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
setInterval(setClock, 1000)
2+
3+
const hourHand = document.querySelector('[data-hour-hand]')
4+
const minuteHand = document.querySelector('[data-minute-hand]')
5+
const secondHand = document.querySelector('[data-second-hand]')
6+
7+
function setClock() {
8+
const currentDate = new Date()
9+
const secondsRatio = currentDate.getSeconds() / 60
10+
const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60
11+
const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
12+
setRotation(secondHand, secondsRatio)
13+
setRotation(minuteHand, minutesRatio)
14+
setRotation(hourHand, hoursRatio)
15+
}
16+
17+
function setRotation(element, rotationRatio) {
18+
element.style.setProperty('--rotation', rotationRatio * 360)
19+
}
20+
21+
setClock()

‎Clock/gurleen3/styles.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
*, *::after, *::before {
2+
box-sizing: border-box;
3+
font-family: Gotham Rounded, sans-serif;
4+
}
5+
6+
body {
7+
background: linear-gradient(to right, hsl(200, 100%, 50%), hsl(175, 100%, 50%));
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 100vh;
12+
overflow: hidden;
13+
}
14+
15+
.clock {
16+
width: 300px;
17+
height: 300px;
18+
background-color: rgba(255, 255, 255, .8);
19+
border-radius: 50%;
20+
border: 2px solid black;
21+
position: relative;
22+
}
23+
24+
.clock .number {
25+
--rotation: 0;
26+
position: absolute;
27+
width: 100%;
28+
height: 100%;
29+
text-align: center;
30+
transform: rotate(var(--rotation));
31+
font-size: 1.5rem;
32+
}
33+
34+
.clock .number1 { --rotation: 30deg; }
35+
.clock .number2 { --rotation: 60deg; }
36+
.clock .number3 { --rotation: 90deg; }
37+
.clock .number4 { --rotation: 120deg; }
38+
.clock .number5 { --rotation: 150deg; }
39+
.clock .number6 { --rotation: 180deg; }
40+
.clock .number7 { --rotation: 210deg; }
41+
.clock .number8 { --rotation: 240deg; }
42+
.clock .number9 { --rotation: 270deg; }
43+
.clock .number10 { --rotation: 300deg; }
44+
.clock .number11 { --rotation: 330deg; }
45+
46+
.clock .hand {
47+
--rotation: 0;
48+
position: absolute;
49+
bottom: 50%;
50+
left: 50%;
51+
border: 1px solid white;
52+
border-top-left-radius: 10px;
53+
border-top-right-radius: 10px;
54+
transform-origin: bottom;
55+
z-index: 10;
56+
transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
57+
}
58+
59+
.clock::after {
60+
content: '';
61+
position: absolute;
62+
background-color: black;
63+
z-index: 11;
64+
width: 15px;
65+
height: 15px;
66+
top: 50%;
67+
left: 50%;
68+
transform: translate(-50%, -50%);
69+
border-radius: 50%;
70+
}
71+
72+
.clock .hand.second {
73+
width: 3px;
74+
height: 45%;
75+
background-color: red;
76+
}
77+
78+
.clock .hand.minute {
79+
width: 7px;
80+
height: 40%;
81+
background-color: black;
82+
}
83+
84+
.clock .hand.hour {
85+
width: 10px;
86+
height: 35%;
87+
background-color: black;
88+
}
89+

0 commit comments

Comments
 (0)