Today’s about creating something really cool—an Analog Clock using HTML, CSS, and JavaScript. But here’s the twist: we’ll make it even cooler by adding options for dark and light modes. That way, you can pick the style you like, and it sticks, even when you refresh the page.
We’re going to build a clock that looks just like the picture I’ll show you. And guess what? I’ll share all the code—HTML, CSS, and JavaScript—so you can create your own clock. It’s going to be fun and a great way to learn web development.
By the end of this tutorial, you’ll have your very own analog clock with different style options. So get ready to jump in, have some coding fun, and add a super cool clock to your webpage!
HTML :
This Below HTML code creates a webpage with an analog clock and a light/dark theme switch button. The clock hands are styled using div elements, and the theme switch is handled by an external script (script.js). The page includes a title, a clock, and a button to switch between light and dark themes.
<!DOCTYPE html> <!-- codingstella.com --> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Analog Clock - Dark/Light</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <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> <!-- partial --> <script src="./script.js"></script> </body> </html>
CSS :
This Below CSS code defines styles for a clock with a dark/light theme switch. It utilizes variables for background and text colors, along with transitions for smooth effects. The clock design features a circular shape, hour/minute/second hands, and a background image. The theme switch button is styled for a monospace font and uppercase text.
:root {
--main-bg-color: #fff;
--main-text-color: #888888;
}
[data-theme="dark"] {
--main-bg-color: #1e1f26;
--main-text-color: #ccc;
}
* {
box-sizing: border-box;
/*transition: all ease 0.2s; */
}
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
font-size: 16px;
background-color: var(--main-bg-color);
position: relative;
transition: all ease 0.2s;
}
.page-header {
font-size: 2rem;
color: var(--main-text-color);
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: var(--main-bg-color);
background-image: url("http://codingstella.com/wp-content/uploads/2024/01/download-3.png");
background-position: center center;
background-size: cover;
border-radius: 50%;
border: 4px solid var(--main-bg-color);
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: var(--main-text-color);
border: 2px solid var(--main-bg-color);
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: var(--main-text-color);
border-radius: 6px;
}
.min {
height: 12em;
width: 12em;
}
.min:before {
content: "";
height: 50%;
width: 4px;
background-color: var(--main-text-color);
border-radius: 4px;
}
.sec {
height: 13em;
width: 13em;
}
.sec:before {
content: "";
height: 60%;
width: 2px;
background-color: #f00;
border-radius: 2px;
}
/* Style for theme switch btn */
.switch-cont {
margin: 2em auto;
/* position: absolute; */
bottom: 0;
}
.switch-cont .switch-btn {
font-family: monospace;
text-transform: uppercase;
outline: none;
padding: 0.5rem 1rem;
background-color: var(--main-bg-color);
color: var(--main-text-color);
border: 1px solid var(--main-text-color);
border-radius: 0.25rem;
cursor: pointer;
transition: all ease 0.3s;
}
JavaScript :
// Just noticed accessing localStorage is banned from codepen, so disabling saving theme to localStorage
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)`;
};
// first time
setClock();
// Update every 1000 ms
setInterval(setClock, 1000);
const switchTheme = (evt) => {
const switchBtn = evt.target;
if (switchBtn.textContent.toLowerCase() === "light") {
switchBtn.textContent = "dark";
// localStorage.setItem("theme", "dark");
document.documentElement.setAttribute("data-theme", "dark");
} else {
switchBtn.textContent = "light";
// localStorage.setItem("theme", "light"); //add this
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;
}
We did it! Our Analog Clock is up and ticking, made with HTML, CSS, and JavaScript. It’s a simple, engaging addition to your web projects. Whether you’re a coding pro or just starting out, you’ve explored the basics of interactive design.
If you face any challenges while working on your project, don’t be discouraged. The source code is here for you. Hit the Download button to start your coding adventure. Happy coding!
