How To Make A Clock In Javascript

How to Create a Digital Clock Using Moment.js

A guide to creating a clock in the browser using only vanilla JavaScript and Moment.js library.

I mode to get a expert grasp of JavaScript is by building projects.

In today'southward post, we volition create a working clock only using vanilla JavaScript and the library Moment.js.

Let'due south get straight into creating our fully functional clock right in the browser.

Adding our HTML

Before we can start calculation JavaScript to create our clock, we must get-go add some HTML markup.

This markup will act us our clock'south UI and volition allow us some DOM elements to dispense when nosotros desire to bear witness the electric current fourth dimension.

The lawmaking is given below:

Calculation JavaScript

Now that we have our HTML information technology is time to add together some JavaScript.

The outset thing we need to do is get a reference to the H1 element we added before.

This will allow usa to modify the text in our H1 element and in plow display the current time.

Nosotros will achieve this by using the document.getElementByID part and passing it a reference to the H1'south id of "current time".

After nosotros get a reference to said H1 tag nosotros will use innerHTML to alter the text displayed within to show the current time.

The time volition be shown using the Moment.js format() office.

The code for this is given below:

Don't Forget to import moment into your projection

And if everything went well you should be seeing this on your webpage:

Note: If you're having problems using Moment.js you tin use a CDN from this link and import it in a script tag earlier your script.js file

Making our Clock Update Every Second

Bully! Nosotros are near done.

The but matter we have to do is update the time every second so our clock shows the electric current fourth dimension, non merely the time it was when the folio was start initialized.

We will exist achieving this by using the JavaScript setInterval() method to run our JavaScript lawmaking from before every second.

The code for this is given below:

SetInterval Allows our lawmaking above to run every second

Annotation: The SetInterval Function takes milliseconds non seconds so that 1000 equates to 1 second. Yous can read more about information technology at the MDN article linked here .

Finishing Our Clock

If you have followed the steps outlined above you should have a working clock similar the 1 displayed below:

If y'all are notwithstanding lost you can view the completed code at this CodeSandbox link here.

Optional: Calculation Custom Styles

Now we have completed a digital clock using purely vanilla JavaScript!

I don't know well-nigh you, simply I'm a fan of nighttime themes. The CSS beneath changes our code to a dark theme:

Feel Complimentary to add together your Ain Colors to make this projection your ain!

Notation: After creating your styles remember to add together them to your website either using a <link> tag or by importing it into your JavaScript file. If you aren't sure how to add CSS to a webpage you tin follow the steps linked in this article here .

Conclusion

Cheers for reaching the end of my article on 'How To Create A Stack Navigator In React Navigation'. I promise you accept a great day.

If you lot are new to Medium, you lot tin can join using this link here

And here is some further reading of mine:

More content at plainenglish.io . Sign up for our gratuitous weekly newsletter here .