You will be given an HTML file, containing the markup of a timer with spans for seconds, minutes and hours and buttons to [Start] and [Pause] the timer. Your task is to create a JavaScript application that starts the timer whenever the [Start] button is pressed and pauses it when the [Pause] button is pressed.
The initial value of the timer must always be 00:00:00
HTML and JavaScript Code - You are given the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Timer</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
crossorigin="anonymous"></script>
<style>
#timer {
font-size: 5em;
}
</style>
</head>
<body>
<div id="timer">
<span id="hours" class="timer">00</span>:
<span id="minutes" class="timer">00</span>:
<span id="seconds" class="timer">00</span>
<button id="start-timer">Start</button>
<button id="stop-timer">Stop</button>
</div>
<script src="timer.js"></script>
<script>
window.onload=function(){
timer();
}
</script>
</body>
</html>
Example:
Note the spans have unique id values – we can use these to select and modify the elements with jQuery.
JavaScript has a built-in function setInterval() for executing and repeating an action after a set period of time. It returns an object which can later be used to stop the execution with clearInterval().
The first argument can be an inline declaration or a named function. The second argument is the time interval, specified in milliseconds. We can easily attach these two functions to the click event of a button.
To get and set the text of a markup element you can either use its textContent property, or jQuery’s text() function.
Keep in mind that that you should only have one setInterval() function active when the the timer is working, multiple presses of the [Start] button should not attach more setInterval() functions as that would break the correct operation of the timer.
The HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!--<script src="src/jquery-3.2.1.min.js"></script>-->
<style>
#timer {
font-size: 5em;
}
</style>
</head>
<body>
<div id="timer">
<span id="hours" class="timer">00</span>:
<span id="minutes" class="timer">00</span>:
<span id="seconds" class="timer">00</span>
<button id="start-timer">Start</button>
<button id="stop-timer">Stop</button>
</div>
<script src="timer.js"></script>
<script>
window.onload = function () {
timer();
}
</script>
</body>
</html>
JavaScript code with jQuery:
function timer() {
let hr = $('#hours');
let min = $('#minutes');
let sec = $('#seconds');
let counter = 0;
$('#start-timer').on('click', start);
$('#stop-timer').on('click', function () {
clearInterval(counter);
$('#start-timer').on('click', start);
});
function start() {
counter = setInterval(step, 1000);
$('#start-timer').off('click');
}
function step() {
sec.val(+sec.val() + 1);
if (sec.val() > 59) {
sec.val('00');
min.val(+min.val() + 1);
min.text(formatTime(min.val()));
}
if (min.val() > 59) {
min.val('00');
hr.val(+hr.val() + 1);
min.text(formatTime(min.val()));
hr.text(formatTime(hr.val()));
}
sec.text(formatTime(sec.val()));
}
function formatTime(value) {
let partial = `${('0' + value % 60).slice(-2)}`;
return partial;
}
}
