
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
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
- Download the source code from the github repository above.
- Delete the contents of the
app.js
file. - Implement the JavaScript code in your own
app.js file.
- If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
- 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.
Leave a Reply