JavaScript 30- Day 29 Study Notes

https://javascript30.com/

Day 29 of JavaScript 30 by Wes Bos involved making a countdown timer with some interesting features. A display below the timer shows what time it will be when the timer runs out. A menu at the top of the page contained several selections to set the timer, as well as an input area to select a unique time.

At the top of the script tag, we named four variables and selected respective classes for display, end time, and buttons.

let countdown;
const timerDisplay = document.querySelector('.display__time-left');
const endTime = document.querySelector('.display__end-time');
const buttons = document.querySelectorAll('[data-time]');

The timer function designated start and end times for the interval.

function timer(seconds){
  clearInterval(countdown);
  const now = Date.now();
  const then = now + seconds * 1000;
  displayTimeLeft(seconds);
  displayEndTime(then);

We worked with seconds for the time value in our calculations.

  countdown = setInterval(() => {
     const secondsLeft = Math.round((then - Date.now())/ 1000);
     if(secondsLeft < 0){
        clearInterval(countdown);
        return;
     }
     displayTimeLeft(secondsLeft);
  }, 1000);

We used a second function to display the time left.

function displayTimeLeft(seconds){
   const minutes = Math.floor(seconds / 60);
   const remainderSeconds = seconds % 60;
   const display = `${minutes}:${remainderSeconds < 10 ? '0': ''}${remainderSeconds}`;
   document.title = display; //changes title tab
   timerDisplay.textContent = display;
}

We used a modulo to allot minutes and seconds. For the display, we used a template literal containing a ternary operator. I am finding template literals very flexible with what can be contained in them.

A third function calculated and displayed the end time. Note the timestamp argument equals the “then” variable named previously. From there, we can obtain hours and minutes of the end time using the getHours and getMinutes methods.

function displayEndTime(timestamp){
   const end = new Date(timestamp);
   const hour = end.getHours();
   const minutes = end.getMinutes();
   endTime.textContent = `Be Back At ${hour >12 ? hour-12: hour}:${minutes < 10 ? '0': ''}${minutes}`;
}

For the pre-set interval buttons at the top of the page, the startTimer function gives the interval in seconds. An event listener calls the function.

function startTimer(){
// this - object with time
// gives seconds in interval specified
   const seconds = parseInt(this.dataset.time);
   timer(seconds);
}
buttons.forEach(button => button.addEventListener('click', startTimer));

Finally, the program handles the custom form input. The custom form is an object, so we can use the “this” keyword to refer to it.

document.customForm.addEventListener('submit', function(e){
   e.preventDefault();
   const mins = this.minutes.value;
   timer(mins * 60);
   this.reset();
});

I’m still getting used to working with time and date.

Follow my study notes as I progress through JavaScript 30.

JavaScript 30–01 Drum Kit

JavaScript 30- Day 18 Study Notes