Skip to content

Commit c038593

Browse files
SirajmollaSirajmolla
authored
Merge pull request #917 from Abishethvarman/main
Analog Clock in Html, css and js has added to the repo.
2 parents ae9629c + 4c4fdb5 commit c038593

File tree

4 files changed

+139
-0
lines changed

4 files changed

+139
-0
lines changed

‎Analog-Clock/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# This analog clock is made of html, css and js. So it would be easily view in any browsers

‎Analog-Clock/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 http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Analog Clock</title>
8+
<link rel="stylesheet" href="style.css">
9+
<script defer src="script.js"></script>
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>

‎Analog-Clock/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()

‎Analog-Clock/style.css

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

0 commit comments

Comments
 (0)