How to make Digital Clock with HTML,CSS
and JavaScript
How to make Digital Clock
Create the webpage structure in HTML using a div tag containing dummy time of time format “HH:MM:SS”.
Style the page with CSS using elements and classes defined in HTML.
In JavaScript define a function showTime and render it every second using JavaScript setInterval() method.
What is meant by digital clock?
a clock that displays the time in numerical digits rather than by hands on a dial.
Video Tutorial of Digital Clock
Digital Clock [Source Codes]
To make Digital Clock follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Digital Clock</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="clock">
- <div id="hour"></div>
- <span>:</span>
- <div id="minute"></div>
- <span>:</span>
- <div id="seconds"></div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- * {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- font-family: Arial, sans-serif;
- }
- body {
- height: 100vh;
- background-color: #282A35;
- }
- .clock {
- width: 31.25em;
- height: 8em;
- position: absolute;
- transform: translate(-50%, -50%);
- top: 50%;
- left: 50%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: 600;
- }
- .clock div {
- position: relative;
- background-color: #ffffff;
- height: 100%;
- width: 3.3em;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 2.7em;
- color: #FFFFFF;
- border-radius: 0.4em;
- box-shadow: 0 1em 2em rgba(0, 0, 0, 0.3);
- letter-spacing: 0.05em;
- }
- #hour{background-color: aqua;}
- #minute{background-color: chartreuse;}
- #seconds{background-color: deeppink;}
- .clock span {
- font-weight: 800;
- font-size: 3em;
- color: #ffffff;
- }
-
Now paste the following codes into your script.js file
- const hour = document.getElementById("hour");
- const minute = document.getElementById("minute");
- const seconds = document.getElementById("seconds");
-
- const clock = setInterval(function time() {
- const dateNow = new Date();
- let hr = dateNow.getHours();
- let min = dateNow.getMinutes();
- let sec = dateNow.getSeconds();
-
- hr = hr.toString().padStart(2, "0");
- min = min.toString().padStart(2, "0");
- sec = sec.toString().padStart(2, "0");
-
- const timeString = `${hr}:${min}:${sec}`;
- hour.textContent = hr;
- minute.textContent = min;
- seconds.textContent = sec;
- }, 1000);
-
If you face any difficulties while creating your Digital Clock or your code is not working as expected, you can download the source code files by clicking on the download button.