Amazing Digital Clock In HTML< CSS < JavaScript | Project Series Day - 9 | Frontend everything
 |
Hello Everyone 👋Welcome to My New Blog. Today I have made an IOS Digital Clock with the help of HTML, CSS, and Javascript | It is Project Series Day 9. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this digital clock web app step by step
Video Preview of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS and javascript, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
<div class="time">
<!-- hour minute seconds -->
<span class="hms"></span>
<!-- am and am -->
<span class="ampm"></span>
<br>
<span class="date"></span>
</div>
So that was the HTML coding. Now we will code CSS
CSS 🎈( step - 2)
body {
font-family: "Work Sans", sans-serif;
display: grid;
place-items: center;
height: 100vh;
margin: 0;
background: #222;
color: #fff;
}
.time {
padding: 8px;
text-align: center;
width: 300px;
}
.hms {
font-size: 48px;
font-weight: 200;
}
.ampm {
font-size: 12px;
}
.date {
font-size: 10px;
}
CSS coding is also done. Now let us move to JAVASCRIPT 😎
Javascript 🎈( step - 3)
function updateTime() {
var dateInfo = new Date();
/* time */
var hr,
_min = (dateInfo.getMinutes() < 10) ? "0" + dateInfo.getMinutes() : dateInfo.getMinutes(),
sec = (dateInfo.getSeconds() < 10) ? "0" + dateInfo.getSeconds() : dateInfo.getSeconds(),
ampm = (dateInfo.getHours() >= 12) ? "PM" : "AM";
// replace 0 with 12 at midnight, subtract 12 from hour if 13–23
if (dateInfo.getHours() == 0) {
hr = 12;
} else if (dateInfo.getHours() > 12) {
hr = dateInfo.getHours() - 12;
} else {
hr = dateInfo.getHours();
}
var currentTime = hr + ":" + _min + ":" + sec;
// print time
document.getElementsByClassName("hms")[0].innerHTML = currentTime;
document.getElementsByClassName("ampm")[0].innerHTML = ampm;
/* date */
var dow = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
month = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
day = dateInfo.getDate();
// store date
var currentDate = dow[dateInfo.getDay()] + ", " + month[dateInfo.getMonth()] + " " + day;
document.getElementsByClassName("date")[0].innerHTML = currentDate;
};
// print time and date once, then update them every second
updateTime();
setInterval(function() {
updateTime()
}, 1000);
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.