Laundry Timer

by trentHarlem

HTML

<label for='setTime'>Enter time in minutes:</label><input id='setTime' type='text'/>
<button id='submit' type='submit'>
Set Time
</button>
<div id='timer'></div>
<div id='timer2'></div>
<button id='cancel' type='submit'>
Cancel
</button>

CSS

* {
  font: 1.5rem system-ui;
}
#milli {
  font-size: 0.5rem;
}

JavaScript

const alertMe = () => alert('Check the CLothes!')

const setTime = document.querySelector('#setTime')
const timer = document.querySelector('#timer')
const timer2 = document.querySelector('#timer2')
const submit = document.querySelector('#submit')
const cancel = document.querySelector('#cancel')
function laundryTimer(time) {
/*   time = timeInMinutes * 60000;*/
   time = setTime.value * 60000
 //timer.innerHTML = time
  console.log('timer running')
  
  setInterval( function() {
  if ( time <= 0) {
 
  
  return
  } else {
   //setInterval(alertMe, time); 
  time = time - 1000
 displayTime = (time / 60).toString().substr(0,2);
 //timer.innerHTML = time.toString().substr(0,2);
 timer.innerHTML = displayTime
 
 setInterval (function milli() {
 let time2 = time
 displayMilli = time2
 //displayMilli = (time2).toString().substr(0,8);
 
  timer2.innerHTML = `<span id='milli'>${displayMilli}</span>`
 }, 1000)
 
  console.log('one sec tick')
  }
  }, 1000);  
  
  
}
submit.addEventListener('click', laundryTimer)