Skip to content

Commit ecec4bb

Browse files
tajulafreentajulafreen
authored
Merge pull request #25 from tajulafreen/Analog_Watch
50Projects-HTML-CSS-JavaScript : Analog watch
2 parents 99edda8 + 98b72a0 commit ecec4bb

File tree

5 files changed

+149
-0
lines changed

5 files changed

+149
-0
lines changed

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,17 @@ In order to run this project you need:
254254
</details>
255255
</li>
256256

257+
<li>
258+
<details>
259+
<summary>Analog Watch</summary>
260+
<p>Analog Watch is a visually appealing and functional timekeeping tool built using HTML, CSS, and JavaScript. This project features a classic analog clock design with distinct hour, minute, and second hands. The clock displays the current time with real-time updates, and its stylish design includes subtle shadowing and color adjustments to enhance its aesthetic appeal. The clock’s hands are dynamically styled with CSS for a modern and engaging look.</p>
261+
<ul>
262+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/AnalogWatch/">Live Demo</a></li>
263+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/AnalogWatch/Calculator">Source</a></li>
264+
</ul>
265+
</details>
266+
</li>
267+
257268
</ol>
258269

259270
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/AnalogWatch/assets/clock.png

5.88 KB
Loading

‎Source-Code/AnalogWatch/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Analog Watch</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="clock">
11+
<div class="hour" id="hour">
12+
<div class="hr" id="hr"></div>
13+
</div>
14+
<div class="hand minute" id="minute">
15+
<div class="mn" id="mn"></div>
16+
</div>
17+
<div class="hand second" id="second">
18+
<div class="sc" id="sc"></div>
19+
</div>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

‎Source-Code/AnalogWatch/script.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const hr = document.querySelector('#hr');
3+
const mn = document.querySelector('#mn');
4+
const sc = document.querySelector('#sc');
5+
6+
const deg = 6;
7+
8+
setInterval(() => {
9+
const day = new Date();
10+
const h = day.getHours() * 30;
11+
const m = day.getMinutes() * deg;
12+
const s = day.getSeconds() * deg;
13+
14+
hr.style.transform = `rotate(${h + m / 12}deg)`;
15+
mn.style.transform = `rotate(${m}deg)`;
16+
sc.style.transform = `rotate(${s}deg)`;
17+
});
18+
});

‎Source-Code/AnalogWatch/style.css

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

0 commit comments

Comments
 (0)