mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-10-16 05:23:50 +00:00
Added very basic 2 minute countdown timer logic.
This commit is contained in:
parent
a155c0685b
commit
c92c8d074a
@ -346,7 +346,11 @@
|
||||
<div class="outer-edge__dark">
|
||||
<div class="inner-edge__dark">
|
||||
<div class="instructions-header__container">
|
||||
<h1>Timer</h1>
|
||||
<h1 id="test">Countdown Clock</h1>
|
||||
<div id="countdown-timer">
|
||||
<span id="countdown-timer__display"></span>
|
||||
</div>
|
||||
<button id="start-timer">Start</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -354,4 +358,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript" src="./public/scripts/app.js"></script>
|
||||
</html>
|
||||
|
24
public/scripts/app.js
Normal file
24
public/scripts/app.js
Normal file
@ -0,0 +1,24 @@
|
||||
function startTimer(duration, display) {
|
||||
var timer = duration,
|
||||
minutes,
|
||||
seconds;
|
||||
setInterval(function() {
|
||||
minutes = parseInt(timer / 60, 10);
|
||||
seconds = parseInt(timer % 60, 10);
|
||||
|
||||
minutes = minutes < 10 ? "0" + minutes : minutes;
|
||||
seconds = seconds < 10 ? "0" + seconds : seconds;
|
||||
|
||||
display.textContent = minutes + ":" + seconds;
|
||||
|
||||
if (--timer < 0) {
|
||||
timer = duration;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
document.getElementById("start-timer").addEventListener("click", () => {
|
||||
var twoMinutes = 60 * 2,
|
||||
display = document.getElementById("countdown-timer__display");
|
||||
startTimer(twoMinutes, display);
|
||||
});
|
Loading…
Reference in New Issue
Block a user