In this article you will learn how to create Simple Digital Clock using HTML, CSS & JavaScript. Earlier I have shared with you many more types of JavaScript clock making tutorials.
If you know basic JavaScript, then you can easily create this JavaScript Digital Clock. Here I have used html code to create the basic structure, CSS to design the digital clock and JavaScript to activate the digital clock.
- Project Preview
- HTML Code
- CSS Code
- JavaScript Code
- FAQ Section
JavaScript Digital Clock
In today’s digital age, creating interactive and dynamic web elements has become a common practice. One such element is a digital clock that displays the current time in a user-friendly format.
I made this Simple Digital Clock using glassmorphism design. In this article, we’ll walk through the process of building a simple digital clock using HTML, CSS, and JavaScript.
See the Pen Untitled by Shantanu Jana (@Shantanu-Jana-the-encoder) on CodePen.
As you can see this is a simple design, here I used Day, Time and AM/PM. Here the time will be collected from your device.
Digital Clock using HTML, CSS & JavaScript
If you are a beginner and want to improve your JavaScript skills, then JavaScript Digital Click is perfect for you. You can use this digital clock in any of your projects.
Here I have given all the codes and explained the codes. Hopefully, you won’t have any problem understanding this project(How to Design Digital Clock using JavaScript).
1. Basic structure of digital clock
Let’s start by creating the basic structure of our digital clock using HTML. We will need a container to display the clock.
<div class="container">
<div class="shape1"></div>
<div class="shape2"></div>
<div class="clock">
<div id="day"></div>
<div class="wrapper">
<div id="time"></div>
<div id="midday"></div>
</div>
</div>
</div>2. Design the digital clock with CSS
Now, let’s add some basic styling to our clock using CSS to make it visually appealing.
/* Reset CSS for all elements and pseudo-elements */
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Set the background color of the body */
body{
background-color: #02070d;
}
/* Style for the container that holds the clock */
.container{
width: 450px; /* Set the width of the container */
position: absolute; /* Position the container absolutely */
transform: translate(-50%,-50%); /* Center the container horizontally and vertically */
left: 50%; /* Move the container 50% from the left */
top: 50%; /* Move the container 50% from the top */
}
/* Apply styles to all elements inside the container */
.container *{
color: #ffffff; /* Set text color to white */
font-family: "Roboto Mono",monospace; /* Specify font family */
}
/* Style for the clock */
.clock{
width: 100%; /* Set the clock width to 100% of its container */
background-color: rgba(255,255,255,0.06); /* Set background color with opacity */
padding: 50px 25px; /* Set padding for the clock */
border: 1.5px solid rgba(255,255,255,0.06); /* Set border with opacity */
box-shadow: 0 25px 30px rgba(0,0,0,0.15); /* Add box shadow */
backdrop-filter: blur(15px); /* Apply backdrop filter with blur */
}
/* Style for the day text */
#day{
position: relative; /* Set the position relative */
font-size: 20px; /* Set font size */
text-transform: uppercase; /* Transform text to uppercase */
color: #c5c5c5; /* Set text color */
text-align: center; /* Align text to the center */
}
/* Center align text in the wrapper */
.wrapper{
text-align: center;
}
/* Style for the time display */
#time{
font-size: 70px; /* Set font size for time display */
display: inline-block; /* Make time display inline block */
}
/* Style for the midday display */
#midday{
display: inline-block; /* Make midday display inline block */
font-size: 30px; /* Set font size for midday display */
}
/* Style for the first shape */
.shape1{
height: 250px; /* Set height of the shape */
width: 250px; /* Set width of the shape */
position: absolute; /* Position the shape absolutely */
background: linear-gradient( /* Apply linear gradient background */
45deg, /* Set gradient angle */
#ff14f3, /* Set start color */
#5b14ff /* Set end color */
);
border-radius: 50%; /* Make the shape circular */
z-index: -1; /* Move the shape to the background */
bottom: 100px; /* Set distance from the bottom */
right: -100px; /* Set distance from the right */
}
/* Style for the second shape */
.shape2{
height: 250px; /* Set height of the shape */
width: 250px; /* Set width of the shape */
position: absolute; /* Position the shape absolutely */
background: linear-gradient( /* Apply linear gradient background */
135deg, /* Set gradient angle */
#14ff4b, /* Set start color */
#14b9ff /* Set end color */
);
border-radius: 50%; /* Make the shape circular */
top: 100px; /* Set distance from the top */
left: -100px; /* Set distance from the left */
z-index: -1; /* Move the shape to the background */
}
3. Activate the digital clock with JavaScript
Finally, let’s add JavaScript to make our clock functional. We’ll use the setInterval() function to update the time every second.
Retrieves the current time and updates the clock every second using the setInterval() function. It formats the time as HH:MM:SS and updates the content of the div element with the id time.
// Get references to HTML elements
var time = document.getElementById("time"); // Get the element with id "time"
var day = document.getElementById("day"); // Get the element with id "day"
var midday = document.getElementById("midday"); // Get the element with id "midday"
// Set up a function to update the clock every second
var clock = setInterval(
function calcTime() { // This function calculates and updates the time
// Get the current date and time
var date_now = new Date();
// Extract hours, minutes, and seconds from the date object
var hr = date_now.getHours(); // Get the current hour (0-23)
var min = date_now.getMinutes(); // Get the current minute (0-59)
var sec = date_now.getSeconds(); // Get the current second (0-59)
// Initialize middayValue to "AM"
var middayValue = "AM";
// Array of days of the week
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
// Update the text content of the "day" element to display the current day
day.textContent = days[date_now.getDay()]; // Get the current day of the week and set it as text content
// Determine whether it's AM or PM
middayValue = (hr >= 12) ? "PM" : "AM";
// Convert 24-hour time to 12-hour time format
if (hr == 0) {
hr = 12; // If it's midnight (0 hours), set it to 12
} else if (hr > 12) {
hr -= 12; // If it's greater than 12 (afternoon), subtract 12 to get the PM format
}
// Add leading zeros if hours, minutes, or seconds are less than 10
hr = (hr < 10) ? "0" + hr : hr; // If hour is less than 10, add a leading zero
min = (min < 10) ? "0" + min : min; // If minute is less than 10, add a leading zero
sec = (sec < 10) ? "0" + sec : sec; // If second is less than 10, add a leading zero
// Update the text content of the "time" element to display the current time
time.textContent = hr + ":" + min + ":" + sec; // Set the text content to the formatted time
// Update the text content of the "midday" element to display whether it's AM or PM
midday.textContent = middayValue; // Set the text content to AM or PM
},
1000 // Repeat the function every 1000 milliseconds (1 second)
);
Hopefully, from this article you have learned how to create a Digital Clock using JavaScript. If you want to create advanced javascript digital clicks, then you can find it on my site.
Comment on how you like this project (How To Create Digital Clock Using HTML CSS & JavaScript).
Below is a simple example of a digital clock created using HTML, CSS, and JavaScript:
HTML Code:
<div class=“clock”> <div id=“time”></div> </div>
CSS Code:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.clock {
font-family: Arial, sans-serif;
font-size: 48px;
color: #333;
text-align: center;
}
JS Code:
function updateTime() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, ‘0’);
const minutes = String(now.getMinutes()).padStart(2, ‘0’);
const seconds = String(now.getSeconds()).padStart(2, ‘0’);
const timeString = `${hours}:${minutes}:${seconds}`;
document.getElementById(‘time’).textContent = timeString;
}
setInterval(updateTime, 1000);
This code sets up a simple digital clock that displays the current time with hours, minutes, and seconds, updating every second. The updateTime function fetches the current time and formats it properly, then updates the content of the div element with the id ‘time’. The setInterval function calls updateTime every second to keep the clock ticking.