DIGITAL CLOCK IN JAVASCRIPT.
Following is simple web program
for designing a Digital Clock. This program is responsive. As you minimize or
maximize width of browser or screen you will find change in background-color as
well font-size will be perfect for screen. we have used JavaScript code for creating
working Digital clock. If you like this program please comment here.
PROGRAM SOURCE CODE :-
1) HTML coding :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="digital_clock.css">
<title>Digital Clock</title>
</head>
<body onload="f1()">
<h1></h1>
<script type="text/javascript" src="digital_clock.js"></script>
</body>
</html>
2) CSS coding :-
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
html{
font-size: 62.5%;
/*1rem = 10px;*/
}
body{
width: 100vw;
height: 100vh;
display: grid;
place-items:center;
background-color: blue;
color: #fff;
font-family:sans-serif;
}
h1{
text-align: center;
font-size:16rem;
}
/*<------------------------- Making Responsive -------------------------->*/
@media(max-width: 998px){
html{
font-size: 50%;
}
body{
background-color: #FF8C00 ;
}
}
@media(max-width:750px){
html{
font-size: 40%;
}
body{
background-color: #FF1493 ;
}
}
@media(max-width:600px){
html{
font-size: 30%;
}
body{
background-color: #800080 ;
}
}
2) JavaScript coding :-
function f1(){
var cdate = new Date();
var hour = cdate.getHours();
var minute = cdate.getMinutes();
var second = cdate.getSeconds();
var format = "AM";
if(hour>=12)
{
format = "PM";
}
if(hour>12)
{
hour = hour - 12;
}
hour = hour < 10 ? "0"+hour:hour;
minute = minute < 10 ? "0"+minute:minute;
second = second < 10 ? "0"+second:second;
var time = hour+":"+minute+":"+second+" "+format;
document.getElementsByTagName('h1')[0].innerText = time;
setTimeout(f1,1000);
}
OUTPUT :-
( NOTE : - While executing program you have to replace links of images , audio's or video's in this program by your links. So take care of it ! )
