JSFiddle - React, Tailwind, and code Playground
HTML
<!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>Таймер</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<div class="row">
<div class="time col">
<span class="minutes">03</span>:<span class="seconds">00</span>
</div>
</div>
<div class="row">
<div class="button col">
<button type="button" class="btn button__start">cтарт</button>
<button type="button" class="btn button__stop">пауза</button>
<button type="button" class="btn button__reset">сброс</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
.container {
justify-content: space-between;
}
.time {
font-size: 100px;
text-align: center;
}
span {
width: 130px;
display: inline-block;
vertical-align: middle;
}
.button {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.button__start {
width: 180px;
height: 70px;
margin-right: 30px;
border-radius: 0;
background-color: rgb(101, 214, 67);
color: #fff;
}
.button__stop {
width: 180px;
height: 70px;
margin-right: 30px;
border-radius: 0;
background-color: rgb(247, 185, 43);
color: #fff;
}
.button__reset {
width: 180px;
height: 70px;
border-radius: 0;
background-color: rgb(235, 38, 31);
color: #fff;
}
@media (max-width: 576px) {
.button__start,
.button__stop {
margin-right: 0;
}
}
JavaScript
'use strict';
let start = document.querySelector('.button__start');
let stop = document.querySelector('.button__stop');
let reset = document.querySelector('.button__reset');
let minutes = document.querySelector('.minutes');
let seconds = document.querySelector('.seconds');
let minutesValue = 2;
let secondsValue = 60;
start.addEventListener('click', function() {
let timer = setInterval(secondsChange, 1000);
timer;
function secondsChange() {
secondsValue--;
if (secondsValue < 10) {
secondsValue = '0' + secondsValue;
}
if (secondsValue === '0-1') {
minutesValue--;
secondsValue = 59;
}
if (minutesValue === 0 && secondsValue === '00') {
clearInterval(timer);
}
minutes.innerHTML = '0' + minutesValue;
seconds.innerHTML = secondsValue;
}
stop.addEventListener('click', function() {
clearInterval(timer);
start.addEventListener('click', function() {
timer;
});
});
reset.addEventListener('click', function() {
minutes.innerHTML = '03';
seconds.innerHTML = '00';
minutesValue = 2;
secondsValue = 60;
});
});