JavaScript Countdown Timer

Hosted Project

https://js-beginners.github.io/countdown-timer/

GitHub Source Files

https://github.com/JS-Beginners/countdown-timer

Project Objective

The project creates a JavaScript countdown timer. This timer takes a given day and returns the days, hours, minutes, and seconds.

JavaScript Used

• JavaScript Date() Object
• Window.setInterval() method
• JavaScript CSS Selectors
• JavaScript Math.floor()

My Personalize Summary

This project is pretty basic and could be done in as little as a half hour much like the JavaScript Digital Clock project.

The original project only created an output for the countdown timer.

But, I figured I'd make the project marginally better by at least displaying the day that was used for the countdown.

So, in the top of the page you'll see the fixed date that the timer is actually using.

You could probably make the project much better if you code up a way to actually have your user input the time and then recalculate the countdown timer each time.

I chose not to do this because I wanted to quickly get to the next project.

New Things Learned or Refreshed

This project was pretty basic.

However, like each time, it made me realize that being a JavaScript programmer is more than just knowing the language.

You have to know how to use logic to use the language.

For example, it's easy to output a date using JavaScript onto your browser's screen with the Date() object, but if you didn't know how to extract the hour from your date using JavaScript you'd have to end up using an equation.

This project had to use a math equation to extract the days, let days = Math.floor(distance / (1000 * 60 *60 * 24)); for example, because the days had to be calculated from difference in days in milliseconds.

JavaScript programming is logic + programming knowledge.

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 Countdown Timer 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!