Skip to content

Commit 5d434d8

Browse files
aditya7302aditya7302
committed
added digital clock
1 parent 4e537c5 commit 5d434d8

File tree

5 files changed

+139
-136
lines changed

5 files changed

+139
-136
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)

‎digital_clock/css/styles.css‎ renamed to ‎Clock/aditya7302/css/styles.css‎

Lines changed: 60 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +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;
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;
6161
}

‎Clock/aditya7302/image.png‎

1.67 MB
Loading

‎digital_clock/index.html‎ renamed to ‎Clock/aditya7302/index.html‎

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +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>
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>
4545
</html>

‎digital_clock/index.js‎ renamed to ‎Clock/aditya7302/index.js‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +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-
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+
3333
updateClock();

0 commit comments

Comments
 (0)