Create a Real-Time Digital Clock using HTML CSS and JavaScript
Creating a dynamic digital clock is a great way to enhance your web development skills. In this post, we will walk through how to build a stylish and functional digital clock using HTML, CSS and JavaScript. This project will not only improve your understanding of these technologies but also provide a useful feature that you can integrate into your web projects.
Read More: Realistic Dual Clock using HTML, CSS and JavaScript
HTML Structure
The HTML structure forms the foundation of our digital clock. We have structured the HTML to create the skeleton of the clock, which will display the time and date in a user-friendly manner.
<div class="digital-clock">
<div class="time-period"></div>
<div class="time">
<div class="hour"></div>
<div class="ratio">:</div>
<div class="min"></div>
</div>
<div class="date">
<div class="sec"></div>
<div class="day"></div>
<div class="date-month"></div>
</div>
</div>
<div class="bg"></div>The main container for our clock is the digital-clock div, which wraps all the elements required for displaying the time and date. Inside this container, we have the following elements:
- A time-period div to display AM or PM.
- A time div that contains separate divs for the hour and minutes, as well as a colon (:) to separate them.
- A date div that contains separate divs for the seconds, day of the week and the date with the month.
Each of these elements plays a crucial role in ensuring that our clock displays all the necessary information in a clear and organized manner.
CSS Styling
We have designed the CSS to give the digital clock a modern and clean appearance. By using flexbox for alignment and positioning, the clock elements are neatly arranged and responsive. We have also chosen fonts and colors that ensure readability and a sleek look.
body {
display: flex;
justify-content: center;
align-items: center;
background-color: black;
min-height: 100vh;
min-width: 320px;
}
.digital-clock {
gap: 10px;
width: 435px;
display: flex;
color: white;
position: relative;
font-weight: 600;
border-radius: 10px;
font-family: 'Seven Segment';
backdrop-filter: blur(5px);
padding: 10px 15px 10px 25px;
border: 1px solid #ffffff14;
background: rgb(136 136 136 / 10%);
box-shadow: 0px 0px 20px 0px #00000078;
}
.time-period {
position: absolute;
left: 10px;
top: 15px;
font-size: 15px;
}
.time {
position: relative;
display: flex;
flex: 1 0;
}
.time div {
font-size: 120px;
text-align: center;
text-shadow: 0px 0px 20px #ffffff3b;
}
.ratio {
transform: translateY(-20px);
animation: blink 1s steps(1, end) infinite;
}
.hour,
.min {
flex: 1 0;
}
.date {
display: grid;
align-items: center;
justify-items: center;
gap: 5px;
}
.date div {
position: relative;
font-size: 22px;
text-shadow: 0px 0px 3px #ffffff91, 0px 0px 3px #2c2c2c;
}
.sec::after,
.day::after,
.date-month::before,
.date-month::after {
font-size: 10px;
font-family: 'calibri';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
}
.sec::after {
content: 'sec';
}
.day::after {
content: 'day';
}
.date-month::before {
left: 0;
content: 'date';
transform: none;
}
.date-month::after {
content: 'month';
transform: none;
left: unset;
right: -5px;
}
.bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
opacity: 0.8;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (max-width: 600px) {
.digital-clock {
flex-direction: column;
}
.date {
grid-template-areas: "day sec date";
grid-template-columns: repeat(3, 1fr);
}
.day {
grid-area: day;
}
}
@keyframes blink {
50% {
opacity: 0;
}
}The body of our webpage uses flexbox to center the clock both horizontally and vertically on the screen. The digital-clock class applies styles to make the clock visually appealing, such as a background with a slight opacity, rounded corners, padding, and a subtle box-shadow.
The time class displays the hour and minute in a large font size, with a ratio class for the colon that separates them. The date class shows the seconds, day of the week, and the date with the month in a slightly smaller font size below the time. The "bg" class is used for additional background styling, enhancing the overall look of the clock.
JavaScript Functionality
The JavaScript is responsible for updating the clock dynamically. By using JavaScript, we have ensured that the clock displays the correct time and updates in real-time.
const val = document.querySelectorAll(".hour, .min, .sec");
const day = document.querySelector('.day');
const dateMonth = document.querySelector('.date-month');
const timePeriod = document.querySelector('.time-period');
const options = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true, day: '2-digit', month: '2-digit', weekday: 'short' };
setInterval(() => {
const now = new Date();
const dateTime = now.toLocaleTimeString('en-us', options)
const [week, date, month, hr, min, sec, period] = dateTime.replace(/,/g, '').replace(/\/|:/g, ' ').split(' ')
day.innerText = week;
dateMonth.innerText = date + " / " + month;
timePeriod.innerText = period;
val[0].innerText = hr
val[1].innerText = min
val[2].innerText = sec
}, 1000)The script fetches the current time and date using the Date object. It then updates the respective HTML elements every second with the current hours, minutes, seconds, day of the week and date with the month.
We have also added logic to display the correct time period (AM/PM) and format the time values to always show two digits (e.g., 08 instead of 8). The setInterval function calls the updateClock function every second to keep the clock accurate and up-to-date.
Read More: Ultimate Weather Web App using HTML CSS JavaScript | Fully Responsive
In this tutorial, we have created a dynamic digital clock using HTML, CSS and JavaScript. By structuring the HTML elements properly, styling them with CSS and adding real-time functionality with JavaScript, we have built a clock that is both functional and aesthetically pleasing. This project is a great way to practice and improve your web development skills and the resulting clock can be a useful addition to any web page.
