A Simple Countdown Timer

Live timer lets you know exactly how much time you have left

Overview

This is a JavaScript timer that uses real dates to calculate and show the time left down to the second.

I wanted a fun way to learn JavaScript, so I followed a tutorial by John Smilga through freeCodeCamp.org on YouTube in order to make this timer.

Details

While following the tutorial helped me learn some basics of JavaScript, I thought it would be a good practice to manipulate the code to better suit my needs. The tutorial was for a countdown to a giveaway, but I decided to change it to a countdown to my birthday.

I also wanted more practice with responsive design, so I changed the styling to incorporate Bootstrap grids and customized the look to suit my preferences.

The script uses textContent to change the part of the countdown that states my birthday and returns the actual days and numbers using functions such as getDay() and getFullYear(). This posed a problem with the format of the time in that if the minute or second values were single digits, the output would look like "2:5" instead of "02:05". To fix this, I created a function formatTime(x) that used an if/else statement to fix the formatting. Furthermore, I created another if/else statement to replace the time "00:00" with the word "midnight". This way, you can alter the date in the JavaScript file without having to touch the HTML file, and the issues with formatting should be resolved.

Main Takeaways

I believe that my background in Java helped me understand how the functions worked and how to alter the code as needed. The tutorial taught me how to manipulate HTML code through the use of JavaScript functions and was a great introduction to JavaScript.