Как сделать паузу у обратного счётчика?

Question

Александр Корегин @dragonika8

FrontEnd-Разработчик

JavaScript

Как сделать паузу у обратного счётчика?

У меня есть задание, чтобы при нажатие кнопки "Стоп", счётчик останавливался. Сделал, чтобы при нажатие на кнопку "Паузы" появлялась кнопка "Старт" и начал писать паузу. Кто сможет помочь доделать ?

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WSR Timer</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <main>
        <figure class="fisrt-figure">
            <h1>Таймер</h1>
            <div class="timer-menu">
                <h2>До конца задания осталось:</h2>
                <div class="timer-info">
                    <span id="hours">00</span>
                    <a>:</a>
                    <span id="minutes">00</span>
                    <a>:</a>
                    <span id="seconds">00</span>
                </div>
            </div>
            <div class="timer-control">
                <button class="start">Старт</button>
                <button class="pause">Пауза</button>
                <button class="restart">Перезапуск</button>
            </div>
        </figure>
        <figure class="second-figure">
            <h2>Введите данные</h2>
            <div class="set-data">
                <label>Введите количество часов</label>
                <input type="text" name="hours" value="3" placeholder="Введите количество часов">
                <label>Введите количество минут</label>
                <input type="text" name="minuts" value="0" placeholder="Введите количество минут">
                <label>Введите количество секунд</label>
                <input type="text" name="second" value="0" placeholder="Введите количество секунд">
                <input type="submit" value="Продолжить">
            </div>
        </figure>
    </main>
    <script src="js/script.js"></script>
</body>
</html>

let hoursVal;
let minutsVal;
let secondVal;
let pause = false;

$('.pause').click(function() {
    let addOrRemove = true;
    if (addOrRemove) {
        $(this).text('Старт');
        $(this).addClass('start');
        $(this).removeClass('pause');
        addOrRemove = false;
    } else {
        $(this).text('Стоп');
        $(this).addClass('pause');
        $(this).removeClass('start');
        addOrRemove = true;
    }
})

$('input[type="submit"]').click(function() {
    hoursVal = $('input[name="hours"]').val();
    minutsVal = $('input[name="minuts"]').val();
    secondVal = $('input[name="second"]').val();
    $('.second-figure').addClass('no-active');

    let timer;

    let compareDate = new Date();
    compareDate.setHours(compareDate.getHours() + parseInt(hoursVal));
    compareDate.setMinutes(compareDate.getMinutes() + parseInt(minutsVal));
    compareDate.setSeconds(compareDate.getSeconds() + parseInt(secondVal));

    timer = setInterval(function() {
    timeBetweenDates(compareDate);
    }, 1000);
});

function timeBetweenDates(toDate) {
    var dateEntered = toDate;
    var now = new Date();
    var difference = dateEntered.getTime() - now.getTime();
    if (difference <= 0 || pause == true) {
  
      // Timer done
      clearInterval(timer);
    
    } else {
      
      var seconds = Math.floor(difference / 1000);
      var minutes = Math.floor(seconds / 60);
      var hours = Math.floor(minutes / 60);
  
      minutes %= 60;
      seconds %= 60;
  
      $("#hours").text(hours);
      $("#minutes").text(minutes);
      $("#seconds").text(seconds);
    }
  }