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!