Skip to content

Commit 6bba0d4

Browse files
Add files via upload
0 parents  commit 6bba0d4

File tree

3 files changed

+59
-0
lines changed

3 files changed

+59
-0
lines changed

app.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
setInterval(() =>{ // Updating Time
2+
var date = new Date();
3+
var hour = date.getHours(); // Fetching Hours
4+
var minute = date.getMinutes(); // Fetching Minutes
5+
var second = date.getSeconds(); // Fetching Seconds
6+
7+
// Adding 0 before each number if the time is less than 0
8+
hour = hour < 10 ? "0" + hour : hour;
9+
minute = minute < 10 ? "0" + minute : minute;
10+
second = second < 10 ? "0" + second : second;
11+
12+
document.querySelector(".time").innerHTML = hour + " : " + minute + " : " + second;
13+
}), 1000

index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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="style.css">
8+
<title>Digital Clock</title>
9+
</head>
10+
<body>
11+
<div id="clock">
12+
<p class="time"></p>
13+
</div>
14+
<script src="app.js"></script>
15+
</body>
16+
</html>

style.css

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
2+
3+
body{
4+
background: #121212;
5+
}
6+
7+
#clock{
8+
color: #e2e6e7;
9+
font-family: 'Lato', sans-serif;
10+
text-align: center;
11+
position: absolute;
12+
left: 50%;
13+
top: 50%;
14+
transform: translate(-50%, -50%);
15+
background: #161515;
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
padding: 30px;
20+
height: 120px;
21+
width: 500px;
22+
border-width: 4px;
23+
border-style: solid;
24+
border-radius: 1000px;
25+
}
26+
27+
.time{
28+
letter-spacing: 0.05em;
29+
font-size: 80px;
30+
}

0 commit comments

Comments
 (0)