There are 2 types of clock
- Analog Clock
- Digital Clock
We will create a Digital clock (as it is easy to make) with vanilla CSS and JavaScript. Create Digital Clock is a beginner’s must-do project.
Approach: The approach is to use the date object, which will call the function every second to refresh the browser screen
Let’ see the HTML template code for it.
1. HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock | @code.architects</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<script src="./script.js"></script>
</body>
</html>Now adding the Google fonts links in the head section after <title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">Appending the body content to the HTML file
<div class="container">
<div class="time">
<span id="hour">00</span>
<span class="blink-colon">:</span>
<span id="minute">00</span>
<span class="blink-colon">:</span>
<span id="second">00</span>
</div>
<div class="date-container">
<span id="date">01/01/2014</span>,
<span id="day">Sunday</span>
</div>
</div>2. CSS Code
Using CSS, we will be styling the HTML Code to make look cool. There are many CSS frameworks available in the market, but we would be using none xD. We will be using Flex property to align the content perfectly center to the screen. The CSS template code is like
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inconsolata', monospace;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #2c2f3b;
}Main Styling of HTML Code with Keyframes animation
.container {
border: 10px solid rgb(0, 240, 240);
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
font-size: 32px;
border-radius: 50%
background: rgb(36, 37, 51);
box-shadow:0 0 12px rgba(0,240,240,0.3), 0 0 12px rgba(0,0,0,0.4) inset;
}
.blink-colon {
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
30% {
opacity: 0.4;
}
}
.date-container {
margin-top: 6px;
font-size: 16px;
color: rgba(255,255,255,0.8)
}3. JavaScript Code
Using the date() method to get the real time client time & date. The function updateTime() will be called every second from the setInterval() method
window.onload = function () {
setInterval(updateTime, 1000);
};Now the updateTime() function to complete the work. We need the call the new Date() every time the function gets called so, the time gets updated. Store the new Date() in a variable, let’s say d. So, d.getHours() will return the client hours in 24 hours format. d.getMinutes() returns minutes & so on. d.getDay() returns the current day number. 0 for Sunday, 1 for Monday till 6 for Saturday. We are using a switch case to convert them.
function updateTime() {
//Clock Time
const hourEL = document.querySelector("#hour");
const minuteEL = document.querySelector("#minute");
const secondEL = document.querySelector("#second");
let d = new Date();
let hours = d.getHours();
let minutes = d.getMinutes();
let seconds = d.getSeconds();
<em>if</em> (hours >= 0 && hours <= 9) hours = "0" + hours;
<em>if</em> (minutes >= 0 && minutes <= 9) minutes = "0" + minutes;
<em>if</em> (seconds >= 0 && seconds <= 9) seconds = "0" + seconds;
hourEL.innerHTML = hours;
minuteEL.innerHTML = minutes;
secondEL.innerHTML = seconds;
// Clock Date
const dateEl = document.querySelector("#date");
let date = d.getDate();
<em>if</em> (date >= 0 && date <= 9) date = "0" + date;
let month = d.getMonth();
<em>if</em> (month >= 0 && month <= 9) month = "0" + month;
let year = d.getFullYear();
<em>if</em> (year >= 0 && year <= 9) year = "0" + year;
dateEl.innerHTML = `${date}/${month}/${year}`;
// Clock Day
const dayEL = document.querySelector("#day");
let daynumber = d.getDay();
let day = "";
<em>switch</em> (daynumber) {
<em>case</em> 0: day = "Sunday"; <em>break</em>;
<em>case</em> 1: day = "Monday"; <em>break</em>;
<em>case</em> 2: day = "Tuesday"; <em>break</em>;
<em>case</em> 3: day = "Wednesday"; <em>break</em>;
<em>case</em> 4: day = "Thrusday"; <em>break</em>;
<em>case</em> 5: day = "Friday"; <em>break</em>;
<em>case</em> 6: day = "Saturday"; <em>break</em>;
}
dayEL.innerHTML = day;
}That’s it!!
Output
To see the live output, click here & visit our other blog here
