An excellent way to hone your coding abilities and obtain useful web development experience is to create an analog clock using HTML CSS and JavaScript.
In this blog post, you will learn how to create an analog clock using HTML CSS and JavaScript. I will also offer instructions on how to incorporate the dark and light mode choices into the functionality of the clock. The chosen theme will remain active even if the page is reloaded or the file is reopened, which is an interesting feature of the dark and light modes.
The user interface of the analog clock we build will be exactly like the one in the supplied image. Additionally, I will make available to you all of the HTML CSS and JavaScript code that I use to create this clock.
To Create an analog clock with hour, minute, and second hands using the programming languages HTML CSS and JavaScript. This involves designing the visual appearance of the analog clock using HTML and CSS, and then using JavaScript to make the hands of the clock move in real-time to display the current time.
Create analog clock using HTML CSS and JavaScript [source code]
Follow these instructions, line by line, to create an analog clock:
1. Make a folder. Name this folder whatever you like, then create the aforementioned files inside of it.2. Make a file called index.html. The file name and extension must both be index.html.
3. Make a file called style.css. Style and its extension must be included in the file style.css
4. Make a file called script.js. The file name and extension must both be script.js
After creating these files, copy and paste the provided codes into the appropriate files. If you would rather not do these, scroll down and click the provided download button to get the analog clock.
First, open your index.html file and paste the following codes into it.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Analog Clock - Dark/Light</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="page-header"> Analog Clock </div>
<div class="clock">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
</div>
<div class="switch-cont">
<button class="switch-btn"> Light </button>
</div>
<script src="./script.js"></script>
</body>
</html>
The next step is to insert the codes into your style.css file.
[data-theme="dark"] {
--main-bg-color: #1e1f26;
--main-text-color: #ccc;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
font-size: 16px;
background-color: #fff;
position: relative;
transition: all ease 0.2s;
}
.page-header {
font-size: 2rem;
color: #888888;
padding: 1em 0;
font-family: monospace;
text-transform: uppercase;
letter-spacing: 4px;
transition: all ease 0.2s;
}
.clock {
min-height: 18em;
min-width: 18em;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
background-image: url("https://drive.google.com/uc?export=view&id=1SqOy9tGuUOX1cp_GcLEN0BqTfYMEV11Z");
background-position: center center;
background-size: cover;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
inset 0 15px 15px rgba(0, 0, 0, 0.3);
transition: all ease 0.2s;
}
.clock:before {
content: "";
height: 0.75rem;
width: 0.75rem;
background-color: #888888;
border: 2px solid #fff;
position: absolute;
border-radius: 50%;
z-index: 1000;
transition: all ease 0.2s;
}
.hour,
.min,
.sec {
position: absolute;
display: flex;
justify-content: center;
border-radius: 50%;
}
.hour {
height: 10em;
width: 10em;
}
.hour:before {
content: "";
position: absolute;
height: 50%;
width: 6px;
background-color: #888888;
border-radius: 6px;
}
.min {
height: 12em;
width: 12em;
}
.min:before {
content: "";
height: 50%;
width: 4px;
background-color: #888888;
border-radius: 4px;
}
.sec {
height: 13em;
width: 13em;
}
.sec:before {
content: "";
height: 60%;
width: 2px;
background-color: #f00;
border-radius: 2px;
}
.switch-cont {
margin: 2em auto;
bottom: 0;
}
.switch-cont .switch-btn {
font-family: monospace;
text-transform: uppercase;
outline: none;
padding: 0.5rem 1rem;
background-color: #fff;
color: #888888;
border: 1px solid #888888;
border-radius: 0.25rem;
cursor: pointer;
transition: all ease 0.3s;
}
Third, add the following codes to the script.js file.
const deg = 6;
const hour = document.querySelector(".hour");
const min = document.querySelector(".min");
const sec = document.querySelector(".sec");
const setClock = () => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hour.style.transform = `rotateZ(${hh + mm / 12}deg)`;
min.style.transform = `rotateZ(${mm}deg)`;
sec.style.transform = `rotateZ(${ss}deg)`;
};
setClock();
setInterval(setClock, 1000);
const switchTheme = (evt) => {
const switchBtn = evt.target;
if (switchBtn.textContent.toLowerCase() === "light") {
switchBtn.textContent = "dark";
document.documentElement.setAttribute("data-theme", "dark");
} else {
switchBtn.textContent = "light";
document.documentElement.setAttribute("data-theme", "light");
}
};
const switchModeBtn = document.querySelector(".switch-btn");
switchModeBtn.addEventListener("click", switchTheme, false);
let currentTheme = "dark";
currentTheme = localStorage.getItem("theme")
localStorage.getItem("theme")
null;
if (currentTheme) {
document.documentElement.setAttribute("data-theme", currentTheme);
switchModeBtn.textContent = currentTheme;
}
That's all; your analog clock project has now been successfully created. Please download the source code files using the provided download button if your code isn't working or if you're having any issues. You'll download a zip file with the project folder and source code files; it's free.