Skip to content

Commit c145ad3

Browse files
abishaklaabishakla
authored
Add files via upload
0 parents  commit c145ad3

File tree

3 files changed

+134
-0
lines changed

3 files changed

+134
-0
lines changed

‎clock/index.html

+30
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+
<title>Clock</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="clock">
11+
<div class="hand hour" id="hour"></div>
12+
<div class="hand minute" id="minute"></div>
13+
<div class="hand second" id="second"></div>
14+
<div class="number number1">1</div>
15+
<div class="number number2">2</div>
16+
<div class="number number3">3</div>
17+
<div class="number number4">4</div>
18+
<div class="number number5">5</div>
19+
<div class="number number6">6</div>
20+
<div class="number number7">7</div>
21+
<div class="number number8">8</div>
22+
<div class="number number9">9</div>
23+
<div class="number number10">10</div>
24+
<div class="number number11">11</div>
25+
<div class="number number12">12</div>
26+
</div>
27+
<script src="script.js"></script>
28+
</body>
29+
</html>
30+

‎clock/script.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// Set up an interval to update the clock every second
2+
setInterval(setClock, 1000);
3+
4+
// Get references to the clock hand elements
5+
const hourHand = document.getElementById("hour");
6+
const minuteHand = document.getElementById("minute");
7+
const secondHand = document.getElementById("second");
8+
9+
// Function to update the clock hands
10+
function setClock() {
11+
const currentDate = new Date(); // Get the current date and time
12+
13+
// Calculate the rotation ratios
14+
const secondsRatio = currentDate.getSeconds() / 60;
15+
const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
16+
const hoursRatio = (minutesRatio + currentDate.getHours() % 12) / 12;
17+
18+
// Apply rotation to each hand
19+
setRotation(secondHand, secondsRatio);
20+
setRotation(minuteHand, minutesRatio);
21+
setRotation(hourHand, hoursRatio);
22+
}
23+
24+
// Function to apply rotation to an element
25+
function setRotation(element, rotationRatio) {
26+
if (element) {
27+
// Rotate the element based on the calculated ratio
28+
element.style.transform = `translateX(-50%) rotate(${rotationRatio * 360}deg)`;
29+
}
30+
}
31+
32+
// Initialize the clock immediately
33+
setClock();
34+
35+

‎clock/style.css

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
background: red;
10+
}
11+
12+
.clock {
13+
margin-top: 20%;
14+
margin-left: 50%;
15+
transform: translate(-50%,-50%);
16+
height: 300px;
17+
width: 300px;
18+
border-radius: 50%;
19+
background-color: aquamarine;
20+
position: relative;
21+
overflow: hidden;
22+
}
23+
24+
.number {
25+
position: absolute;
26+
width: 100%;
27+
height: 100%;
28+
transform: rotate(0deg);
29+
text-align: center;
30+
}
31+
32+
.number1 { transform: rotate(30deg); }
33+
.number2 { transform: rotate(60deg); }
34+
.number3 { transform: rotate(90deg); }
35+
.number4 { transform: rotate(120deg); }
36+
.number5 { transform: rotate(150deg); }
37+
.number6 { transform: rotate(180deg); }
38+
.number7 { transform: rotate(210deg); }
39+
.number8 { transform: rotate(240deg); }
40+
.number9 { transform: rotate(270deg); }
41+
.number10 { transform: rotate(300deg); }
42+
.number11 { transform: rotate(330deg); }
43+
44+
.hand {
45+
position: absolute;
46+
bottom: 50%;
47+
left: 50%;
48+
background-color: rgb(0, 0, 0);
49+
transform-origin: bottom;
50+
border: 1px solid white;
51+
width: 5px;
52+
height: 25%;
53+
z-index: 10;
54+
transform: translateX(-50%) rotate(var(--rotation)deg);
55+
}
56+
57+
.second {
58+
width: 7px;
59+
height: 43%;
60+
background-color: rgb(138, 217, 0);
61+
}
62+
63+
.minute {
64+
width: 9px;
65+
height: 37%;
66+
background-color: blue;
67+
}
68+
69+

0 commit comments

Comments
 (0)