Skip to content

Commit 2893e34

Browse files
nedirynediry
committed
first commit
0 parents  commit 2893e34

File tree

4 files changed

+212
-0
lines changed

4 files changed

+212
-0
lines changed

‎index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Analog Saat</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<div class="clock">
13+
<div class="number">
14+
<span>1</span>
15+
<span>2</span>
16+
<span>3</span>
17+
<span>4</span>
18+
<span>5</span>
19+
<span>6</span>
20+
<span>7</span>
21+
<span>8</span>
22+
<span>9</span>
23+
<span>10</span>
24+
<span>11</span>
25+
<span>12</span>
26+
</div>
27+
<span>time</span>
28+
<div id="hour"></div>
29+
<div id="minute"></div>
30+
<div id="second"></div>
31+
<div id="center"></div>
32+
</div>
33+
<script src="script.js"></script>
34+
</body>
35+
36+
</html>

‎screenshot.png

232 KB
Loading

‎script.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const clock = () => {
2+
const hourHand = document.getElementById('hour');
3+
const minuteHand = document.getElementById('minute');
4+
const secondHand = document.getElementById('second');
5+
const span = document.querySelector('.clock>span');
6+
7+
const now = new Date();
8+
const hours = now.getHours();
9+
const minutes = now.getMinutes();
10+
const seconds = now.getSeconds();
11+
12+
const timeString = (time) => String(time.toString().length === 1 ? 0 : "") + time;
13+
span.innerHTML = `${timeString(hours)}:${timeString(minutes)}:${timeString(seconds)}`;
14+
const hourDeg = (hours % 12) * 30 + (minutes / 60) * 30;
15+
const minuteDeg = minutes * 6 + (seconds / 60) * 6;
16+
const secondDeg = seconds * 6;
17+
18+
hourHand.style.transform = `rotate(${hourDeg - 180}deg)`;
19+
minuteHand.style.transform = `rotate(${minuteDeg - 180}deg)`;
20+
secondHand.style.transform = `rotate(${secondDeg - 180}deg)`;
21+
}
22+
23+
setInterval(clock, 1000);

‎style.css

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: 100vh;
12+
background-color: #d4d4d4;
13+
background: radial-gradient(red, yellow, green);
14+
}
15+
16+
.clock {
17+
position: absolute;
18+
width: 300px;
19+
height: 300px;
20+
border: 2px solid #000;
21+
border-radius: 50%;
22+
box-shadow: 0 0 8px 2px rgba(95, 95, 95, 0.6),
23+
inset 0 -5px 4px rgba(95, 95, 95, 0.4);
24+
}
25+
26+
.clock>span {
27+
position: absolute;
28+
left: 113px;
29+
top: 185px;
30+
font-weight: bold;
31+
font-size: 20px;
32+
padding: 5px;
33+
width: 86px;
34+
height: 35px;
35+
border-radius: 10px;
36+
color: #fff;
37+
background: rgba(25, 25, 25, 0.55);
38+
box-shadow: 0 0 8px 3px #ddd;
39+
}
40+
41+
#hour,
42+
#minute,
43+
#second {
44+
position: absolute;
45+
transform-origin: center bottom;
46+
}
47+
48+
#hour {
49+
width: 7px;
50+
height: 95px;
51+
background-color: #999;
52+
transform-origin: 2.5px 2.5px;
53+
transform: rotate(180deg);
54+
top: 146.5px;
55+
left: 146.5px;
56+
border-radius: 0 0 3.5px 3.5px;
57+
}
58+
59+
#minute {
60+
width: 6px;
61+
height: 110px;
62+
background-color: #333;
63+
transform-origin: 2.25px 2.25px;
64+
transform: rotate(180deg);
65+
top: 146.5px;
66+
left: 146.5px;
67+
border-radius: 0 0 3px 3px;
68+
}
69+
70+
#second {
71+
width: 5px;
72+
height: 125px;
73+
background-color: #fe2;
74+
transform-origin: 2px 2px;
75+
transform: rotate(180deg);
76+
top: 146.5px;
77+
left: 146.5px;
78+
border-radius: 0 0 2.5px 2.5px;
79+
}
80+
81+
#center {
82+
width: 15px;
83+
height: 15px;
84+
background-color: #4f4;
85+
border-radius: 50%;
86+
position: absolute;
87+
top: 140px;
88+
left: 140px;
89+
}
90+
91+
.number span {
92+
position: absolute;
93+
top: 139px;
94+
left: 139px;
95+
font-size: 20px;
96+
font-weight: bold;
97+
transform-origin: center;
98+
99+
width: 20px;
100+
height: 20px;
101+
display: flex;
102+
flex-direction: column;
103+
justify-content: center;
104+
align-items: center;
105+
}
106+
107+
.number span:nth-child(1) {
108+
transform: rotate(30deg) translateY(-135px) rotate(-30deg)
109+
}
110+
111+
.number span:nth-child(2) {
112+
transform: rotate(60deg) translateY(-135px) rotate(-60deg)
113+
}
114+
115+
.number span:nth-child(3) {
116+
transform: rotate(90deg) translateY(-135px) rotate(-90deg)
117+
}
118+
119+
.number span:nth-child(4) {
120+
transform: rotate(120deg) translateY(-135px) rotate(-120deg)
121+
}
122+
123+
.number span:nth-child(5) {
124+
transform: rotate(150deg) translateY(-135px) rotate(-150deg)
125+
}
126+
127+
.number span:nth-child(6) {
128+
transform: rotate(180deg) translateY(-135px) rotate(-180deg)
129+
}
130+
131+
.number span:nth-child(7) {
132+
transform: rotate(210deg) translateY(-135px) rotate(-210deg)
133+
}
134+
135+
.number span:nth-child(8) {
136+
transform: rotate(240deg) translateY(-135px) rotate(-240deg)
137+
}
138+
139+
.number span:nth-child(9) {
140+
transform: rotate(270deg) translateY(-135px) rotate(-270deg)
141+
}
142+
143+
.number span:nth-child(10) {
144+
transform: rotate(300deg) translateY(-135px) rotate(-300deg)
145+
}
146+
147+
.number span:nth-child(11) {
148+
transform: rotate(330deg) translateY(-135px) rotate(-330deg)
149+
}
150+
151+
.number span:nth-child(12) {
152+
transform: translateY(-135px)
153+
}

0 commit comments

Comments
 (0)