Create Digital Clock, using HTML, CSS and JavaScript

on
 

Preview: We're making a digital clock today.


 This article aims to use this important tool to create a web-based digital clock using other web-based technologies such as HTML, CSS, and JavaScript.

 

Implementation

To begin implementing the clock, we must first create a folder for our HTML, CSS, and JavaScript files, each with its own extension (.html, .css, .js).
You can use any editor you want, but for this tutorial, I recommend vscode.

First step

Make an HTML file and name it index.html.

The HTML file structure is depicted in the code snippet below.


<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<section>
<div class="clock">
<div class="container">
<h2 id="hour">00</h2>
<h2 class="dot">:</h2>
<h2 id="minute">00</h2>
<h2 class="dot">:</h2>
<h2 id="seconds">00</h2>
</div>
</div>
</section>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

 You should be familiar with this structure; the id = hour, minute, seconds and class = clock, container, dot will be used in our JavaScript and CSS files, respectively.


The script and link tags are used to link our JavaScript and CSS files in the HTML file, as shown above.
Though there are other methods in this article for adding JavaScript and CSS to HTML, I chose to use the external file source. 

 

Second step

 To make this code look good, we need to add some style to it.


We must create a CSS file and include these styles.
I refer to my personal style.css.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consoles;
}
section {
position: relative;
width: 100%;
height: 100vh;
background: #19172e;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
top: 10%;
right: 20%;
width: 300px;
height: 300px;
border-radius: 10px;
background: linear-gradient(#f9d924, #ff2c24);
animation: animate 5s ease-in-out infinite;
}
section::after {
content: '';
position: absolute;
bottom: 10%;
left: 20%;
width: 250px;
height: 250px;
border-radius: 10px;
background: linear-gradient(#01d6ff, #0f24f9);
animation: animate 5s ease-in-out infinite;
animation-delay: -2.5s;
}
@keyframes animate {
0%,100% {
transform: translateY(20px);
}
50% {
transform: translateY(-20px);
}
}
.clock {
position: relative;
width: 700px;
height: 250px;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
z-index: 1000;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
}
.clock .container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.clock .container h2 {
font-size: 6em;
color: #fff;
}
.clock .container h2:nth-child(odd) {
padding: 5px 15px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
margin: 0 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.clock .container h2#seconds {
color: #f9d524;
}
#ampm {
position: relative;
top: -50px;
font-size: 2em;
color: #fff;
font-weight: 700;
}
view raw style.css hosted with ❤ by GitHub

 

Third Step

Make a JavaScript file 

 

//declaration of a function
function clock() {
let hour = document.getElementById('hour');
let minute = document.getElementById('minute');
let seconds = document.getElementById('seconds');
let ampm = document.getElementById('ampm');
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
var am = "AM";
// Convert 24 hour time to 12 hour format witm AM PM Indicator
if (h > 12) {
h = h - 12
var am = "PM"
}
hour.innerHTML = h;
minute.innerHTML = m;
seconds.innerHTML = s;
}
setInterval(clock, 1000);
view raw script.js hosted with ❤ by GitHub


Comments

Post a Comment