This question already has answers here:
What is the JavaScript version of sleep()?
(91 answers)
Closed 1 year ago.
I Would Like To Create A Wait Between Each document.getElementById(), The Goal Of The Web App Is When You Load It, It Will Begin The Timer At 5, Every Second It Will Go Down And At The End Display The Message Completed, I Can Not Find The Right Function To Do This, I Am Fairly New To JavaScript, So This Is Probably A Stupid Question To You,
My JavaScript Code
window.onload = function timer(){
document.getElementById("timer").innerHTML = "Timer - 5";
document.getElementById("timer").innerHTML = "Timer - 4";
document.getElementById("timer").innerHTML = "Timer - 3";
document.getElementById("timer").innerHTML = "Timer - 2";
document.getElementById("timer").innerHTML = "Timer - 1";
document.getElementById("timer").innerHTML = "Timer - Completed";
}
My HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer - Test</title>
<link rel="shortcut icon" href="Resources/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./index.css">
<script src="./index.js"></script>
</head>
<body>
<div id="timer">
Welcome
</div>
</body>
</html>
Use setInterval():
window.onload = function timer() {
var time = 5;
var t = setInterval(() => {
if (time == -1) {
clearInterval(t);
return;
} else if (time == 0) {
document.getElementById("timer").innerHTML = "Timer - Completed";
return;
}
document.getElementById("timer").innerHTML = "Timer - " + time;
time--;
}, 1000);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer - Test</title>
<link rel="shortcut icon" href="Resources/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./index.css">
<script src="./index.js"></script>
</head>
<body>
<div id="timer">
Welcome
</div>
</body>
</html>
setTimeout and setInterval are what can help you here.
For example:
window.onload = function timer(){
document.getElementById("timer").innerHTML = "Timer - 5";
setTimeout(() => document.getElementById("timer").innerHTML = "Timer - 4", 1000);
setTimeout(() => document.getElementById("timer").innerHTML = "Timer - 3", 2000);
setTimeout(() => document.getElementById("timer").innerHTML = "Timer - 2", 3000);
setTimeout(() => document.getElementById("timer").innerHTML = "Timer - 1", 4000);
setTimeout(() => document.getElementById("timer").innerHTML = "Timer - DONE", 5000);
}
<div id="timer"></div>
There are other ways to implement this and improve the code, but this is the closest to the code you posted, so it should be easy to understand.
You can use the setTimeout() method in JavaScript. It allows you to delay a function for a set amount of time. Using recursion, you can create a function that calls itself, like this:
window.onload = () => {
const timer = document.getElementById("timer");
const countdown = (time) => {
// if time is up, return out of timer
if (time === 0) {
timer.innerHTML = "Timer - Completed";
return;
}
// set timer value to the current time
timer.innerHTML = `Timer - ${time}`;
// call the function with a timeout of 1 second (1000 milliseconds)
setTimeout(() => countdown(time - 1), 1000);
}
countdown(5);
}
Let me know if you have any questions!
setInterval is something you are looking for:
let timerId = null // it's id of our interval, we declaring it globally. Thanks to this we clear it (stop counting) when we need.
const startTimer = () => {
let counter = 5
timerId = setInterval(() => {
document.getElementById("timer").innerHTML =
--counter ? `Timer ${counter}` : "Timer - Completed"
if (counter === 0) clearInterval(timerId)
}, 1000) // time in ms
}
window.onload = function timer(){
startTimer() // we are starting our timer
}
window.destroy = function timer(){
clearInterval(timerId) // this is important! You don't want to leave runnig interval while you will change page before it ends.
}
<div id="timer">Welcome</div>
My favourite pattern is a recursive setTimeout.
function countdown() {
// Cache the element
const timer = document.getElementById("timer");
// Initialise count
function loop(count = 5) {
// If count is 0 print the completed message
if (!count) {
timer.textContent = 'Timer - Completed';
// Otherwise print the count and call the loop
// again with a reduced count that gets passed
// in as an argument
} else {
timer.textContent = `Timer - ${count}`;
setTimeout(loop, 1000, --count);
}
}
loop();
}
countdown();
<div id="timer" />
Related
I have a basic timer where a user puts in a number, then it counts down until it hits 0.
I want the user to put another number while the timer for the prev is still going on. When the timer for the prev number hits 0, a new timer for the recently entered number will begin. My code somehow has both timers running concurrently despite my uses of setInterval and setTimeout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script>
var isRunning = false;
var qNums = [];
var wrapFunction = function (fn, context, params) {
return function () {
fn.apply(context, params);
};
};
function q() {
var sec = document.getElementById("data").value;
if (!Number.isInteger(parseInt(sec))) {
document.getElementById("timer").innerHTML = "Not a number!";
return;
} else if (parseInt(sec) < 0) {
document.getElementById("timer").innerHTML = "Invalid timer setting!";
return;
}
qNums.push(wrapFunction(countDown, this, [sec]));
while (qNums) {
qNums.shift()();
}
}
function countDown(sec) {
var sec = document.getElementById("data").value;
var ms = 100;
isRunning = true;
document.getElementById("timer").innerHTML = "";
document.getElementById("btn").innerHTML = "Ticking!";
var interval = setInterval(function () {
if (ms == 100) {
document.getElementById("timer").innerHTML = sec + ".00";
} else {
document.getElementById("timer").innerHTML = sec + "." + ms;
}
ms -= 10;
if (ms < 0) {
sec--;
ms = 100;
}
if (sec < 0) {
document.getElementById("data").value = "";
document.getElementById("btn").innerHTML = "Start";
document.getElementById("timer").innerHTML = "Countdown complete";
isRunning = false;
clearInterval(interval);
}
}, 100);
}
</script>
<body>
<h1>Timer</h1>
<label>Timer Duration: </label><input id="data" />
<button id="btn" onclick="countDown()">Start</button>
<p id="timer"></p>
</body>
</html>
q() is my awful attempt at trying to implement this. countDown() is the standalone implementation of the countdown, separate from this functionality.
EDIT: Why does the snippet not run my code but the browser does???? Not sure how to fix this
Good try, but each interval has no way of triggering the next one to start with a callback, and without that, they'll all run concurrently. Pass the q.shift()() in as a callback to the timer function which can be invoked when the timer runs out alongside clearTimeout, or write a loop and only run the 0-th timer if it exists.
Another problem: setTimeout is often mistaken to be perfectly accurate, but this is an incorrect assumption. The ms parameter only guarantees the timer will be invoked no sooner than the duration specified. The consequence of this is that it will accumulate drift. A more accurate approach is to use a date object to check the system's time.
Here's a proof-of-concept using the polling version:
const enqueueTimer = () => {
const sec = +els.data.value;
if (!Number.isInteger(sec)) {
els.timer.innerHTML = "Not a number!";
}
else if (sec < 0) {
els.timer.innerHTML = "Invalid timer setting!";
}
else {
timers.push({duration: sec * 1000});
}
};
const updateTimers = () => {
if (!timers.length) {
return;
}
const {duration, start} = timers[0];
const now = new Date();
if (!start) {
timers[0].start = now;
}
const elapsed = now - start || 0;
const remaining = duration - elapsed || 0;
const sec = remaining / 1000;
const ms = remaining % 1000;
els.timer.innerHTML = `${~~sec}.${("" + ms)
.slice(0, 2).padEnd(2)}`;
els.btn.innerHTML = "Ticking!";
if (elapsed >= duration) {
timers.shift();
if (timers.length) {
timers[0].start = new Date(start.getTime() + duration);
}
else {
els.data.value = "";
els.btn.innerHTML = "Start";
els.timer.innerHTML = "Countdown complete";
}
}
};
const els = {
btn: document.getElementById("btn"),
data: document.getElementById("data"),
timer: document.getElementById("timer"),
};
els.btn.addEventListener("click", enqueueTimer);
const timers = [];
setInterval(updateTimers, 100);
<h1>Timer</h1>
<label>Timer Duration: <input id="data" /></label>
<button id="btn">Start</button>
<p id="timer"></p>
If it bothers you that the interval always runs, feel free to save the interval id, add a clearInterval() on the id when all the timers expire and kick off a new interval when a fresh timer is created.
Im developing a chess clock. The thing is that when Im retrieving the minutes and seconds from the DOM and transforming it with msToClockFormat I'm getting 100 times extra minutes. However, For more I look at the function, the more convinced I am that is working as it should be. The minutes are being divided by 60000, 1000 times 60`, and I dont see the error. Thanks.
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
let resetBtn = document.getElementById("reset");
let ms1 = stringTimeToMs(btn1.innerHTML);
let ms2 = stringTimeToMs(btn2.innerHTML);
let player1 = true;
let reset = false;
function tick() {
if (!reset) {
if (player1) {
btn1.innerHTML = msToClockFormat(--ms1);
} else {
btn2.innerHTML = msToClockFormat(--ms2);
}
}
}
function msToClockFormat(ms) {
let minutes = Math.floor(ms / 60000);
let seconds = Math.floor((ms % 60000) / 1000);
return minutes + ":" + (seconds < 10 ? "0" + seconds : seconds);
}
function stringTimeToMs(time) {
let minutes = time.split(":")[0];
let seconds = time.split(":")[1];
return (minutes * 60 + seconds) * 1000;
}
var myInterval = setInterval(tick, 1);
btn1.addEventListener("click", () => {
player1 = false;
reset = false;
})
btn2.addEventListener("click", () => {
player1 = true;
reset = false;
})
resetBtn.addEventListener("click", () => {
btn1.innerHTML = "05:00";
btn2.innerHTML = "05:00";
player1 = true;
ms1 = 5 * 60 * 1000;
ms2 = 5 * 60 * 1000;
reset = true;
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
<link rel="stylesheet" href="https://unpkg.com/#picocss/pico#latest/css/pico.min.css">
<script src="script.js" defer></script>
</head>
<body>
<main class="container">
<div class="container1">
<button class="timers" id="btn1">3:00</button>
</div>
<div class="container2">
<button class="timers" id="btn2">3:00</button>
</div>
<div class="container3">
<button id="reset">RESET</button>
</div>
</main>
</body>
</html>
You'd probably have a better time keeping your state in your code, and just writing it into the DOM elements.
I changed the tick interval to 1000ms (because it's unlikely setInterval would work correctly with 1ms), but even so it's not guaranteed that your function will be called exactly 1000ms apart, so it would be better to look at the wall clock (+new Date()) to see how much time actually elapsed since the last "tick".
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
let resetBtn = document.getElementById("reset");
let ms1 = 300000;
let ms2 = 300000;
let player1 = true;
let reset = false;
function update() {
btn1.innerHTML = msToClockFormat(ms1);
btn2.innerHTML = msToClockFormat(ms2);
}
function tick() {
if (!reset) {
if (player1) {
ms1 -= 1000;
} else {
ms2 -= 1000;
}
}
update();
}
function msToClockFormat(ms) {
let minutes = Math.floor(ms / 60000);
let seconds = Math.floor((ms % 60000) / 1000);
return minutes + ":" + (seconds < 10 ? "0" + seconds : seconds);
}
update();
var myInterval = setInterval(tick, 1000);
btn1.addEventListener("click", () => {
player1 = false;
reset = false;
})
btn2.addEventListener("click", () => {
player1 = true;
reset = false;
})
resetBtn.addEventListener("click", () => {
player1 = true;
ms1 = 5 * 60 * 1000;
ms2 = 5 * 60 * 1000;
reset = true;
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
<link rel="stylesheet" href="https://unpkg.com/#picocss/pico#latest/css/pico.min.css">
<script src="script.js" defer></script>
</head>
<body>
<main class="container">
<div class="container1">
<button class="timers" id="btn1"></button>
</div>
<div class="container2">
<button class="timers" id="btn2"></button>
</div>
<div class="container3">
<button id="reset">RESET</button>
</div>
</main>
</body>
</html>
Inside StringTimeToMs, seconds is being read as String input "00" as opposed to integer. As a result, adding seconds in return (minutes * 60 + seconds) * 1000; is concatenating "00" to the end of the number, making the number larger. Use parseInt to read the integer value.
function stringTimeToMs(time) {
let minutes = time.split(":")[0];
let seconds = parseInt(time.split(":")[1]);
return (minutes * 60 + seconds) * 1000;
}
I'm trying to make a google chrome extension, where there is a stopwatch where users can click start, stop or reset buttons. Upon clicking this stopwatch, I want the time to save within the extension itself so that users can always click out of the extension, but the time on the stopwatch will always keep going (until they press stop). I also want to constantly display the running time on the users screen, like this extension here:
[1]: https://i.stack.imgur.com/k0HMg.png
Here is my code:
//defining variables.
let seconds = 0;
let minutes = 0;
let hours = 0;
//these variables work to add a second "0" when there is only 1 digit in each respective value.
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;
//this variable is used to work the setInterval() method.
let interval = null;
//this variable holds the stopwatch's status.
let status = "stopped";
//stopwatch function, determining when to increment next value, and when to bring current values to zero.
function stopWatch() {
seconds++;
if (seconds / 60 === 1) {
seconds = 0;
minutes++;
if (minutes / 60 === 1) {
minutes = 0;
hours++;
}
}
//if any of the values within the timer are only 1 digit in length, we will add ANOTHER zero to it.
if (seconds < 10) {
displaySeconds = "0" + seconds.toString();
} else {
displaySeconds = seconds;
}
if (minutes < 10) {
displayMinutes = "0" + minutes.toString();
} else {
displayMinutes = minutes;
}
if (hours < 10) {
displayHours = "0" + hours.toString();
} else {
displayHours = hours;
}
//this part of the function will update the display every 1 second.
document.getElementById("stopwatch-face").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;
}
function startStop() {
if (status === "stopped") {
interval = window.setInterval(stopWatch, 1000); //this plays out a certain function every set amount of time
document.getElementById("startStop").innerHTML = "Stop";
status = "start";
} else {
window.clearInterval(interval);
document.getElementById("startStop").innerHTML = "Start";
status = "stopped";
}
}
//this function will reset the stopwatch.
function reset() {
window.clearInterval(interval);
seconds = 0;
minutes = 0;
hours = 0;
document.getElementById("stopwatch-face").innerHTML = "00:00:00";
document.getElementById("startStop").innerHTML = "Start";
}
//This is what you do instead of "onclick", to make extensions....:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("startStop").addEventListener("click", startStop);
});
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("reset").addEventListener("click", reset);
});
<!DOCTYPE html>
<html lang="en">
<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>Snap Focus</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,300;0,400;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<script type="text/javascript" src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="body">
<body>
<div class="content">
<div class="modal-header">
<div class="header">
<h1 className="Title"><strong>Snap Focus</strong></h1>
</div>
<div class="modal-subheader">
<p><i>Just press start to block unnecessary websites, and be more productive!</i></p>
</div>
<hr>
</div>
<div id="stopwatch-face">
00:00:00
</div>
<div class="buttons">
<button id="startStop">Start</button>
<button id="reset">Reset</button>
</div>
<br>
</div>
</body>
</div>
</html>
Any help is greatly appreciated!
Hi here's a small script I call to save data in an extension, hopefully you can use it. You'll probably need to add permission in your manifest, here's the chrome documentation
// Manage access_token storage
const TOKEN_NAME = 'faunaToken';
export function setAuth(token) {
chrome.storage.sync.set({ [TOKEN_NAME]: token });
}
export function removeAuth() {
chrome.storage.sync.remove([TOKEN_NAME]);
}
export function getAuth() {
return new Promise((resolve) => {
chrome.storage.sync.get([TOKEN_NAME], async (token) => {
resolve(token[TOKEN_NAME]);
});
});
}
and then use it like
import { setAuth } from '../scripts/AuthToken';
somePromise.then(data => setAuth(data.token));
By the way you probably don't want to call this every second to update the counter. It would probably be better to on click save the timestamp to storage and have popup.js determine time since the timestamp
I have a button which I am trying to use as a start and stop for an event which starts or stops a countdown timer. However it currently only starts and changes to the stop but will not change back to start or stop the timer from counting down.
Is there a better way of doing this? I've also included the reset button as I've tried to reset things when it it's pushed but it currently just changes back to the start, but the start won't fire again after I have done this.
((d) => {
let btn = d.getElementById("btn");
let reset = d.getElementById("reset");
let countdown = d.getElementById("countdown");
let counter;
let startTime = 1500;
let timerFormat = (s) => {
return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
};
countdown.innerHTML = timerFormat(startTime);
let timer = () => {
startTime--;
countdown.innerHTML = timerFormat(startTime);
if (startTime === 0) clearInterval(counter);
};
btn.addEventListener("click", () => {
if (stop) {
start();
btn.innerHTML = "Stop";
} else {
stop();
btn.innerHTML = "Start";
}
});
let start = () => {
counter = counter || setInterval(timer, 1000);
};
let stop = () => {
clearInterval(counter);
counter = undefined;
};
reset.onclick = () => {
startTime = 1500;
countdown.innerHTML = timerFormat(startTime);
if (btn.innerHTML === "Stop") {
btn.innerHTML = "Start";
}
};
})(document);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../styles/styles.css" />
<script defer src="../JS/timer.js"></script>
</head>
<body>
<div id="countdown"></div>
<div class="btn__container">
<button class="btn" id="btn">Start</button>
<button class="btn" id="reset">Reset</button>
</div>
</body>
</html>
Your problem is in how you are determining whether to start or stop:
if (stop) {
stop is a function, so it has a "truthy" value and your if statement will always evaluate to true. Instead, check the existence of counter.
Other:
Don't use .innerHTML if you can help it and certainly not when the
string you are working with doesn't contain any HTML. .innerHTML
has security and performance implications. Instead, use
.textContent.
While a timer isn't going to be 100% accurate for timekeeping, you
can make the counter a little bit more accurate by having the
callback run just a little under every second. The reason being that
running every second means you run the risk of possibly skipping over
a second on the counter if the timer doesn't run exactly one second
later.
((d) => {
let btn = d.getElementById("btn");
let reset = d.getElementById("reset");
let countdown = d.getElementById("countdown");
let counter;
let startTime = 1500;
let timerFormat = (s) => {
return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
};
countdown.textContent = timerFormat(startTime);
let timer = () => {
startTime--;
countdown.textContent = timerFormat(startTime);
if (startTime === 0) clearInterval(counter);
};
btn.addEventListener("click", () => {
if (counter) {
stop();
btn.textContent = "Start";
} else {
start();
btn.textContent = "Stop";
}
});
let start = () => {
counter = counter || setInterval(timer, 950);
};
let stop = () => {
clearInterval(counter);
counter = null;
};
reset.onclick = () => {
startTime = 1500;
countdown.textContent = timerFormat(startTime);
if (btn.textContent === "Stop") {
btn.textContent = "Start";
}
};
})(document);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../styles/styles.css" />
<script defer src="../JS/timer.js"></script>
</head>
<body>
<div id="countdown"></div>
<div class="btn__container">
<button class="btn" id="btn">Start</button>
<button class="btn" id="reset">Reset</button>
</div>
</body>
</html>
Problem: When I click my start button after stopping my timer, I can't seem to get the timer to resume.
Desired result: For any given timer, when I click the start button, after clicking the stop button, I want the time to resume where it left off.
I figured that when clicking the start button, it would just call the setInterval function again after being cleared, however, I am having issues figuring that out.
I have the stop event in each function in the same scope as the intervalID var's, which hold the setInterval functions itself. Which is why the stop button works. Calling the timer functions(setPomodoro, setLongBreak, setShortBreak) resets their timer's to the original state. I can't seem to grasp how to resume from the timer's time when it's stopped.
JSBIN: http://jsbin.com/bucalequsi/edit?html,js,output
Re-creation:
// Problem: Pomodor timer does not have functionality
// Solution: Add functionality to the pomodor timer.
// IF a break timer is running WHILE another is clicked, stop running timer, start clicked timer.
// Reset current interval time on reset button.
// If break buttons are clicked more than once, reset the time.
window.onload = function() {
var pomodoro = document.querySelector('#set-time'),
longBreak = document.querySelector('#long-brk'),
shortBreak = document.querySelector('#short-brk'),
stopButton = document.querySelector('#stop'),
startButton = document.querySelector('#start'),
resetButton = document.querySelector('#reset'),
container = document.querySelector('#container'),
actionButtons = document.querySelector('#buttons'),
timer = document.querySelector('#timer');
// Click event for break timers.
container.addEventListener('click', function(e) {
// store event target
var el = e.target;
if (el === pomodoro) {
setPomodoro();
} else if (el === longBreak) {
setLongBreak();
} else if (el === shortBreak) {
setShortBreak();
}
e.stopPropagation();
}, false);
// 1.1a Create a timer that counts down from 25 minutes.
function setPomodoro() {
var mins = 24;
var secs = 60;
var intervalID = setInterval(function() { //set unique interval ID for each SI func.
timer.innerHTML = mins + ':' + secs;
secs--;
if (secs === 0) {
mins--;
secs = 60;
}
}, 1000);
// 2.2 When stop button is clicked, timer stops
stopButton.addEventListener('click', function() {
clearInterval(intervalID);
}, false);
}
// 1.2a Create a timer that counts down from 10 minutes
function setLongBreak() {
var mins2 = 9;
var secs2 = 60;
var intervalID2 = setInterval(function() {
timer.innerHTML = mins2 + ':' + secs2;
secs2--;
if (secs2 === 0) {
mins2--;
secs2 = 60;
}
}, 1000);
stopButton.addEventListener('click', function(){
clearInterval(intervalID2);
}, false);
}
// 1.3a Create a timer that counts down from 5 minutes.
function setShortBreak() {
var mins3 = 4;
var secs3 = 60;
var intervalID3 = setInterval(function() {
timer.innerHTML = mins3 + ':' + secs3;
secs3--;
if (secs3 === 0) {
mins3--;
secs3 = 60;
}
}, 1000);
stopButton.addEventListener('click', function() {
clearInterval(intervalID3);
}, false);
}
};
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Pomodoro Timer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
<header>
<div id="header"><h1>Pomodoro Timer</h1></div>
</header>
<div class="row">
<ul id="breaks">
<li><input type="submit" value="Pomodoro" id="set-time"></li>
<li><input type="submit" value="Long Break" id="long-brk"></li>
<li><input type="submit" value="Short Break" id="short-brk"></li>
</ul>
</div>
<h1 id=timer></h1>
<div class="row">
<ul id="buttons">
<li><input type="submit" value="Start" id="start"></li>
<li><input type="submit" value="Stop" id="stop"></li>
<li><input type="submit" value="Reset" id="reset"></li>
</ul>
</div>
<footer>
<p>© Laere 2016</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
When the set... functions are started with the buttons, you always initialise the times to starting values. Instead, if there is a timer already running you have to parse the paused time string into minutes and seconds and use those values to set your vars mins and secs.
Maybe something like this will work?
function setPomodoro() {
if(timer.innerHTML.length > 0){
var t = timer.innerHTML.split(':');
var mins = parseInt(t[0]);
var secs = parseInt(t[1]);
}
else{
var mins = 24;
var secs = 60;
}
var intervalID = setInterval(function() { //set unique interval ID for each SI func.
timer.innerHTML = mins + ':' + secs;
secs--;
if (secs === 0) {
mins--;
secs = 60;
}
}, 1000);
// 2.2 When stop button is clicked, timer stops
stopButton.addEventListener('click', function() {
clearInterval(intervalID);
}, false);
}