Currently creating a 25 minutes countdown timer with timing incrementing/decrementing buttons. I managed to create the timer and get it to work when pressing "Start" button, but I'm struggling to find a way for inserting a function to pause it when "Pause" button is pressed and resume when "Start" button is pressed. I've checked several threads on this matter but I cannot make the solutions proposed work with my logic. Any hint would be appreciated. Please, find below my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>25 + 5 Clock</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="./styles/styles.css">
<style>
* {
text-align: center;
}
</style>
</head>
<body>
<h1>25 + 5 Clock</h1>
<div class="row" id="columnas">
<div class="col" id="break-label">Hey you!
<div class="5">
<button id="break-decrement" class="btn btn-primary" type="button" name="button" onclick="breakDec()">break-dec</button>
<div id="break-length">5</div>
<button id="break-increment" class="btn btn-primary" type="button" name="button" onclick="breakInc()">break-inc</button>
</div>
</div>
<div class="col" id="session-label">Session length
<div class="25">
<button id="session-decrement" class="btn btn-success" type="button" name="button" onclick="sessionDec()">session-dec</button>
<div id="session-length">25</div>
<button id="session-increment" class="btn btn-success" type="button" name="button" onclick="sessionInc()">session-inc</button>
</div>
</div>
</div>
<div class="tiempo">
<div id="timer-label">Session</div>
<div id="time-left">
<span class="minutes_value" id="minute_value">25</span>:
<span class="seconds_value" id="second_value">00</span>
</div>
</div>
<div class="botones">
<button id="start_stop" type="button" name="button" onclick="alertMe()">Start</button>
<button id="reset" type="button" name="button">Reset</button>
</div>
<button type="button" name="button" id="clickButton">Pause</button>
<! -- Break decrement -->
<script>
function breakDec() {
if (document.getElementById("break-length").innerHTML <= "1") {
document.getElementById("break-length").innerHTML === parseFloat(1)
}
else {document.getElementById("break-length").innerHTML = parseFloat(document.getElementById("break-length").innerHTML) - parseFloat( 1)}
}
</script>
<! -- Break increment -->
<script>
function breakInc() {
document.getElementById("break-length").innerHTML = parseFloat(document.getElementById("break-length").innerHTML) + parseFloat( 1)
}
</script>
<! -- session decrement -->
<script>
function sessionDec() {
if (document.getElementById("session-length").innerHTML <= 1) {
document.getElementById("session-length").innerHTML === parseFloat(1)
} else
{document.getElementById("session-length").innerHTML = parseFloat(document.getElementById("session-length").innerHTML) - parseFloat( 1);
document.getElementById("minute_value").innerHTML = parseFloat(document.getElementById("minute_value").innerHTML) - parseFloat( 1);}
}
</script>
<! -- Session increment -->
<script>
function sessionInc() {
document.getElementById("session-length").innerHTML = parseFloat(document.getElementById("session-length").innerHTML) + parseFloat( 1);
document.getElementById("minute_value").innerHTML = parseFloat(document.getElementById("minute_value").innerHTML) + parseFloat( 1);
}
</script>
<! -- ***************************************************************************************** -->
<! -- C O U N T D O W N -->
<! -- ***************************************************************************************** -->
<! -- ***************************************************************************************** -->
<! -- ***************************************************************************************** -->
<script>
function alertMe() {
const deadlineTime = new Date(new Date().getTime() + parseFloat(document.getElementById("minute_value").innerHTML) * 60000);
setInterval(function() {
//current time
const currentTime = new Date();
//show the start time, equivalent to 5 minutes(300000)
const time_start = deadlineTime - currentTime;
//converting the time in minutes
const min_info = Math.floor((time_start % (1000 * 60 * 60)) / (1000 * 60));
//converting time in seconds
const sec_info = Math.floor((time_start % (1000 * 60)) / 1000);
//mostrar temporizador
document.getElementById("minute_value").innerHTML = min_info;
document.getElementById("second_value").innerHTML = sec_info;
if (time_start < 0) {
clearInterval(alertMe);
document.getElementById("minute_value").innerHTML = "0";
document.getElementById("second_value").innerHTML = "0";
}
}, 5);
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" charset="utf-8"></script>
</body>
</html>
This is quite a simple but effective solution.
Make a new top level variable like
let started = false.Then, code the buttons so the start button sets it to true, and the pause button sets it to false. Then, check if
startedisfalseon the beginning of the timeout, and if it is,return, which will stop running the function for that interval.