Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Clock (Analog Clock + Digital Clock)" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Clock (Analog Clock + Digital Clock)" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Clock (Analog Clock + Digital Clock) [Source Code]
To get the following HTML, CSS & JS code for the Clock (Analog Clock + Digital Clock) project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock (Analog + Digital)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="analog">
<p style="--i: 1"><span>1</span></p>
<p style="--i: 2"><span>2</span></p>
<p style="--i: 3"><span>3</span></p>
<p style="--i: 4"><span>4</span></p>
<p style="--i: 5"><span>5</span></p>
<p style="--i: 6"><span>6</span></p>
<p style="--i: 7"><span>7</span></p>
<p style="--i: 8"><span>8</span></p>
<p style="--i: 9"><span>9</span></p>
<p style="--i: 10"><span>10</span></p>
<p style="--i: 11"><span>11</span></p>
<p style="--i: 12"><span>12</span></p>
<div class="hands">
<span class="hand hour-hand"></span>
<span class="hand minute-hand"></span>
<span class="hand second-hand"></span>
</div>
</div>
<div class="date"></div>
<div class="digital">
<div class="time"></div>
<div class="ampm"></div>
</div>
</div>
<div class="colors">
<div class="color redC"></div>
<div class="color grayC"></div>
<div class="color slateblueC"></div>
<div class="color greenC"></div>
<div class="color blackC"></div>
<div class="color blueC"></div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--color: red;
}
body {
background: var(--color);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 20px;
height: 100vh;
}
.container {
background-color: white;
width: 200px;
height: 250px;
border-radius: 30px;
}
/* Analog Clock */
.analog {
position: relative;
top: -30%;
height: 200px;
width: 200px;
border-radius: 50%;
background: white;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3), -1px -1px 10px rgba(0, 0, 0, 0.3);
}
.analog p {
position: absolute;
inset: 8px;
text-align: center;
transform: rotate(calc(var(--i) * (360deg / 12)));
}
.analog p span {
display: inline-block;
font-size: 18px;
font-weight: 500;
color: var(--color);
transform: rotate(calc(var(--i) * (-360deg / 12)));
}
.hands {
height: 10px;
width: 10px;
}
.hands::before {
content: "";
position: absolute;
height: 12px;
width: 12px;
border-radius: 50%;
z-index: 100;
background: var(--color);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hand {
right: 50%;
height: 6px;
background: var(--color);
position: absolute;
top: 50%;
border-radius: 6px;
transform-origin: 100%;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hand.hour-hand {
width: 20%;
height: 4.2px;
z-index: 1;
}
.hand.minute-hand {
width: 30%;
height: 2.5px;
z-index: 2;
}
.hand.second-hand {
width: 40%;
height: 1.5px;
background: var(--color);
}
/* date */
.date {
font-size: 15px;
text-align: center;
margin-top: -50px;
margin-bottom: 15px;
color: var(--color);
font-weight: 500;
}
/* Digital Clock */
.digital {
margin-top: 10px;
color: white;
background-color: var(--color);
height: 50px;
width: 90%;
margin: auto;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.time {
font-size: 20px;
width: 80%;
}
.ampm {
width: 20%;
margin-left: -30px;
margin-right: -10px;
}
/* Colors */
.colors {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
background-color: white;
padding: 10px;
border-radius: 10px;
}
.color {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid white;
cursor: pointer;
}
.redC {
background-color: red;
}
.grayC {
background-color: gray;
}
.slateblueC {
background-color: slateblue;
}
.greenC {
background-color: green;
}
.blueC {
background-color: blue;
}
.blackC {
background-color: black;
}
JavaScript
// To get time for analog clock
const secondHandEl = document.querySelector('.second-hand');
const minuteHandEl = document.querySelector('.minute-hand');
const hourHandEl = document.querySelector('.hour-hand');
function getTimeForAnalog() {
const date = new Date();
const seconds = date.getSeconds();
const secsToDegrees = 6 * seconds + 90;
const mins = date.getMinutes();
const minsToDegrees = mins*6 + 90;
const hour = date.getHours();
const hourToDegrees = 30 * hour + mins / 2 + 90 ;
secondHandEl.style.transform = `rotate(${secsToDegrees}deg)`;
minuteHandEl.style.transform = `rotate(${minsToDegrees}deg)`;
hourHandEl.style.transform = `rotate(${hourToDegrees}deg)`;
}
setInterval(getTimeForAnalog, 1000);
getTimeForAnalog();
// To get date
const dateEl = document.querySelector(".date");
function getDate(){
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
const days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const date = new Date();
const fullDate = days[date.getDay()] + ", " + date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear();
dateEl.innerHTML = fullDate
}
getDate();
// To get time for digital clock
const timeEl = document.querySelector(".time");
const ampmEl = document.querySelector(".ampm");
function getTimeForDigital() {
const date = new Date();
const seconds = date.getSeconds();
const mins = date.getMinutes();
const hour = date.getHours();
h = hour > 12 ? ("0" + (hour-12)) : ("0" + hour);
m = mins > 9 ? mins : ("0" + mins);
s = seconds > 9 ? seconds : ("0" + seconds);
const AmPm = hour > 11 ? "AM" : "PM";
const fullTime = h + " : " + m + " : " + s ;
timeEl.innerHTML = fullTime;
ampmEl.innerHTML = AmPm;
}
setInterval(getTimeForDigital, 1000);
getTimeForDigital();
// Colors
const colorEl = document.querySelectorAll(".color");
const rootEl = document.querySelector(":root");
colorEl[0].addEventListener("click",()=>{
rootEl.style = "--color : red"
})
colorEl[1].addEventListener("click",()=>{
rootEl.style = "--color : gray"
})
colorEl[2].addEventListener("click",()=>{
rootEl.style = "--color : slateblue"
})
colorEl[3].addEventListener("click",()=>{
rootEl.style = "--color : green"
})
colorEl[4].addEventListener("click",()=>{
rootEl.style = "--color : black"
})
colorEl[5].addEventListener("click",()=>{
rootEl.style = "--color : blue"
})
Generating Download Link...