Do you want to create a digital clock or showcase a countdown? In this article, we will create an awesome digital clock using HTML, CSS, and JavaScript. Unlike an analog clock, a digital clock displays the time digitally (i.e., in numerals or other symbols).
Digital clocks are preferred over analog clocks because of their precision and accuracy. They provide an aesthetic appeal and extra information for a better user experience.
Table of Contents
Introduction
Clocks are useful elements for any UI if used properly. They can be used on sites where time is the main concern, like some booking sites or apps showing the arrival times of trains, buses, flights, etc.
Let us start creating an awesome and good-looking digital clock using HTML, CSS, and JavaScript so that you can showcase a countdown or real-world time.
Watch the full tutorial on YouTube
Do you prefer watching a tutorial video over reading an article? No worries. Watch a full tutorial on Digital Clock Using HTML, CSS, and JavaScript on my YouTube channel. Later, you can visit again and access the complete source code from here if required. Do subscribe and like the content if you learn something new.
Source code for the Digital Clock Using HTML, CSS, and JavaScript
Creating the HTML Structure
The first step is to create a file named index.html with the default boilerplate code for the digital clock.
Create a div with the class name ‘container’. This div should hold multiple heading tags with the id ‘hour’, ‘minutes’, ‘seconds’ and a paragraph tag with the id ‘ampm’.
Inside the script section, create a function named clock and use DOM manipulation to create variables for hours, minutes, seconds, and ampm. Use the Date function to get the current hour, minute, and second using appropriate methods.
Use the conditional statements to change the am, pm, hours, minutes, and seconds. Finally, use innerHTML to set the appropriate headings.
Copy and paste the following HTML code into the file named index.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">
<link rel="stylesheet" href="style.css">
<title>Digital Clock Using JavaScript - Coding Power</title>
</head>
<body>
<div class="container">
<h2 id="hour">00</h2>
<span>:</span>
<h2 id="minutes">00</h2>
<span>:</span>
<h2 id="seconds">00</h2>
<p id="ampm">AM</p>
</div>
<script>
function clock(){
let hour = document.getElementById("hour");
let minutes = document.getElementById("minutes");
let seconds = document.getElementById("seconds");
let ampm = document.getElementById("ampm");
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
var am = 'AM';
if(h > 12){
h = h - 12;
am = 'PM';
}
if(h < 10){
h = '0'+h;
}
if(m < 10){
m = '0'+m;
}
if(s < 10){
s = '0'+s;
}
hour.innerHTML = h;
minutes.innerHTML = m;
seconds.innerHTML = s;
ampm.innerHTML = am;
}
var interval =setInterval(clock, 1000)
</script>
</body>
</html>Styling with CSS
For styling, create a new file named style.css and add a style link to the HTML head to link to the CSS file. Remember to follow this step; otherwise, the CSS will not work for any HTML class or element, so make sure of that first.
Style the body element to take up the full height of the viewport with a flex display, centered align-items, centered justify-content, a background color of #FBAB7E, and a background image of a linear gradient of (62 deg, #FBAB7E 0%, #F7CE68 100%).
The container div is styled to have a flex display with centered align-items and centered justify-content. The heading and span elements are styled to have a size of 6 rem and a font weight of 500.
The heading element is also styled to have a white background, a border radius of 10 pixels, a box shadow of 0 5px 30px rgba (0, 0, 0, 0.2), and 2 pixels solid border with the color of rgba (255, 255, 255, 0.2).
Finally, the paragraph element is styled to have a relative positioning, with a font size of 2rem, a top of -50 pixels, and a left of 10 pixels.
Refer to the following CSS code and paste it into the file named style.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
.container{
display: flex;
align-items: center;
justify-content: center;
}
.container h2,
.container span{
font-size: 6rem;
font-weight: 500;
}
.container h2{
padding: 15px;
background: white;
border-radius: 10px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.container p{
position: relative;
top: -50px;
left: 10px;
font-size: 2rem;
}That’s all you need to do to create an excellent digital clock using HTML, CSS, and JavaScript. The video tutorial’s complete source code with images can be accessed by clicking the button below.
Conclusion
In this article, we saw how to create a fantastic digital clock using HTML, CSS, and JavaScript. You can incorporate this into your websites to showcase a countdown. I encourage you to build your custom digital clock using HTML.
If you are still stuck somewhere or have any doubts regarding the same, feel free to leave your question in the comment section, and I will be happy to help as soon as possible.
Do Visit: Responsive Contact Us Form Using HTML & CSS
FAQ
How to display clock in HTML using JavaScript?
Create a div with the class name ‘container’. This div should hold multiple heading tags with the id ‘hour’, ‘minutes’, ‘seconds’ and a paragraph tag with the id ‘ampm’.
Inside the script section, create a function named clock and use DOM manipulation to create variables for hours, minutes, seconds, and ampm. Use the Date function to get the current hour, minute, and second using appropriate methods.
How do I display time in 24 hour format in HTML?
To create the time control using HTML, we have <input type=”time”> tag, where time value can be used in the type attribute of <input> tag. By default, time control will display the output in 24 hr format.
How to get local time in HTML?
The <input type=”datetime-local”> defines a date picker. The resulting value includes the year, month, day, and time.