Hello everyone! Today, let’s have some coding fun by creating an Analog Clock with Dark and White modes using HTML, CSS, and JavaScript. It’s a cool project that adds a touch of style to your webpage.
We’ll use HTML for the structure, CSS for styling, and JavaScript to make the clock work. It’s all about simplicity – no need for anything complicated. Just some straightforward coding to bring a stylish Analog Clock to your webpage, with the option to switch between Dark and White modes.
Join me in this coding adventure into the world of Analog Clocks. Let’s use HTML, CSS, and JavaScript to create something neat and interactive. Ready to jazz up your webpage with a classic Analog Clock? Let’s get started – the simple and enjoyable way!
HTML :
The given HTML code represents an analog clock with a dark/white theme. It consists of a clock container with labels for each hour and three hands (hour, minute, and second) represented by spans. The clock is displayed within a container, and there is a mode switch button to toggle between dark and white mode. The functionality of the clock is implemented using JavaScript.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Analog Clock with Dark/White Theme</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="clock">
<label style="--i: 1"><span>1</span></label>
<label style="--i: 2"><span>2</span></label>
<label style="--i: 3"><span>3</span></label>
<label style="--i: 4"><span>4</span></label>
<label style="--i: 5"><span>5</span></label>
<label style="--i: 6"><span>6</span></label>
<label style="--i: 7"><span>7</span></label>
<label style="--i: 8"><span>8</span></label>
<label style="--i: 9"><span>9</span></label>
<label style="--i: 10"><span>10</span></label>
<label style="--i: 11"><span>11</span></label>
<label style="--i: 12"><span>12</span></label>
<div class="indicator">
<span class="hand hour"></span>
<span class="hand minute"></span>
<span class="hand second"></span>
</div>
</div>
<div class="mode-switch">Dark Mode</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
CSS :
The given CSS code styles an analog clock with a dark/white theme. It sets the font family to “Poppins” from Google Fonts and defines variables for primary color, white color, black color, and red color. The body is flexibly centered with a background color based on the theme. The clock container is styled with a circular shape, a white background, and a box shadow. Labels and spans are used to display the hour numbers. The indicator and hands are positioned and styled accordingly. The mode switch button has a rounded shape and changes appearance when clicked.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--primary-color: #f6f7fb;
--white-color: #fff;
--black-color: #18191a;
--red-color: #e74c3c;
}
body {
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background: var(--primary-color);
}
body.dark {
--primary-color: #242526;
--white-color: #18191a;
--black-color: #fff;
--red-color: #e74c3c;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
}
.container .clock {
display: flex;
height: 400px;
width: 400px;
border-radius: 50%;
align-items: center;
justify-content: center;
background: var(--white-color);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1), 0 25px 45px rgba(0, 0, 0, 0.1);
position: relative;
}
.clock label {
position: absolute;
inset: 20px;
text-align: center;
transform: rotate(calc(var(--i) * (360deg / 12)));
}
.clock label span {
display: inline-block;
font-size: 30px;
font-weight: 600;
color: var(--black-color);
transform: rotate(calc(var(--i) * (-360deg / 12)));
}
.container .indicator {
position: absolute;
height: 10px;
width: 10px;
display: flex;
justify-content: center;
}
.indicator::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: 100;
background: var(--black-color);
border: 4px solid var(--red-color);
}
.indicator .hand {
position: absolute;
height: 130px;
width: 4px;
bottom: 0;
border-radius: 25px;
transform-origin: bottom;
background: var(--red-color);
}
.hand.minute {
height: 120px;
width: 5px;
background: var(--black-color);
}
.hand.hour {
height: 100px;
width: 8px;
background: var(--black-color);
}
.mode-switch {
padding: 10px 20px;
border-radius: 8px;
font-size: 22px;
font-weight: 400;
display: inline-block;
color: var(--white-color);
background: var(--black-color);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.mode-switch:active {
transform: scale (0.98);
}
JavaScript:
The provided code is a JavaScript code snippet that creates an analog clock with a dark/white theme. It includes functionality to switch between dark and light modes and updates the clock hands to reflect the current time.
The code starts by getting references to various DOM elements such as the body, hour hand, minute hand, second hand, and mode switch button. It checks if the mode is already set to “Dark Mode” in the localStorage and applies the appropriate class and text to the mode switch button.
An event listener is added to the mode switch button, which toggles the “dark” class on the body element when clicked. It updates the text of the mode switch button and stores the current mode in the localStorage.
The updateTime function is defined to calculate the degrees for the clock hands based on the current time. It uses the Date object to get the current time and converts the seconds, minutes, and hours into degrees. The clock hands are then rotated using the transform CSS property.
The setInterval function is used to call the updateTime function every second, ensuring that the clock hands are continuously updated. Additionally, the updateTime function is called once on page load to set the initial position of the clock hands.
Overall, this code creates an analog clock with a dark/white theme and provides functionality to switch between modes and update the clock hands in real-time.
// Get references to DOM elements
const body = document.querySelector("body"),
hourHand = document.querySelector(".hour"),
minuteHand = document.querySelector(".minute"),
secondHand = document.querySelector(".second"),
modeSwitch = document.querySelector(".mode-switch");
// check if the mode is already set to "Dark Mode" in localStorage
if (localStorage.getItem("mode") === "Dark Mode") {
// add "dark" class to body and set modeSwitch text to "Light Mode"
body.classList.add("dark");
modeSwitch.textContent = "Light Mode";
}
// add a click event listener to modeSwitch
modeSwitch.addEventListener("click", () => {
// toggle the "dark" class on the body element
body.classList.toggle("dark");
// check if the "dark" class is currently present on the body element
const isDarkMode = body.classList.contains("dark");
// set modeSwitch text based on "dark" class presence
modeSwitch.textContent = isDarkMode ? "Light Mode" : "Dark Mode";
// set localStorage "mode" item based on "dark" class presence
localStorage.setItem("mode", isDarkMode ? "Dark Mode" : "Light Mode");
});
const updateTime = () => {
// Get current time and calculate degrees for clock hands
let date = new Date(),
secToDeg = (date.getSeconds() / 60) * 360,
minToDeg = (date.getMinutes() / 60) * 360,
hrToDeg = (date.getHours() / 12) * 360;
// Rotate the clock hands to the appropriate degree based on the current time
secondHand.style.transform = `rotate(${secToDeg}deg)`;
minuteHand.style.transform = `rotate(${minToDeg}deg)`;
hourHand.style.transform = `rotate(${hrToDeg}deg)`;
};
// call updateTime to set clock hands every second
setInterval(updateTime, 1000);
//call updateTime function on page load
updateTime();
In conclusion, creating an Analog Clock with Dark and White modes using HTML, CSS, and JavaScript is a straightforward and enjoyable coding project. Whether you’re a coding pro or a beginner, this tutorial offers a fun way to enhance your skills and add a stylish touch to your webpage.
Facing any problems in your project journey? Stay confident! Click Download, obtain the source code, and tackle your coding issues with determination. May your coding experience be smooth and rewarding!
