Create a Digital Clock with JavaScript, HTML and CSS

Posted on by

If utilized properly, clocks may be a helpful component of any user interface. Learn to Create a Digital Clock with JavaScript, HTML and CSS. Clocks can be utilized in locations where time management is a top priority, such as booking websites or applications that display rail, bus, and aircraft arrival times. There are generally two sorts of clocks: analog and digital. We\’ll consider creating a digital version.
The internet enabled practically anything. We can now see our code in real time and engage with web content thanks to JavaScript, which has become the dominant web programming language.

Create a Digital Clock with JavaScript, HTML and CSS

This essay aims to use this crucial technology in conjunction with other web-based languages like javascript, HTML and CSS to create a digital clock that functions online.

Brief Introduction of Used Languages

HTML: is a markup language that provides the framework for web content. It is additionally known as the web\’s skeleton. The acronym HTML stands for Hypertext Markup Language.

CSS: The acronym CSS stands for Cascading Style Sheet. It is the tool used to add graphics and colors to the content of our websites. It is a tool for designing, styling, and formatting web pages.

JavaScript: The web\’s scripting language is JavaScript, which is also a run-time compiling lightweight interpreted language. The language is frequently used because it makes web content more interactive.

These web base languages resources will be used in this tutorial to create a digital clock that shows the time, day, month, and year.

Implementation

There are two ways of implemantation of this code. Create one seperate page with .html extenstion and copy paste all code in this page. Second method is the create two files one for css and other for javascript and implement it into html makup page. Let\’s start with creating the first structure of our digital clock using HTML. Then we will create the logic for our clock using Javascript and finally, we will add CSS to make our clock look nice. We will explain here about our digital clock code.

HTML Structure

We will two div elements, one for using it as canvas where the clock will show and set background area and color with css and second for clock to display.

<div class="codePoint">
<div id="digiClock"></div>
</div>

Now we have a structure of our digital clock. We will add some CSS later to make it look nice. Next step to create Javscrpt.

Creating JavaScript Code

JavaScript have a build-in function new Date() which show the time and date. The Date Object is the name of it, always used for this purpose.

let time = new Date();

To get current time and date, use the getHours(), getMinutes(), getSeconds() and getDay() methods of the date object.

let Hours = time.getHours();
let Minutes = time.getMinutes();
let Secondeds = time.getSeconds();
let date = time.getDate();

First select the element with ID clock using the getElementById Method, so that we can use it to display the date and time.

let clock= document.getElementById('Clock');

Now create the function digitalclock(), which after calcute give the time and date to display on web page.

