Skip to content

Commit d1176c8

Browse files
devWonderkinddevWonderkind
authored
Analog Clock (#57)
* Create Analog clock * Create Analog clock * index.html * Delete Analog clock * Create index.html * Add files via upload
1 parent de6939c commit d1176c8

File tree

3 files changed

+147
-0
lines changed

3 files changed

+147
-0
lines changed

‎Analog clock/index.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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>Clock</title>
8+
<link rel="icon" type="image/x-icon" href="https://www.freeiconspng.com/thumbs/clock-png/clock-png-32.png">
9+
<link rel="stylesheet" href="style.css">
10+
11+
</head>
12+
13+
<body>
14+
<div class="container">
15+
<div class="clock">
16+
<div class="circle" id="sc" style="--clr:#04fc43;" ><i></i></div>
17+
<div class="circle circle2" id="mn" style="--clr:#fee800;" ><i></i></div>
18+
<div class="circle circle3" id="hr" style="--clr:#ff2972;" ><i></i></div>
19+
20+
<span style="--i:1;"><b>1</b></span>
21+
<span style="--i:2;"><b>2</b></span>
22+
<span style="--i:3;"><b>3</b></span>
23+
<span style="--i:4;"><b>4</b></span>
24+
<span style="--i:5;"><b>5</b></span>
25+
<span style="--i:6;"><b>6</b></span>
26+
<span style="--i:7;"><b>7</b></span>
27+
<span style="--i:8;"><b>8</b></span>
28+
<span style="--i:9;"><b>9</b></span>
29+
<span style="--i:10;"><b>10</b></span>
30+
<span style="--i:11;"><b>11</b></span>
31+
<span style="--i:12;"><b>12</b></span>
32+
33+
</div>
34+
</div>
35+
<script type="text/javascript">
36+
// const deg= 6;
37+
const hr = document.querySelector('#hr');
38+
const mn = document.querySelector('#mn');
39+
const sc = document.querySelector('#sc');
40+
setInterval(()=>{
41+
let day = new Date();
42+
let hh= day.getHours() *30;
43+
let mm= day.getMinutes() *6;
44+
let ss= day.getSeconds() *6;
45+
46+
hr.style.transform=`rotateZ(${hh+(mm/12)}deg)`;
47+
mn.style.transform=`rotateZ(${(mm)}deg)`;
48+
sc.style.transform=`rotateZ(${(ss)}deg)`;
49+
})
50+
</script>
51+
</body>
52+
</html>

‎Analog clock/style.css

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body{
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
min-height: 100vh;
11+
background: rgba(2, 2, 54, 0.932);
12+
}
13+
14+
.clock{
15+
position: relative;
16+
width: 450px;
17+
height: 450px;
18+
background: rgba(1, 1, 39, 0.932);
19+
border-radius: 50%;
20+
box-shadow: 10px 50px 70px rgba(0,0,0,0.25)
21+
inset 5px 5px 10px rgba(0,0,0,0.5),
22+
inset 5px 5px 10px rgba(0,0,0,0.2),
23+
inset -5px -5px 15px rgba(0,0,0,0.75);
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
margin-bottom: 30px;
28+
}
29+
.clock::before{
30+
content: '';
31+
position: absolute;
32+
background: rgba(4, 4, 94, 0.932);
33+
border: 3px solid white;
34+
border-radius: 50%;
35+
z-index: 100000;
36+
}
37+
.clock span{
38+
position: absolute;
39+
inset: 20px;
40+
color: white;
41+
text-align: center;
42+
transform: rotate(calc(30deg*var(--i)));
43+
}
44+
.clock span b{
45+
font-size: 2em;
46+
font-weight: 600;
47+
display: inline-block;
48+
transform: rotate(calc(-30deg*var(--i)));
49+
}
50+
.circle{
51+
position: absolute;
52+
width: 300px;
53+
height: 300px;
54+
border: 2px solid rgba(0,0,0,0.25);
55+
border-radius: 50%;
56+
display: flex;
57+
justify-content: center;
58+
align-items: flex-start;
59+
z-index: 10;
60+
}
61+
.circle i{
62+
position: absolute;
63+
width: 6px;
64+
height: 50%;
65+
background: var(--clr);
66+
opacity: 0.75;
67+
transform-origin: bottom;
68+
transform: scale(0.5);
69+
z-index: 9;
70+
}
71+
.circle2{
72+
width: 240px;
73+
height: 240px;
74+
z-index: 9;
75+
}
76+
77+
.circle3{
78+
width: 180px;
79+
height: 180px;
80+
z-index: 8;
81+
}
82+
83+
.circle::before{
84+
content: '';
85+
position: absolute;
86+
top: -8.5px;
87+
width: 15px;
88+
height: 15px;
89+
border-radius: 50%;
90+
background: var(--clr);
91+
box-shadow: 0 0 20px var(--clr),
92+
0 0 60px var(--clr);
93+
94+
}

‎Frontend-Projects/Analog clock

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

0 commit comments

Comments
 (0)