<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: aliceblue;
}
.section {
background-color: aliceblue;
padding: 10px;
width: fit-content;
}
#display{
margin-bottom: 5px;
font-size: 30px;
font-family: monospace;
color: darkturquoise;
}
.section input {
font-size: 8px;
color: #2D2D32;
text-align: center;
border: 1px solid gray;
width: 30px;
padding: 5px 1px;
margin-right: 4px;
display: inline-block;
}
.buttons {
display: flex;
flex-direction: row;
}
.buttons button {
margin-right: 4px;
padding: 5px 10px;
background-color: #d8d8d8;
border: none;
color: white;
font-size: 15px;
cursor: pointer;
outline: none;
transition: 0.1s;
}
.buttons button:active {
box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
}
.buttons button:last-child {
margin-right: 0;
}
.buttons button:nth-child(3){
background-color: #8bc34a;
}
.buttons button:nth-child(4){
background-color: rgb(201, 89, 69);
}
</style>
</head>
<body>
<section class="section">
<div id="display">0:00</div>
<div class="buttons">
<input type="text" id="input" name="input" placeholder="minutes">
<input type="text" id="input2" name="input2" placeholder="seconds">
<button onclick="start()">▶</button>
<button onclick="cancel()">∎</button>
</div>
</section>
</body>
<script>
function beep() {
var snd = new Audio("bell.mp3");
snd.play();
}
var timer;
function start(){
var input = document.getElementById("input").value;
var input2 = document.getElementById("input2").value;
minute = parseInt(input)
seconds1 = parseInt(input2)
if( isNaN(seconds1)){
seconds1 = 0
}
if( isNaN(minute)){
minute = 0
}
seconds = minute*60+seconds1
if(seconds==0){
return;
}
var textSec = "00"
textSec = seconds1
var display = document.getElementById("display");
display.innerHTML = minute + ':' + textSec
var statSec = seconds1
timer = setInterval(function(){
seconds--;
if(statSec != 0)
statSec--
else
statSec = 59
if(statSec < 10)
textSec = '0' + statSec
else
textSec = statSec
display.innerHTML = Math.floor(seconds/60) + ':' + textSec
if(seconds == 0){
console.log('d')
beep();
clearInterval(timer)
}
}, 1000)
}
function cancel(){
clearInterval(timer)
display.innerHTML ='00:00'
seconds = minute * 60
}
</script>
</html>