
Hosted Project
JavaScript Countdown Timer (Hosted on Github Pages)
Source Files
https://github.com/romeojeremiah/countdown-timer-2 (Hosted on Github)
Project Objective
This JavaScript countdown timer project is very similar to the previously coded countdown timer. The biggest differences are the difference in CSS and this project uses two JavaScript functions.
JavaScript Used
- addEventListener()
- removeEventListener()
- DOM manipulation
- JavaScript CSS manipulation
- functions
My Personalize Summary
For this project, I decided to dive deep into the code.
Specifically, I wanted to make sure I calculated the correct number of days, hours, minutes, and seconds for the given date.
This part, the math, was the most difficult thing about this project.
Other than that, it wasn't too bad.
New Things Learned or Refreshed
This project was relatively easy but it did help me draw my attention to the slice() method once again.
I learned that the slice method also takes negative numbers as arguments.
So, if you use the slice methods on a string such as “Hello”.slice(-1), the negative tells the slice method to return the number of string values beginning at the end of the string.
In the case above, “o” will be returned.
Time to Code
This project took me about an hour to complete on my own and uses less than 50 lines of JavaScript code.
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 Countdown Timer in action.
Leave a Reply