In this tutorials we are going to learning how to create a simple digital clock using HTML5, CSS3 and JavaScript.
Requirement
For this project we can use any text editor like Notepad++, SublimeText, gEdit, TextMate, Coda, Brackets etc.
Files
For this project we will need three files namely
- index.html
- style.css
- script.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Big+Shoulders+Display&display=swap" rel="stylesheet">
</head>
<body>
<h2>Digital Clock</h2>
<div class="clock">
<div class="times">
<div class="time">
<span id="hour">00</span>
</div>
<div class="title">
<span>Hours</span>
</div>
</div>
<div class="times">
<div class="time">
<span id="minute">00</span>
</div>
<div class="title">
<span>Minutes</span>
</div>
</div>
<div class="times">
<div class="time">
<span id="second">00</span>
</div>
<div class="title">
<span>Seconds</span>
</div>
</div>
</div>
</body>
</html>
style.css
*{
font-family: 'Big Shoulders Display', cursive;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
background: #c2c2c2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
}
h2{
font-size: 4em;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 30px;
}
.clock{
max-width: 800px;
width: 100%;
height: 100%;
display: flex;
justify-content: space-evenly;
}
.clock .times{
width: 200px;
height: 250px;
position: relative;
}
.clock .times::before{
content: "";
position: absolute;
transform-origin: bottom;
}
.clock .times::after{
content: "";
position: absolute;
transform-origin: left;
}
.clock .times .time{
width: 100%;
height: 180px;
text-align: center;
background: #003f83;
line-height: 180px;
font-size: 5em;
letter-spacing: 3px;
}
.clock .times .title{
width: 100%;
height: 70px;
text-align: center;
line-height: 70px;
background:#0051a9;
font-size: 2em;
letter-spacing: 2px;
}
.clock .times .title::before{
content: "";
position: absolute;
width: 100%;
height: 250px;
bottom: 0;
left: 0;
z-index: -1;
filter: blur(5px);
}
script.js
<script>
const hours = document.querySelector('#hour');
const minutes = document.querySelector('#minute');
const seconds = document.querySelector('#second');
function clock(){
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
hours.textContent = h;
minutes.textContent = m;
seconds.textContent = s;
}
// clock();
let interval = setInterval(clock, 1000);
<script>