function digitalclock(){

Within the function create a Date object and get the current Hour, minute, Second, Day, Date, Month, and Year.

Download Pay Per Click Platform Script Source Code Free

Here we will create one arrays function to diplay days name in english exept in numbers. You can change these name in any language. To get Month name in english, we used default function of local string. Also option to use arrays, if you need to show diffirent language.

let time = new Date();
let Hours = time.getHours();
let Minutes = time.getMinutes();
let Secondeds = time.getSeconds();
let Month = time.getMonth();
let year = time.getFullYear();
//Show days name exept days number
let weekDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
let today = weekDay[time.getDay()];
let date = time.getDate();
// let monthsName = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
// let months = monthsName [time.getMonth()];
//get month name long or short
let months = time.toLocaleString("default", { month: "long" });

Now we will add \”0\” to format date and time, it will look proper clock.

Add \”0\” in the hours, minutes and seconds if they are less the 10. Also will add code to show time in 12 hours format instead of 24 hours.

//Show AM PM when time more than 12 hours
let AMPM = Hours < 12 ? 'AM' : 'PM';
//Show 12 hours number when time is 0 hour
Hours = Hours % 12 || 12;
//If hours, minutes and seconds are les then 10 add 0
Hours = Hours<10? '0'+Hours : Hours;
Minutes = Minutes<10? '0'+Minutes : Minutes;
Secondeds = Secondeds<10? '0'+Secondeds : Secondeds;

Finally insert the code of interval with the setInterval() method which will update clock every second.

//set time interval to run clock
setInterval(digitalclock, 1000);

CSS For The Digital Clock

Last step to create create your own style depending on your imagination. Here is the style for the clock. Within the given classes you can create much beatifull style just changing in css style.

<style>
.codePoint{max-width:690px; 
		height:300px; 
        background:#111; 
        text-align:center; 
        margin:20px auto;
        display: flex;
     	align-items: center;
     	justify-content: center;
}

#Clock, #digiClock{width:100%; 
		font-family: Orbitron;
    	letter-spacing: 4px;
       animation: glow 1s ease-in-out infinite alternate;
     -moz-animation: glow 1s ease-in-out infinite alternate;
     -webkit-animation: glow 1s ease-in-out infinite alternate;

}
.clk{ font-size:120px; 
		color:#ffffff; 
}
.timedt{font-size:40px; 
		color:#fff
}
.pmam{font-size:100px; 
		color:#ffa
}
.dot{color:#faa
}
.scnds{color:lightblue
}
@media screen and (max-width: 680px) {
 .pmam, .clk {
    font-size: 55px;
  }
  .timedt{font-size:18px;
}
</style>

Digital Clock with JavaScript, HTML and CSS Complete Code

<!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">
      <title>Digital Clock</title>
<style>
.codePoint{max-width:690px; 
		height:300px; 
        background:#111; 
        text-align:center; 
        margin:20px auto;
        display: flex;
     	align-items: center;
     	justify-content: center;
}

#Clock, #digiClock{width:100%; 
		font-family: Orbitron;
    	letter-spacing: 4px;
       animation: glow 1s ease-in-out infinite alternate;
     -moz-animation: glow 1s ease-in-out infinite alternate;
     -webkit-animation: glow 1s ease-in-out infinite alternate;

}
.clk{ font-size:120px; 
		color:#ffffff; 
}
.timedt{font-size:40px; 
		color:#fff
}
.pmam{font-size:100px; 
		color:#ffa
}
.dot{color:#faa
}
.scnds{color:lightblue
}
@media screen and (max-width: 680px) {
 .pmam, .clk {
    font-size: 55px;
  }
  .timedt{font-size:18px;
}
</style>
   </head>
   <body>

<div class="codePoint">
<div id="Clock"></div>
</div>

<script>
function digitalclock(){
//All the decleration for clock
let clock= document.getElementById('Clock');
let time = new Date();
let Hours = time.getHours();
let Minutes = time.getMinutes();
let Secondeds = time.getSeconds();
let Month = time.getMonth();
let year = time.getFullYear();
//Show days name exept days number
let weekDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
let today = weekDay[time.getDay()];
let date = time.getDate();
// let monthsName = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
// let months = monthsName [time.getMonth()];
//get month name long or short
let months = time.toLocaleString("default", { month: "long" });
//Show AM PM when time more than 12 hours
let AMPM = Hours < 12 ? 'AM' : 'PM';
//Show 12 hours number when time is 0 hour
Hours = Hours % 12 || 12;
//If hours, minutes and seconds are les then 10 add 0
Hours = Hours<10? '0'+Hours : Hours;
Minutes = Minutes<10? '0'+Minutes : Minutes;
Secondeds = Secondeds<10? '0'+Secondeds : Secondeds;

//Add Classes for each section to make good looking

clock.innerHTML ="<span class='hrs clk'>" + Hours+ "</span><span class='dot clk'>:</span><span class='mts clk'>" +Minutes+ "</span><span class='dot clk'>:</span><span class='scnds clk'>"+Secondeds+"</span><span class='pmam'> " +AMPM+"</span>" +"<br><span class='timedt clk'>"+today+" "+months +" "+date+", " + year+"</span>"

}
//set time interval to run clock
setInterval(digitalclock, 1000);
</script>
</body>
</html>
Get Digital Clock Script Code

Digital Clock Script Result

  • javascript digital clock with date
  • w3schools digital clock html code
  • digital clock html, css code real time clock java-script
  • digital clock code html5
  • digital clock javascript
  • digital clock 12 hour format
  • html code for digital clock and date

Simple Digital Clock Complete Code

There is one other Simple Digital Clock Complete Code, if date, month and year are not required to show.

<!DOCTYPE html>
<html>
<head>
<title>Simle Clock</title>
<style>
.codePoint{max-width:320px;
	height:80px; 
    background:#111; 
    text-align:center; 
    margin:20px auto;
}
#digiClock{width:100%; 
	padding-top:6px;
    font-family: Orbitron;
    letter-spacing: 4px;
}
.clk{ font-size:43px; 
	color:#ffffff; 
}
.pmam{font-size:37px; 
	color:#ffa
}
.dot{font-size:50px; 
	color:#faa
}
.scnds{color:lightblue
}
</style>
</head>
<body>

<div class="codePoint">
<div id="digiClock"></div>
</div>

<script>
function digitalclock(){
let clock= document.getElementById('digiClock');
let time = new Date();

let H = time.getHours();
let M = time.getMinutes();
let S = time.getSeconds();
let AMPM = 'AM';

if(H>12){H= H-12; AMPM = 'PM'};
if(H==0){H= 12; };
H = H<10? '0'+H : H;
M = M<10? '0'+M : M;
S = S<10? '0'+S : S;
//For simple time show
//clock.innerText = H+ ':'+M+':'+S+' '+AMPM

//Add Classes for each section to make good looking
clock.innerHTML ="<span class='hrs clk'>" + H+ "</span><span class='dot clk'>:</span><span class='mts clk'>" +M+ "</span><span class='dot clk'>:</span><span class='scnds clk'>"+S+"</span><span class='pmam'> " +AMPM+"</span>";
}
setInterval(digitalclock, 1000);
</script>
</body>
</html>

Simple Digital Clock Result

Download Digital Clock Script Code

Conclusion

The JavaScript digital clock is a great way to start your javascript learing journey as a beginner. It is easy to use and it is very simple to make. You can use it to display the time and with or without date on your website or applicantion.

In this digital clock tutorial we discussed the complete code step by step. If still have any confusion, mention in comments box.

Download Digital Clock Source Code

Leave a Reply

Your email address will not be published. Required fields are marked *