In this article, you will learn how to make a digital clock with the help of HTML CSS, and JavaScript programming code. In a previous article, I showed you how you can add dates, months, etc. with a digital clock. There are usually two types of watches, digital and analog.
Digital watches are much easier to make than analog clocks. These watches basically have the opportunity to view minutes, hours, and minutes. In this watch, I have made a place to point the AM / PM.
I have added some glowing animations to this meaning that the color of the background will continue to change every few seconds. The numbers in this digital watch will continue to change color to stay with the color of the background. If you want to know how it works then you can definitely watch the demo below.
In the demo below you will understand how this glowing animation and this digital clock work.
See the Pen glowing clock by Foolish Developer (@fghty) on CodePen.
As you can see in the demo above, the background changes to different colors. In this case, there is an opportunity of hours, minutes, and seconds to see the time. I have added the option of AM / PM. I have already made many types of analog and digital watches. You can see those designs if you want.
If you want the source code needed to make this digital watch, you can download the source code using the download button at the bottom of the article. In the tutorial below I have shown you how to make it with full step-by-step pictures.
For this, you need to have an idea about basic JavaScript, HTML, and CSS. I used a small amount of HTML, that is, one line of HTML code.
Step 1: Create the background of the digital clock
First of all, you create an HTML file. Copy the programming structure below and add it to your HTML file. I used a very small amount of JQuery so you must add the JQuery plugin to your HTML file.
In this case, I did not create a separate CSS file because a very small amount of HTML and CSS code has been used.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div class="clock" id="clock"> </div>
<script>
</script>
</body>
</html>
Step 2: Design the background and add the glowing color
I have designed the background of this digital watch using the following CSS programming codes. The box-shadow was originally used for the glowing effect used in the background.
body {
text-align: center;
margin-top: 150px;
background-color: #000;
}
.clock {
background: black;
color: rgb(11, 239, 247);
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 40px #03e9f4,
0 0 60px #03e9f4;
-webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
position: absolute;
padding: 10px 20px;
font-size: 100px;
border-radius: 5px;
left: 11%;
}
Step 3: Create color animations with the help of CSS code
Since we have not used any jQuery yet, no results have been seen so far. As you can see in the demo above, a glowing animation works, that is, the background green color changes from time to time. The following CSS programming code has helped to make this change work.
In this case animation: glow 1s linear infinite has been used which means the background will change every 1 second. If you want the color to change a little bit in the background, then you can use the time of your choice instead of one second.
.clock:nth-child(1){
filter: hue-rotate(270deg);
}
.clock:nth-child(2){
filter: hue-rotate(110deg);
}
.clock{
animation: glow 1s linear infinite;
}
@keyframes glow {
0% {
filter: hue-rotate(10deg);
}
100% {
filter: hue-rotate(360deg);
}
}
Step 4: Execute digital clock using JavaScript code
So far we have only designed this digital watch. The most significant role in this digital clock is played by the Javascript programming code that makes the digital clock work. Basically in this case the time is shown in this watch according to the time of your device.
If you know the basics of JavaScript, you can definitely understand the structure of JavaScript below. Next to each code line, I have shown in the comments what I have used this code for.
function showTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var session = "AM";
if ( h == 0 ) {
h = 12;
}
if( h >= 12 ){
session = "PM";
}
if ( h > 12 ){
h = h - 12;
}
m = ( m < 10 ) ? m = "0" + m : m;
s = ( s < 10 ) ? s = "0" + s : s;
/* time format */
var time = h + ":" + m + ":" + s + " " + session;
$('#clock').html(time);
setTimeout( showTime, 1000 );
}
showTime();
Hopefully from this tutorial, you have learned how to make a digital clock using HTML CSS, and JavaScript programming code. I have already made many other designs and you can notice those designs. Please comment with your opinion.
Download Code
