Hello devs!👋
Well, I'm still pushing to get deep into JavaScript and the more stuff I learn, the more I realize I need to do a lot of practice to ensure I'm on the right track and that I'm not just learning stuff without even knowing how to apply them. But thankfully, that hasn't been the case🙂.
Lately, I got to learn quite a lot about JavaScript date objects then I thought that since I already know about functions, tenary operators and little DOM manipulations,I should try out the digital clock.
I actually didn't think I was ready at first, but I'm really glad it worked out and I'll be sharing a simple summary of how I got it done🙂.
The HTML
Of course, HTML first!
Not much code here though, I just needed to create a div for the clock and I gave it the "clock" id.
<body>
<div id="clock" ></div>
</body>
The CSS
Here I tried my best not to get carried away😅. I just kept the design simple.
Most Importantly, I used flex to align the clock div to the center, specified the width and I styled the form which the characters were going to take up when JavaScript inserts them innerHTML.
body {
background-color: #222;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#clock {
font: normal 2rem cursive;
width: 40%;
text-align: center;
padding: 1.5rem;
color: #fff;
box-sizing: border-box;
border-radius: 40px;
box-shadow: 10px 10px 20px #111;
}
Result:
The JavaScript
And now for the most important part!
The whole thing should be dependent on a single function, so I created a function which I named digitalClock(). This is responsible for inserting the time in the div I created.
function digitalClock() {
}
Then inside the function, I created the date object (which would get the time from the browser) using the new Date() constructor and stored it in the time variable.
function digitalClock() {
let time = new Date() ;
}
I used the different date object methods to get the hours, minutes and seconds from the time object and also stored them in their respective variables.
function digitalClock() {
let time = new Date() ;
let hrs = time.getHours() ;
let mins = time.getMinutes() ;
let secs = time.getSeconds() ;
}
Then I used tenary operators to add zeroes before the digits when they are less than 10 and also to switch between AM and PM, depending on the hour of the day.
Then the final code to display the characters in the clock div in the form of a text.
function digitalClock() {
let time = new Date() ;
let hrs = time.getHours() ;
let mins = time.getMinutes() ;
let secs = time.getSeconds() ;
hrs = (hrs < 10) ? "0" + hrs : hrs ;
mins = (mins < 10) ? "0" + mins : mins;
secs = (secs < 10) ? "0" + secs : secs ;
let am_pm = (hrs < 12) ? "AM" :"PM" ;
let display = document.getElementById("clock") ;
display.innerHTML = hrs + " : " +
mins + " : " + secs + " " + am_pm ;
}
It was also very important to include the setInterval() method with a delay of 1000ms (1second) to repeatedly call the function and change the time displayed in the clock every second.
Here's the final code:
function digitalClock() {
let time = new Date() ;
let hrs = time.getHours() ;
let mins = time.getMinutes() ;
let secs = time.getSeconds() ;
hrs = (hrs < 10) ? "0" + hrs : hrs ;
mins = (mins < 10) ? "0" + mins : mins;
secs = (secs < 10) ? "0" + secs : secs ;
let am_pm = (hrs < 12) ? "AM" :"PM" ;
let display = document.getElementById("clock") ;
display.innerHTML = hrs + " : " +
mins + " : " + secs + " " + am_pm ;
}
setInterval(digitalClock, 1000);
The Outcome:
I would love to hear your opinions😊
Thanks for Stopping by!