Welcome to yet another exciting tutorial by Coding Artist. Building projects is one of the best ways to learn javascript. So today let’s build a ‘Digital Clock’. To build this project we need HTML, CSS, Javascript.
Video Tutorial:
Welcome to yet another exciting tutorial by Coding Artist. Building projects is one of the best ways to learn javascript. So today let’s build a ‘Digital Clock’. To build this project we need HTML, CSS, Javascript.
Project Folder Structure:
Let us explore the project folder structure. The project folder consists of 3 files. The HTML file creates the elements required to build the structure and layout of our project. Next, the CSS file styles the elements that we have created with CSS and Finally, Javascript adds functionality to our project.
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document. Here, we create a div with the class ‘clock’ and inside this, we create divs for displaying hours, minutes, and seconds. Apart from this we also use span tags to display ‘:’ between the divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Digital Clock</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;800&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<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 -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
We provide a background color to the body, while the time is displayed on a white background. Each element is aligned correctly and given a bit of a curve to make it look good.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background-image: linear-gradient(135deg, #8052ec, #d161ff);
}
.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.2em;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5em;
color: #150c41;
border-radius: 0.4em;
box-shadow: 0 1em 2em rgba(0, 0, 0, 0.3);
letter-spacing: 0.05em;
}
.clock span {
font-weight: 800;
font-size: 2.5em;
color: #ffffff;
}
Javascript:
Finally, we add functionality using Javascript. Once again copy the code below and paste it into your script file.
We create a ‘clock’ variable in which we call the function ‘time’, this function updates the time every second by getting the current time using the JavaScript Date() object. The hours, minutes, and seconds are then extracted from the date and formatted with leading zeros using the padStart() function. Next, formatted time is then displayed on the webpage as “hour”, “minute”, and “seconds”.
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);
Go ahead and customize the project the way you like. If you have any queries, suggestions or feedback comment them below. Download the source code by clicking on the ‘ Download Code’ button below.
