
Demo:
What do you need to do?
To create the CSS & JavaScript Digital Clock follow the steps below and watch the video tutorial.
- Add HTML
- Add CSS
- Add JavaScript (to set the current time)
Step1
Add HTML
Project your Clock:
<div class="digital-clock">
<div class="clock">
</div>
<div id="DigitalClock" class="time" onload="showTime()"></div>
</div>
Step2.
Add CSS
Import the font:
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap');
Set the colour and the position of the background and elements:
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.digital-clock {
position: relative;
width:350px;
height:350px;
background-color: #83c5be;
overflow: hidden;
border-radius:50%;
z-index:1;
}
Style the Clock:
.clock {
position: absolute;
width: 200px;
height: 80px;
border:10px solid #e5e5e5;
background-color:#14213d;
top:130px;
left:65px;
z-index:2;
}
.clock:before {
content:"";
position: absolute;
width:20px;
height:10px;
background-color: #333;
top:90px;
left:20px;
border-radius:0 0 10px 10px;
box-shadow: 135px 0 #333;
}
.clock:after {
content:"";
position: absolute;
width:150px;
height:10px;
background-color: #fca311;
top:-20px;
left:25px;
border-radius:20px 20px 0 0;
}

Add the shadow:
.digital-clock:before {
content:"";
position: absolute;
width:200px;
height:200px;
background-color: #699e98;
top:130px;
left:185px;
transform: skew(45deg);
}
.digital-clock:after {
content:"";
position: absolute;
background-color: #699e98;
transform: skew(45deg);
width:120px;
height:200px;
top:230px;
left:165.5px;
}

Add the time to the clock (the time will be visible after adding to the code JavaScript):
.time {
position: absolute;
transform: translateX(-50%) translateY(-50%);
font-family: 'ZCOOL QingKe HuangYou', cursive;
font-size:70px;
z-index:3;
color: #d9ed92;
top:177px;
left:174px
}
Step3.
Add JavaScript
Set the current time:
function showTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
var time = h + ":" + m;
document.getElementById("DigitalClock").innerText = time;
document.getElementById("DigitalClock").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
Watch also the video tutorial:
Enjoy coding!
Hey, here’s something that might interest you: