app.js

const timer = document.getElementById('time')
const control = document.getElementById('control')
const settings = document.getElementById('settings')
const pomodoro = document.getElementById('pomodoro')
const short = document.getElementById('short')
const long = document.getElementById('long')
const radio = document.getElementById('radio')


// start-pause controls
control.addEventListener('click', () => {
  if (control.textContent === 'start') {
    control.textContent = 'pause'
    timer.style.color = '#F96C71'
    start()
  }
  else if (control.textContent === 'pause') {
    control.textContent = 'start'
    timer.style.color = '#656A83'
    stop()
  }
})

// Default timer settings
let s = 1200;
timer.textContent = '25:00'

// Change timer settings with user input
radio.addEventListener('change', () => {
  if (pomodoro.checked) {
    timer.textContent = '25:00'
    s = 1500
    clearInterval(interval)
    control.textContent = 'start'
  } else if (short.checked) {
    timer.textContent = '5:00'
    s = 300
    clearInterval(interval)
    control.textContent = 'start'
  } else if (long.checked) {
    timer.textContent = '30:00'
    s = 1800
    clearInterval(interval)
    control.textContent = 'start'
  }
})

// timer functionality
let interval
function updateTime() {
    s--
    // calculate s m h
  let hours = Math.floor(s / 3600)
  let mins = Math.floor((s - (hours * 3600)) / 60)
  let secs = s % 60
  // decimal formatting
  if (secs < 10) secs = '0' + secs
  if (mins < 10) mins = '0' + mins
  if (hours < 10) hours = '0' + hours

  // update DOM
  timer.textContent = `${mins}:${secs}`
    if (!s) {
      clearInterval(interval)
      alert('🚨')
    }
  }


function start() {
  if (interval) {
    return
  }
  interval = setInterval(updateTime, 1000)
}

function stop() {
  clearInterval(interval)
  interval = null;
}