Hello, guys in this tutorial we will create a digital clock using HTML CSS, and JavaScript.
Common Query
- how to make a digital clock in JavaScript
- how to write digital clock in JavaScript
- code for the digital clock in JavaScript
Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create a digital clock using HTML CSS, and JavaScript.
First, we need to create three files index.html and style.css then we need to do code for it.
Digital clock Step:1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Digital clock using javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300;400&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<div id="digital_clock" class="glow">00:00:00</div>
</div>
<script>
setInterval(showTime, 1000);
function showTime(){
let time = new Date();
let hr = time.getHours();
let min = time.getMinutes();
let sec = time.getSeconds();
AMPM = 'AM';
if(hr > 12) {
hr -= 12;
AMPM = "PM";
}
if(hr == 0) {
hr = 12;
AMPM = "AM";
}
hr = hr < 10 ? "0" + hr : hr;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
let curentTime = hr + ":" + min + ":" + sec + AMPM;
document.getElementById('digital_clock').innerHTML = curentTime;
}
showTime();
</script>
</body>
</html>
Digital clock Step:2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #000;
}
.glow {
font-size: 60px;
color: #fff;
font-weight: bold;
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;
}
@keyframes glow {
0% {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
100% {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #534dff, 0 0 40px #534dff, 0 0 50px #534dff, 0 0 60px #534dff, 0 0 70px #534dff;
}
}