Building an Digital analog clock using HTML CSS and JavaScript is a great way to hone your coding abilities and obtain useful web development experience.
In this blogs, you will learn how to create an analog clock with digital clock features using html css and javascript. In my previous blogs post I shared Analog clock using html css and javascript with amazing features dark and light mood.
The "container" div is the main container of the webpage, and inside it, there are two other divs: "clock" and "time". The "clock" div is used to display the analog clock, and it contains three divs with the class "circle" and Twelve spans with numbers. The "circle" divs are used to create the clock face and the hands of the clock, and the spans are used to display the numbers around the clock face.
The "time" div is used to display the digital clock, and it contains three divs with the id "hours", "minutes", and "seconds" to display the corresponding time components.
Analog clock using HTML CSS and JavaScript
1. Create a folder. Make the mentioned files in this folder and give it any name you choose.Once these files are created, copy and paste the given codes into the relevant files. To obtain the analogue clock, scroll down and click the provided download button if you would prefer not to complete these steps.
Start by opening your index.html file and pasting the codes below into it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analog Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class ="container">
<!--Analog Clock-->
<div class ="clock">
<div class="circle" id="sc" style="--clr:#04fc43;"><i></i></div>
<div class="circle circle2" id="mn" style="--clr:#fee800;"><i></i></div>
<div class="circle circle3" id="hr" style="--clr:#ff2972;"><i></i></div>
<span style = "--i:1;"><b>1</b></span>
<span style = "--i:2;"><b>2</b></span>
<span style = "--i:3;"><b>3</b></span>
<span style = "--i:4;"><b>4</b></span>
<span style = "--i:5;"><b>5</b></span>
<span style = "--i:6;"><b>6</b></span>
<span style = "--i:7;"><b>7</b></span>
<span style = "--i:8;"><b>8</b></span>
<span style = "--i:9;"><b>9</b></span>
<span style = "--i:10;"><b>10</b></span>
<span style = "--i:11;"><b>11</b></span>
<span style = "--i:12;"><b>12</b></span>
</div>
<!--digital clock-->
<div id = "time">
<div id = "hours" style="--clr:#ff2972;">00</div>
<div id = "minutes" style="--clr:#fee800;">00</div>
<div id = "seconds" style="--clr:#04fc43;">00</div>
<div id = "ampm">AM</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Inserting the codes into your style.css file is the next step.
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #2f363e;
}
/*Analog Clock Style */
.container {
position: relative;
background: #2f363e;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.clock {
position: relative;
width: 450px;
height: 450px;
background: #2f363e;
border-radius: 50%;
box-shadow: 10px 50px 70px rgba(0, 0, 0, 0.25),
inset 5px 5px 10px rgba(0, 0, 0, 0.5),
inset 5px 5px 20px rgba(255, 255, 255, 0.2),
inset -5px -5px 15px rgba(0, 0, 0, 0.75);
display: flex;
justify-content: center;
align-items: center;
}
.clock::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: #2f363e;
border: 3px solid #fff;
border-radius: 50%;
z-index: 100000;
}
.clock span {
position: absolute;
inset: 20px;
color: #fff;
text-align: center;
transform: rotate(calc(30deg * var(--i)));
/*360 / 12 = 30deg */
}
.clock span b {
font-size: 2em;
opacity: 0.25;
font-weight: 600;
display: inline-block;
transform: rotate(calc(-30deg * var(--i)));
}
.circle {
position: absolute;
width: 300px;
height: 300px;
border: 2px solid rgba(0, 0, 0, 0.25);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 10;
}
.circle i {
position: absolute;
width: 6px;
height: 50%;
background: var(--clr);
opacity: 0.75;
transform-origin: bottom;
transform: scaleY(0.5);
}
.circle:nth-child(1) i {
width: 2px;
}
.circle:nth-child(2) i {
width: 6px;
}
.circle2 {
width: 240px;
height: 240px;
z-index: 9;
}
.circle3 {
width: 180px;
height: 180px;
z-index: 8;
}
.circle::before {
content: '';
position: absolute;
top: -8.5px;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--clr);
box-shadow: 0 0 10px var(--clr),
0 0 40px var(--clr);
}
/* digital clock style */
#time {
margin-bottom: -80px;
display: flex;
transform: translateY(15px);
padding: 10px 10px;
font-size: 2em;
font-weight: 600;
border: 2px solid rgba(0, 0, 0, 0.5);
border-radius: 40px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
inset 5px 5px 20px rgba(255, 255, 255, 0.2),
inset -5px -5px 15px rgba(0, 0, 0, 0.75);
margin-left: 15px;
}
#time div {
position: relative;
width: 60px;
text-align: center;
font-weight: 500;
color: var(--clr);
}
#time div:nth-child(1)::after,
#time div:nth-child(2)::after {
content: ':';
position: absolute;
right: -4px;
}
#time div:last-child {
font-size: 0.5em;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
#time div:nth-child(2)::after {
animation: animate 1s steps(1) infinite;
}
@keyframes animate {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
}
/* Make Responsive */
@media screen and (max-width: 768px) {
.container {
border-radius: 10px;
}
.clock {
width: 300px;
height: 300px;
}
.clock span {
inset: 15px;
}
.clock span b {
font-size: 1.5em;
}
.circle {
width: 200px;
height: 200px;
}
.circle i {
height: 40%;
}
.circle:nth-child(1) i {
width: 1px;
}
.circle:nth-child(2) i {
width: 3px;
}
.circle2 {
width: 150px;
height: 150px;
}
.circle3 {
width: 100px;
height: 100px;
}
.circle::before {
top: -6.5px;
width: 10px;
height: 10px;
}
}
@media screen and (max-width: 480px) {
.container {
border-radius: 0;
}
.clock {
width: 200px;
height: 200px;
}
.clock span {
inset: 10px;
}
.clock span b {
font-size: 1em;
}
.circle {
width: 120px;
height: 120px;
}
.circle i {
height: 30%;
}
.circle:nth-child(1) i {
width: 1px;
}
.circle:nth-child(2) i {
width: 2px;
}
.circle2 {
width: 80px;
height: 80px;
}
.circle3 {
width: 60px;
height: 60px;
}
.circle::before {
top: -4.5px;
width: 8px;
height: 8px;
}
}
@media screen and (max-width: 768px) {
#time {
font-size: 1.5em;
padding: 5px 5px;
margin-left: 10px;
}
#time div {
width: 50px;
}
#time div:last-child {
font-size: 0.4em;
}
}
@media screen and (max-width: 480px) {
#time {
font-size: 1em;
padding: 2px 2px;
margin-left: 5px;
}
#time div {
width: 40px;
}
#time div:last-child {
font-size: 0.3em;
}
}
Third, update the script.js file with the following codes.
//Analog Clock
let hr = document.querySelector('#hr');
let mn = document.querySelector('#mn');
let sc = document.querySelector('#sc');
setInterval(() =>{
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * 6;
let ss = day.getSeconds() * 6;
hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
//Digital clock
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
let am = h >= 12 ? "PM" : "AM";
//convert 24hr clock to 12hr clock
if(h>12){
h=h-12;
}
//add zero before single digit number
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
hours.innerHTML = h;
minutes.innerHTML = m;
seconds.innerHTML = s;
ampm.innerHTML = am;
});
That's it; your analog clock project has been finished and created successfully. If you're experiencing any problems or your code isn't working, please download the source code files using the provided download button. The project folder and source code files are included in a zip file that you can download for free.