Responsive Timer Application built with JS, CSS & HTML

Community feedback

• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there! Good job

  I have some recommendations for you

  • you need to stretch the background with background-size: cover

  • in my opinion, the calcTimer function is redundant. Instead, you could use the following construction:

  let diff = dateToLaunch - today;
  
  function calculateTimer() {
  .......
  }
  
  window.addEventListener('DOMContentLoaded', () => {
    const timerInterval = setInterval(calculateTimer, 1000);
  
    if (diff <= 0) {   
      clearInterval(timerInterval)
    }
  });
  

  • In each interval tick you declare new variables with functions, this reduces performance

    const days = String(Math.trunc(time / (1000 * 60 * 60 * 24))).padStart(2, 0);
    const hours = String(Math.trunc((time / (1000 * 60 * 60)) % 24)).padStart(2, 0);
    const minutes = String(Math.trunc((time / 1000 / 60) % 60)).padStart(2, 0);
    const seconds = String(Math.trunc((time / 1000) % 60)).padStart(2, 0);
  

  I would make calculations in separate constants. The date calculation would look like this:

  const DAYS = 1000 * 60 * 60 * 24;
  ....
  const left = {
    DAYS: null
    .....
  }
  ...
  calculateTimer() {
  ....
  left.DAYS = Math.trunc(time / DAYS)
  
  daysValue.textContent = days > 10 ? + days : `0${days}` ;   // use ternar because padStart is experimental
  }
  

  I hope my feedback will be useful.

  Good luck and fun coding 🤝⌨️

  Marked as helpful

  0

  ---

  

  anitha-nagadasariknk•100

  @anitha-nagadasarinkPosted over 2 years ago

  @isprutfromua Thank you so much for your insightful feedback. I will update the solution.

  0