Below is an example of how you can create both analog and digital clocks using HTML, CSS, and JavaScript . This code creates a simple web page with both analog and digital clocks. The analog and digital clock displays the current time. JavaScript is used to update both clocks every second.
Copy the below HTML code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analog and Digital clock| Code Zoone</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="clock">
<div class="circle" style="--color: #04fc43;" id="sc"><i></i></div>
<div class="circle circle-1" style="--color: #ffea00;" id="mn"><i></i></div>
<div class="circle circle-2" style="--color: #ff0000;" id="hr"><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="hour" style="--color: #fc0404;">00</div>
<div id="minutes"style="--color: #ffea00;">00</div>
<div id="seconds" style="--color: #34ff19;">00</div>
<div id="ampm" >AM</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Copy the below CSS code
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,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;
}
.container {
position: relative;
background: #2f363e;
/* min-height: 500px; */
border-radius: 20px;
border-top-left-radius: 225px;
border-top-right-radius: 225px;
box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.25),
10px 10px 70px rgba(0, 0, 0, 0.25),
inset 5px 5px 10px rgba(0, 0, 0, 0.25),
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;
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 #ffff;
border-radius: 50%;
z-index: 10000;
}
.clock span {
position: absolute;
inset: 20px;
color: #ffff;
text-align: center;
transform: rotate(calc(30deg * var(--i)));
}
.clock span b {
font-size: 2em;
opacity: 0.5;
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(--color);
opacity: 0.75;
transform-origin: bottom;
transform: scaleY(0.5);
}
.circle:nth-child(1) i {
width: 2px;
}
.circle:nth-child(2) i {
width: 5px;
}
.circle-1 {
width: 240px;
height: 240px;
z-index: 9;
}
.circle-2 {
width: 180px;
height: 180px;
z-index: 8;
}
.circle::before {
content: '';
position: absolute;
top: -8.5px;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--color);
box-shadow: 0 0 20px var(--color), 0 0 60px var(--color);
}
/* Digital clock style */
#time {
margin-top: 20px;
margin-bottom: 50px;
display: flex;
padding: 10px 20px;
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);
}
#time div {
position: relative;
width: 60px;
text-align: center;
font-weight: 500;
color: var(--color);
}
#time div:nth-child(1)::after,
#time div:nth-child(2)::after {
content: ' : ';
position: absolute;
right: -4px;
}
#time div:last-child {
font-size: 0.6em;
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;
}
}
Copy the below JAVASCRIPT code
JAVASCRIPT
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 hours = document.getElementById ('hour');
let minutes = document.getElementById ('minutes');
let seconds = document.getElementById ('seconds');
let ampm =document.getElementById('ampm');
let h = new Date ( ) .getHours ( );
let m = new Date ( ) .getMinutes( );
let s = new Date ( ) .getSeconds( );
let am= h >= 12 ? "PM" : "AM" ;
//CONVERT 24 HOURS CLOCK TO 12 HOURS COLOCK//
if ( h > 12) {
h = h - 12 ;
}
// add zero single digital 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;
})
