JSFiddle - React, Tailwind, and code Playground

by thomasa88

HTML

<div>
  <label for="start">Start time</label>
  <input id="start" type="time" value="20:00">
</div>
<br>
<div id="result">

</div>

<script>
	const schedule = `0:00 Mix all the ingredients
     0:30 Stretch and fold 1
    1:00 Stretch and fold 2
    1:30 Stretch and fold 3
    2:00 Stretch and fold 4
    12:00 Stretch and fold 5
    12:15 Divide the dough
    12:30 Shape the dough balls
    23:00 Shape the dough balls one more time
    24:00 Shape the pizza`

	var startInput = document.getElementById('start');
  var resultDiv = document.getElementById('result');
  
	function startChange() {
  	//alert(startInput.value)
  	console.log('CHANGE', startInput.value);
    let startTime = new Date();
    let [hour, minute] = startInput.value.split(':');
    startTime.setHours(hour);
    startTime.setMinutes(minute);
    startTime.setSeconds(0);
    
    schedLines = schedule.split('\n');
    
    let result = '';
    
    console.log(startTime)
    for (const line of schedLines) {
    	const trimLine = line.trim();
      const timeEnd = trimLine.indexOf(' ');
      const lineTime = trimLine.slice(0, timeEnd);
      const lineText = trimLine.substr(timeEnd + 1);
      const [lineHour, lineMinute] = lineTime.split(':');
      const timeDelta = ((parseInt(lineHour) * 60) + parseInt(lineMinute)) * 60 * 1000;
      let t = new Date(startTime.getTime() + timeDelta);
      result += `<div><input type=checkbox> ${t.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})} (${lineTime}) ${lineText}</div>`;
    }
    result += ''
    
    resultDiv.innerHTML = result;
  }

	startInput.addEventListener('input', startChange);
  startChange();
</script>