React timerr

by GosiaPi

HTML

<div class="container">
    <div class="row">
      <div class="col-3">
        <label for="IDSystem">Status</label>
        <select class="form-control" id="status" required onchange="changeStatus(this)">
          <option value="ready">Ready</option>
          <option value="lunch">Lunch</option>
          <option value="coffee">coffee </option>
          <option value="call">Call </option>

        </select>
      </div>
    </div>

    <div class="row" style="margin-top: 10px;" id="displayTimer">
      <div class="col-3">
        <textarea id="display-area"
          style="font-size: 18px; color:white; height:42px; background-color: black; padding-left:16px; padding-right: 12px;  width:133px; border: groove; border-width: 4px; border-color: goldenrod; border-radius: 3px; resize:none; overflow:hidden">00:00:00.000</textarea>
        <div style="margin-top: 10px;"></div>
        <!-- <input id="stop_btn" type="button" value="stop"> -->
      </div>
    </div>



  </div>

JavaScript

var timer;
    var startTime;
    var displayTimer = document.getElementById('displayTimer');
    var display = document.getElementById("display-area");


    const opt = document.querySelector('#status option:checked');
    var status = localStorage.getItem('status')
    if (status && (status == "call" || status == "ready")) {
      displayTimer.style.display = 'none';
      document.getElementById("status").value = status;

    } else if (status && (status == "lunch" || status == "coffee")) {
      displayTimer.style.display = 'block';
      document.getElementById("status").value = status;
      start()


    } else {
      document.getElementById("status").value = 'ready';
      displayTimer.style.display = 'none';


    }

    function changeStatus(obj) {
      display.style.backgroundColor = 'black';
      if (obj.value == "" || obj.value == "ready" || obj.value == 'call') {
        localStorage.setItem('status', obj.value);
        displayTimer.style.display = 'none';

        reset();

      } else if (obj.value == "lunch") {
        localStorage.setItem('status', obj.value);
        displayTimer.style.display = 'block';
        reset();
        start();

      } else if (obj.value == "coffee") {
        localStorage.setItem('status', obj.value);
        displayTimer.style.display = 'block';
        reset();
        start();
      }
    }

    function start() {
      startTime = parseInt(localStorage.getItem('startTime') || Date.now());
      localStorage.setItem('startTime', startTime);
      timer = setInterval(clockTick, 100);
    }

    function stop() {
      clearInterval(timer);
    }

    function reset() {
      clearInterval(timer);
      localStorage.removeItem('startTime');
      document.getElementById('timer').innerHTML = "00:00";
    }

    function clockTick() {
      // debugger;
      	var currentTime = Date.now(),
        timeElapsed = new Date(currentTime - startTime),
        mins = timeElapsed.getUTCMinutes(),
        secs =...