Skip to content

Commit ec18736

Browse files
sahandghavidelsahandghavidel
committed
add clock project
1 parent 0a1a96e commit ec18736

File tree

3 files changed

+158
-0
lines changed

3 files changed

+158
-0
lines changed

‎projects/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 http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Clock</title>
9+
</head>
10+
<body>
11+
<div class="clock">
12+
<div class="numbers">
13+
<div class="twelve">12</div>
14+
<div class="three">3</div>
15+
<div class="six">6</div>
16+
<div class="nine">9</div>
17+
</div>
18+
<div class="arrows">
19+
<div class="hour"></div>
20+
<div class="minute"></div>
21+
<div class="second"></div>
22+
</div>
23+
<img
24+
src="https://upload.wikimedia.org/wikipedia/en/thumb/9/95/Rolex_logo.svg/1200px-Rolex_logo.svg.png"
25+
alt=""
26+
/>
27+
</div>
28+
<script src="index.js"></script>
29+
</body>
30+
</html>

‎projects/clock/index.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const hour = document.querySelector(".hour");
2+
const minute = document.querySelector(".minute");
3+
const second = document.querySelector(".second");
4+
5+
function setDate() {
6+
const now = new Date();
7+
8+
const getSecond = now.getSeconds();
9+
const getMinute = now.getMinutes();
10+
const getHour = now.getHours();
11+
12+
const secondDegree = (getSecond / 60) * 360;
13+
const minuteDegree = (getMinute / 60) * 360;
14+
const hourDegree = (getHour / 12) * 360;
15+
16+
second.style.transform = `rotate(${secondDegree}deg)`;
17+
minute.style.transform = `rotate(${minuteDegree}deg)`;
18+
hour.style.transform = `rotate(${hourDegree}deg)`;
19+
}
20+
21+
setInterval(setDate, 1000);

‎projects/clock/style.css

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
2+
body {
3+
margin: 0;
4+
padding: 0;
5+
font-family: 'Courier New', Courier, monospace;
6+
height: 100vh;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
background-color: salmon;
11+
}
12+
13+
img {
14+
position: absolute;
15+
top: 60px;
16+
left: 50%;
17+
transform: translateX(-50%);
18+
width: 70px;
19+
z-index: 2;
20+
}
21+
22+
.clock {
23+
width: 350px;
24+
height: 350px;
25+
background-color: lightgray;
26+
border-radius: 100%;
27+
border: 5px solid darkgrey;
28+
box-shadow: 1px 1px 4px rgba(0,0,0,.7);
29+
position: relative;
30+
}
31+
32+
33+
34+
.numbers div {
35+
position: absolute;
36+
font-size: 27px;
37+
font-weight: bold;
38+
color: lightgoldenrodyellow;
39+
text-shadow: 1px 1px 2px rgba(0,0,0,.7);
40+
}
41+
42+
.twelve {
43+
top: 6px;
44+
left: 50%;
45+
transform: translateX(-50%);
46+
}
47+
48+
.three {
49+
right: 6px;
50+
top: 50%;
51+
transform: translateY(-50%);
52+
}
53+
54+
.six {
55+
bottom: 6px;
56+
left: 50%;
57+
transform: translateX(-50%);
58+
}
59+
60+
.nine {
61+
left: 6px;
62+
top: 50%;
63+
transform: translateY(-50%);
64+
}
65+
66+
.arrows {
67+
width: 100%;
68+
height: 100%;
69+
display: flex;
70+
justify-content: center;
71+
align-items: center;
72+
}
73+
74+
.arrows::before {
75+
content: "";
76+
width: 25px;
77+
height: 25px;
78+
background-color: darkgreen;
79+
border-radius: 50%;
80+
box-shadow: 1px 1px 2px rgba(0,0,0,.7);
81+
z-index: 4;
82+
}
83+
84+
.arrows div {
85+
width: 7px;
86+
height: 120px;
87+
background-color: white;
88+
position: absolute;
89+
bottom: 50%;
90+
box-shadow: 1px 1px 2px rgba(0,0,0,.7);
91+
border-radius: 50% 50% 0 0;
92+
transform-origin: bottom center;
93+
z-index: 3;
94+
}
95+
96+
.arrows .hour {
97+
height: 80px;
98+
transform: rotate(30deg);
99+
}
100+
101+
.arrows .second {
102+
background-color: goldenrod;
103+
transform: rotate(250deg);
104+
105+
}
106+
107+

0 commit comments

Comments
 (0)