Day29 of #100DaysOfCode

#CodeTogether Day 29/100

Hii folks 🙌

Today I completed the 29th video of JavaScript30!

Project 29: Countdown Clock

Source: https://javascript30.com

Learnings:

Today we have been tasked to make a Countdown Clock!

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.

Countdown Clock

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) {
  // clear any existing timers
  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);
    // check if we should stop it!
    if(secondsLeft < 0) {
      clearInterval(countdown);
      return;
    }
    // display it
    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;
  timerDisplay.textContent = display;
}

We used a modulo to allot minutes and seconds. For the display, we used a template literal containing a ternary operator which is very flexible.

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 adjustedHour = hour > 12 ? hour - 12 : hour;
  const minutes = end.getMinutes();
  endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`;
}

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

function startTimer() {
  const seconds = parseInt(this.dataset.time);
  timer(seconds);
}
buttons.forEach(button => button.addEventListener('click', startTimer));

Finally, the program handles the custom form input. The customs 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;
  console.log(mins);
  timer(mins * 60);
  this.reset();
});

Today I Learned (T-I-L):

• setInterval(), Template Literals! ⚡️

That is all for Day29 ✅

Thanks for reading, See you tomorrow!