Skip to content

Commit ed62fa3

Browse files
PBJIPBJI
authored
Merge pull request #698 from aditya7302/master
added Digital Clock
2 parents 9f9680a + 5d434d8 commit ed62fa3

File tree

5 files changed

+142
-0
lines changed

5 files changed

+142
-0
lines changed

‎Clock/aditya7302/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
This project is a digital clock which uses basic html, css and js to display a clock on your web browser.
2+
It is very simple to use and setup to display it you just need to click on the html file and it will start.
3+
![ScreenShot](image.png)

‎Clock/aditya7302/css/styles.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
body{
2+
margin: 0;
3+
font-family: sans-serif;
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
height: 100vh;
8+
justify-content: center;
9+
background: url("https://plus.unsplash.com/premium_photo-1675368244123-082a84cf3072?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1250&q=80");
10+
background-repeat: no-repeat;
11+
background-size: cover;
12+
overflow: hidden;
13+
}
14+
15+
h2{
16+
text-transform: uppercase;
17+
letter-spacing: 4px;
18+
font-size: 14px;
19+
text-align: center;
20+
color: white;
21+
}
22+
23+
.clock{
24+
display: flex;
25+
}
26+
27+
.clock div{
28+
margin: 5px;
29+
position: relative;
30+
}
31+
32+
.clock span{
33+
width: 100px;
34+
height: 80px;
35+
background: slateblue;
36+
opacity: 0.8;
37+
color: white;
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
41+
font-size: 50px;
42+
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
43+
}
44+
45+
.clock .text{
46+
height: 30px;
47+
font-size: 10px;
48+
text-transform: uppercase;
49+
letter-spacing: 2px;
50+
background: darkblue;
51+
opacity: 0.8;
52+
}
53+
54+
.clock #ampm{
55+
position: absolute;
56+
bottom: 0;
57+
width: 60px;
58+
height: 30px;
59+
font-size: 20px;
60+
background: green;
61+
}

‎Clock/aditya7302/image.png‎

1.67 MB
Loading

‎Clock/aditya7302/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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="css/styles.css">
8+
<script defer src="index.js"></script>
9+
<title>Digital Clock</title>
10+
</head>
11+
<body>
12+
<h2>Digital Clock</h2>
13+
<div class="clock">
14+
<div>
15+
<span id="hours">
16+
00
17+
</span>
18+
<span class="text">
19+
Hours
20+
</span>
21+
</div>
22+
<div>
23+
<span id="minutes">
24+
00
25+
</span>
26+
<span class="text">
27+
Minutes
28+
</span>
29+
</div>
30+
<div>
31+
<span id="seconds">
32+
00
33+
</span>
34+
<span class="text">
35+
Seconds
36+
</span>
37+
</div>
38+
<div>
39+
<span id="ampm">
40+
AM
41+
</span>
42+
</div>
43+
</div>
44+
</body>
45+
</html>

‎Clock/aditya7302/index.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
"use strict";
2+
3+
const hourEl = document.getElementById("hours");
4+
const minuteEl = document.getElementById("minutes");
5+
const secondEl = document.getElementById("seconds");
6+
const ampmEl = document.getElementById("ampm");
7+
8+
const updateClock = () => {
9+
let h = new Date().getHours();
10+
let m = new Date().getMinutes();
11+
let s = new Date().getSeconds();
12+
let ampm = "AM";
13+
14+
15+
if(h>12){
16+
h -= 12;
17+
ampm = "PM";
18+
}
19+
20+
h = h<10 ? "0" + h: h;
21+
m = m<10 ? "0" + m: m;
22+
s = s<10 ? "0" + s: s;
23+
24+
hourEl.innerText = h;
25+
minuteEl.innerText = m;
26+
secondEl.innerText = s;
27+
ampmEl.innerText = ampm;
28+
setTimeout(() => {
29+
updateClock();
30+
},1000)
31+
};
32+
33+
updateClock();

0 commit comments

Comments
 (0)