Building a Simple Digital Clock with JavaScript

avatar
(Edited)

InShot_20221002_203508885.jpg

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:

Screenshot_20221002-202157_1.png

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:

Screenshot_20221002-202007_1.png

I would love to hear your opinions๐Ÿ˜Š

Thanks for Stopping by!



0
0
0.000
9 comments
avatar

Cool! Maybe time is formatted differently where you live, but 20:20:02 would be called 08:20:02 PM here so it would require subtracting 12 from the hours if it's greater than 12.

0
0
0.000
avatar

Yeah you're right!
In this case, I programmed it to work with the 24 hour format but thanks a lot for your suggestion, I never even thought of it.

That means this should be added somewhere in the code:

if( hrs > 12 ) { hrs - 12} 

0
0
0.000
avatar

Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.ย 
ย 

0
0
0.000
avatar

Congratulations @charlrific! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You received more than 1750 upvotes.
Your next target is to reach 2000 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Check out the last post from @hivebuzz:

Feedback from the October 1st Hive Power Up Day
Hive Power Up Month Challenge 2022-09 - Winners List
Be ready for the 10th edition of the Hive Power Up Month!
Support the HiveBuzz project. Vote for our proposal!
0
0
0.000
avatar

Very well detailed tutorial! I have come across the date object when learning JavaScript with sololearn and I even solved a little problem with it but I didn't even think about making a project with it. I will add this to my bucket list and work on something similar when I have learnt DOM manipulation. Good job bro

0
0
0.000
avatar

That would be nice ๐Ÿ˜Š
Thanks a lot bro!

0
0
0.000