Skip to content

Commit b706b46

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #935 from Abhay3819/main
Add Digital Clock Timer Project
2 parents 1c209fd + db00dd9 commit b706b46

2 files changed

Lines changed: 184 additions & 0 deletions

File tree

‎Projects/Digitial-Clock-Timer/index.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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>Digital-Clock</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div id="time">
12+
<div class="circle" style="--clr:#ff29ed;">
13+
<div class="dots hr_dot"></div>
14+
<svg>
15+
<circle cx="70" cy="70" r="70"></circle>
16+
<circle cx="70" cy="70" r="70"id="hh"></circle>
17+
</svg>
18+
<div id="hours">00</div>
19+
</div>
20+
<div class="circle" style="--clr:#fe7200;">
21+
<div class="dots min_dot"></div>
22+
<svg>
23+
<circle cx="70" cy="70" r="70"></circle>
24+
<circle cx="70" cy="70" r="70"id="mm"></circle>
25+
</svg>
26+
<div id="minutes">00</div>
27+
</div>
28+
<div class="circle" style="--clr:#04fcdb;">
29+
<div class="dots sec_dot"></div>
30+
<svg>
31+
<circle cx="70" cy="70" r="70"></circle>
32+
<circle cx="70" cy="70" r="70"id="ss"></circle>
33+
</svg>
34+
<div id="seconds">00</div>
35+
</div>
36+
<div class="ap">
37+
<div id="ampm">AM</div>
38+
</div>
39+
40+
</div>
41+
<script>
42+
setInterval(() =>{
43+
let hours = document.getElementById('hours');
44+
let minutes = document.getElementById('minutes');
45+
let seconds = document.getElementById('seconds');
46+
let ampm = document.getElementById('ampm');
47+
48+
let hh = document.getElementById('hh');
49+
let mm = document.getElementById('mm');
50+
let ss = document.getElementById('ss');
51+
52+
let hr_dot = document.querySelector('.hr_dot');
53+
let min_dot = document.querySelector('.min_dot');
54+
let sec_dot = document.querySelector('.sec_dot');
55+
56+
57+
let h = new Date().getHours();
58+
let m = new Date().getMinutes();
59+
let s = new Date().getSeconds();
60+
let am = h >= 12 ? "PM" : "AM";
61+
62+
// 24 hours to 12 hours
63+
if (h>12)
64+
{
65+
h=h-12;
66+
}
67+
68+
// add zero before single digit number
69+
h = (h<10) ? "0" + h : h;
70+
m = (m<10) ? "0" + m : m;
71+
s = (s<10) ? "0" + s : s;
72+
73+
hours.innerHTML = h + "<br><span>Hours</span>";
74+
minutes.innerHTML = m + "<br><span>Minutes</span>";
75+
seconds.innerHTML = s + "<br><span>seconds</span>";
76+
ampm.innerHTML = am;
77+
78+
hh.style.strokeDashoffset = 440 - (440 * h) /12;
79+
mm.style.strokeDashoffset = 440 - (440 * m) /60;
80+
ss.style.strokeDashoffset = 440 - (440 * s) /60;
81+
82+
hr_dot.style.transform = 'rotate(${h * 30}deg)';
83+
min_dot.style.transform = 'rotate(${m * 6}deg)';
84+
sec_dot.style.transform = 'rotate(${s * 6}deg)';
85+
86+
})
87+
88+
</script>
89+
</body>
90+
</html>

‎Projects/Digitial-Clock-Timer/style.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
*
2+
{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: 'Poppins', sans-serif;
7+
}
8+
body
9+
{
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
min-height: 100vh;
14+
background: #3e2f39;
15+
}
16+
#time
17+
{
18+
display: flex;
19+
gap: 40px;
20+
color: rgb(255, 255, 255);
21+
}
22+
#time .circle
23+
{
24+
position: relative;
25+
width: 150px;
26+
height: 150px;
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
}
31+
#time .circle svg
32+
{
33+
position: relative;
34+
width: 150px;
35+
height: 150px;
36+
transform: rotate(270deg);
37+
}
38+
#time .circle svg circle
39+
{
40+
width: 100%;
41+
height: 100%;
42+
fill : transparent;
43+
stroke: #191919;
44+
stroke-width: 4;
45+
transform: translate(5px,5px);
46+
}
47+
#time .circle svg circle:nth-child(2)
48+
{
49+
stroke: var(--clr);
50+
stroke-dasharray: 440;
51+
}
52+
#time div
53+
{
54+
position: absolute;
55+
text-align: center;
56+
font-weight: 500;
57+
font-size: 1.5em;
58+
}
59+
#time div span
60+
{
61+
position: absolute;
62+
transform: translateX(-50%) translateY(-8px);
63+
font-size: 0.40em;
64+
font-weight: 300;
65+
letter-spacing: 0.1em;
66+
text-transform: uppercase;
67+
}
68+
69+
#time .ap
70+
{
71+
position: relative;
72+
font-size: 1em;
73+
transform: translateX(-20px);
74+
}
75+
.dots
76+
{
77+
position: absolute;
78+
width: 100%;
79+
height: 100%;
80+
z-index: 10;
81+
display: flex;
82+
justify-content: center;
83+
}
84+
.dots::before
85+
{
86+
content: '';
87+
position: absolute;
88+
top: -3px;
89+
width: 15px;
90+
height: 15px;
91+
background: var(--clr);
92+
border-radius: 50%;
93+
box-shadow: 0 0 20px var(--clr), 0 0 60px var(--clr);
94+
}

0 commit comments

Comments
 (0)