I attempted to modify the user input in minutes by changing "remseconds" to remminutes and adjusting the calculations to "x 60", but unfortunately, nothing happened as expected.
Instead of "remseconds," I tried using remminutes and multiplied it by 60, but no changes occurred.
const container = document.querySelector('.counter');
const buttonsDiv = document.querySelector('.buttons');
const secInput = document.getElementById('seconds');
var seconds;
var remseconds;
var minutes;
var toCount = false;
function toSubmit() {
display('start');
remove('seconds');
remove('ok');
seconds = Number(secInput.value);
counting();
}
function display(e) {
document.getElementById(e).style.display = 'block';
}
function remove(e) {
document.getElementById(e).style.display = 'none';
}
function check(stat) {
if (stat.id == "start") {
display("stop");
remove("start");
toCount = true;
} else if (stat.id == "stop") {
display("continue");
remove("stop");
toCount = false
} else {
display("stop");
remove("continue");
toCount = true;
}
}
function count() {
if (seconds > 0) {
if (toCount == true) {
seconds--;
remseconds = seconds % 60;
minutes = Math.floor(seconds / 60);
if (minutes < 10) {
minutes = "0" + minutes;
}
if (remseconds < 10) {
remseconds = "0" + remseconds;
}
container.innerHTML = minutes + " : " + remseconds;
}
} else {
container.innerHTML = "DONE!";
buttonsDiv.style.opacity = "0";
}
}
function counting() {
remseconds = seconds % 60;
minutes = Math.floor(seconds / 60);
if (remseconds < 10) {
remseconds = "0" + remseconds;
}
container.innerHTML = minutes + " : " + remseconds;
setInterval(count, 1000);
}<!DOCTYPE html>
<html class="class2">
<head>
<title>CountDown</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>CountDown</h1>
</header>
<div class="content">
<div class="counter"></div>
<input type="number" id="seconds" placeholder="Seconds">
<div class="buttons">
<button class="btn start" id="start" value="1" onclick="check(this)">Start</button>
<button class="btn start" id="continue" value="1" onclick="check(this)">Continue</button>
<button class="btn stop" id="stop" value="0" onclick="check(this)">Stop</button>
<button class="btn start" id="ok" onclick="toSubmit()">Submit</button>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>If you have any suggestions or solutions, please feel free to share them.