JSFiddle - React, Tailwind, and code Playground

by apaichon

HTML

<ul id="timer"></ul>

JavaScript

let period = 0,
  times = [45,15,45],
  isTimeout = false;
let timer = document.getElementById('timer');
let status = document.getElementById('status');
let timing = 0;

while (!isTimeout) {
  if (timing < times[period] ) {
    timing++;
     let entry = document.createElement('li');
    entry.appendChild(document.createTextNode(timing));
    timer.appendChild(entry);

  } else {
    period++;
    timing = 0;
    if (period === 1) {
     let entry = document.createElement('li');
    entry.appendChild(document.createTextNode('Rest Time'));
    timer.appendChild(entry);
      
    }
    else if (period === 2) {
      let entry = document.createElement('li');
    entry.appendChild(document.createTextNode('Second Half'));
    timer.appendChild(entry);
    } else if (period === 3) {
      isTimeout = true;
      let entry = document.createElement('li');
    entry.appendChild(document.createTextNode('Full Time'));
    timer.appendChild(entry);
      return;
    }
  }
}