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; } }