Minor Presentation Bug in "12 - Countdown-timer" project final/app.js

[aaramini]

Great video and tutorials!

12 - Countdown-timer final/app.js : https://github.com/john-smilga/javascript-basic-projects/blob/master/12-countdown-timer/final/app.js

See PR #62

I was playing with the code adjusting the hours (11) and minutes (30) in this line:

const futureDate = new Date(tempYear, tempMonth, tempDay + 10, 11, 30, 0);

If const minutes = futureDate.getMinutes(); is 0, it displays "Giveaway ends on Monday, 25 April 2022 11:0am" instead of "Giveaway ends on Monday, 25 April 2022 11:00am".

This is because Date.getMinutes(); returns an integer between 0 and 59. So I think you forgot to test for cases where if futureDate.getMinutes() < 10 is true, add a leading zero to the display string in the giveaway.textContent variable.

Also, as coded,giveaway.textContent will always display "am". According to the MDN docs for Date(), Date.getHours() is in 24hr format and returns an integer between 0 and 23). So you should probably either drop the "am" and use 24 hour time format, or convert it to 12 hour time format with AM/PM and add a conditional check to display "12:00:00 AM" if futureDate.getHours == 0, as that is the convention used in 12hr time, not "00:00:00 AM".

The proposed fix would be to add the following code, or something similar, under the line const = futureDate.getMinutes(); :

var displayHours = hours;
var displayMinutes = minutes;
var meridiem = "AM";

displayMinutes  = (displayMinutes < 10) ? "0" + displayMinutes : displayMinutes;

meridiem = (displayHours >= 12) ? "PM" : "AM";
displayHours = (hours > 12) ? displayHours -12 : hours;
displayHours = (hours == 0) ? 12 : displayHours;

and then change the giveaway.textContent string literals to use the new variables...

giveaway.textContent = `giveaway ends on ${weekday}, ${date} ${month} ${year} ${displayHours}:${displayMinutes} ${meridiem}`;

Sorry, I don't mean to be picky or pedantic about it. It is a good tutorial. I just wanted to help make it the best it can be! :)

Best Regards!