JavaScript Digital Clock

Hosted Project

https://js-beginners.github.io/digital-clock

GitHub Source Files

https://github.com/JS-Beginners/digital-clock

Project Objective

The objective of this project is to code a JavaScript digital clock. This is a basic clock that displays the local time on your local computer.

JavaScript Used

• JavaScript Date() Object
• Window.setInterval() method

My Personalize Summary

Ok. I finally made it to another project that I completed entirely by myself.

Well, I completed it with just a bit of help from Google.

But, I didn't have to use the instructor's video solution.

Once I saw what we were going to build, I took one look and realized that it was just the time, which I knew I could retrieve using the Date() object.

The rest, I figured, was just some CSS manipulation and a method call on the Date() object to just show the time.

Then, I just wrapped my code in a Window.setInterval() method to show the date every one second to make sure the seconds displayed correctly.

I find it pretty exciting when you can complete your own JavaScript coding projects.

New Things Learned or Refreshed

As I stated in the summary above, I coded the entire project by myself.

So, I didn't learn anything new.

But, as always, I had to refresh myself on how to retrieve only the local time from the Date() object.

Once I googled my way to the MDN documentation, every thing else became a breeze.

Oh, well, I also had to do a bit of refreshing on the CSS margin property.

What can I say?

This stuff can escape you pretty fast if you do use it every day.

Time to Code

This project took me about 30 minutes to complete on my own.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Digital Clock in action.

Need to see the video solution for this project?

Need to see the video solution for this project? Get Bluelime's JavaScript for Beginners: Create 27 Projects from Scratch Course Now!