index.js

const song = document.querySelector('.song')
const play = document.querySelector('.play')
const replay = document.querySelector('.replay')
const outline = document.querySelector('.moving-outline circle')
const video = document.querySelector('.vid-container video')
//sounds
const sounds = document.querySelectorAll('.sound-picker button')
//time display
const timeDisplay = document.querySelector('.time-display')
const outlineLength = outline.getTotalLength()
//duration
const timeSelect = document.querySelectorAll('.time-select button')
let fakeDuration = 600

outline.style.strokeDashoffset = outlineLength
outline.style.strokeDasharray = outlineLength

timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}: ${makeMeTwoDigits(
  Math.floor(fakeDuration % 60)
)}`

sounds.forEach((sound) => {
  sound.addEventListener('click', function () {
    song.src = this.getAttribute('data-sound')
    video.src = this.getAttribute('data-video')
    let weather = this.className
    let color
    let nonColor
    if (weather === 'rain') {
      color = '#4972a1'
      nonColor = 'beach'
    }
    if (weather === 'beach') {
      color = '#d46e2a'
      nonColor = 'rain'
    }
    //style color for activated icon
    document.getElementById(weather).style.fill = color
    document.getElementById(nonColor).style.fill = 'white'

    checkPlaying(song)
  })
})

play.addEventListener('click', function () {
  checkPlaying(song)
})
replay.addEventListener('click', function () {
  restartSong(song)
})
const restartSong = (song) => {
  console.log(song)
  let currentTime = song.currentTime
  song.currentTime = 0
}

timeSelect.forEach((option) => {
  option.addEventListener('click', function () {
    fakeDuration = this.getAttribute('data-time')
    timeDisplay.textContent = `${Math.floor(
      fakeDuration / 60
    )} : ${makeMeTwoDigits(Math.floor(fakeDuration % 60))}`
  })
})
const checkPlaying = (song) => {
  if (song.paused) {
    song.play()
    video.play()
    play.src = './svg/pause.svg'
  } else {
    song.pause()
    video.pause()
    play.src = './svg/play.svg'
  }
}

song.ontimeupdate = function () {
  let currentTime = song.currentTime
  let elapsed = fakeDuration - currentTime
  let seconds = Math.floor(elapsed % 60)

  let minutes = Math.floor(elapsed / 60)
  timeDisplay.textContent = `${minutes} : ${makeMeTwoDigits(seconds)}`
  let progress = outlineLength - (currentTime / fakeDuration) * outlineLength
  outline.style.strokeDashoffset = progress

  if (currentTime >= fakeDuration) {
    song.pause()
    song.currentTime = 0
    play.src = './svg/play.svg'
    video.pause()
  }
}
function makeMeTwoDigits(n) {
  return (n < 10 ? '0' : '') + n
}