Skip to content

Commit c740fd0

Browse files
saurabsalhotrasaurabsalhotra
committed
done project
0 parents  commit c740fd0

6 files changed

Lines changed: 141 additions & 0 deletions

File tree

‎.DS_Store‎

6 KB
Binary file not shown.

‎app.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
let hr = document.querySelector('#hr');
2+
let mn = document.querySelector('#mn');
3+
let sc = document.querySelector('#sc');
4+
5+
setInterval(()=>{
6+
let date = new Date();
7+
let hh = date.getHours() * 30;
8+
let mm = date.getMinutes() * 6;
9+
let ss = (date.getSeconds() + date.getMilliseconds()/1000) * 6;
10+
11+
hr.style.transform = `rotateZ(${hh + (mm/12)}deg)`;
12+
mn.style.transform = `rotateZ(${mm}deg)`;
13+
sc.style.transform = `rotateZ(${ss}deg)`;
14+
},100);

‎clock.png‎

5.88 KB
Loading

‎index.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
display:flex;
10+
align-items: center;
11+
justify-content: center;
12+
min-height:100vh;
13+
background: #f3f3f3
14+
}
15+
16+
.clock {
17+
width:350px;
18+
height:350px;
19+
display:flex;
20+
justify-content:center;
21+
align-items:center;
22+
background:url(clock.png);
23+
background-size: contain;
24+
border: 4px solid #f1f1f1;
25+
border-radius:50%;
26+
box-shadow:0 -15px 15px rgba(255, 255,255,0.05),
27+
inset 0 -15px 15px rgba(255, 255,255,0.05),
28+
0 15px 15px rgba(0,0,0,0.1),
29+
inset 0 15px 15px rgba(0,0,0,0.1);
30+
}
31+
32+
.clock::before {
33+
content:'';
34+
width:15px;
35+
height:15px;
36+
border-radius:50%;
37+
background-color: #fff;
38+
position:absolute;
39+
z-index:10000;
40+
}
41+
42+
.clock .hour,
43+
.clock .min,
44+
.clock .sec {
45+
position: absolute;
46+
}
47+
48+
.clock .hour, .hr {
49+
width: 160px;
50+
height: 160px;
51+
}
52+
53+
.clock .min, .mn {
54+
width:190px;
55+
height:190px;
56+
}
57+
58+
.clock .sec, .sc {
59+
width:230px;
60+
height:230px;
61+
}
62+
63+
.hr, .mn, .sc {
64+
display:flex;
65+
justify-content: center;
66+
border-radius: 50%;
67+
position:absolute;
68+
}
69+
70+
.hr::before {
71+
content:'';
72+
position:absolute;
73+
height:80px;
74+
width:8px;
75+
background-color: black;
76+
z-index:10;
77+
border-radius:6px 6px 0 0;
78+
}
79+
80+
.mn::before{
81+
content:'';
82+
position:absolute;
83+
height:calc(190px / 2);
84+
width:5px;
85+
background-color: black;
86+
z-index:11;
87+
border-radius:6px 6px 0 0;
88+
}
89+
90+
.sc::before{
91+
content:'';
92+
position:absolute;
93+
height:150px;
94+
width:2px;
95+
z-index:12;
96+
background-color: red;
97+
border-radius:6px 6px 0 0;
98+
}

‎index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
9+
<link rel="stylesheet" href="index.css">
10+
<title>Document</title>
11+
</head>
12+
13+
<body>
14+
<div class="clock">
15+
<div class="hour">
16+
<div class="hr" id="hr"></div>
17+
</div>
18+
<div class="min">
19+
<div class="mn" id="mn"></div>
20+
</div>
21+
<div class="sec">
22+
<div class="sc" id="sc"></div>
23+
</div>
24+
</div>
25+
26+
<script src="app.js"></script>
27+
</body>
28+
29+
</html>

‎smiling-face-with-sunglasses-apple.png‎

8.05 KB
Loading

0 commit comments

Comments
 (0)