-
Notifications
You must be signed in to change notification settings - Fork 76
/
Copy path12-stopwatch.html
95 lines (79 loc) · 2.36 KB
/
12-stopwatch.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Getting Started with JavaScript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body, .jumbotron { padding: 30px; }
.timer {
font-size: 120px;
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<!-- timer -->
<div class="timer">
<span class="minutes">00</span> : <span class="seconds">00</span>
</div>
<!-- timer buttons -->
<div class="timer-buttons">
<button class="btn btn-lg btn-success" data-action="start">
Start
</button>
<button class="btn btn-lg btn-danger" data-action="stop">
Stop
</button>
<button class="btn btn-link btn-block" data-action="reset">
Reset
</button>
</div>
</div>
<!-- 🔥🔥🔥🔥 start javascript 🔥🔥🔥🔥 -->
<script>
const startButton = document.querySelector('[data-action="start"]');
const stopButton = document.querySelector('[data-action="stop"]');
const resetButton = document.querySelector('[data-action="reset"]');
const minutes = document.querySelector('.minutes');
const seconds = document.querySelector('.seconds');
let timerTime = 00;
let isRunning = false;
let interval;
function startTimer() {
if (isRunning) return;
isRunning = true;
interval = setInterval(incrementTimer, 1000);
}
function stopTimer() {
if (!isRunning) return;
isRunning = false;
clearInterval(interval);
}
function resetTimer() {
stopTimer();
timerTime = 0;
minutes.innerText = '00';
seconds.innerText = '00';
}
function incrementTimer() {
timerTime++;
const numOfMinutes = Math.floor(timerTime / 60);
const numOfSeconds = timerTime % 60;
minutes.innerText = pad(numOfMinutes);
seconds.innerText = pad(numOfSeconds);
}
function pad(number) {
return (number < 10) ? '0' + number : number;
// if (number < 10) {
// return '0' + number;
// } else {
// return number;
// }
}
startButton.addEventListener('click', startTimer);
stopButton.addEventListener('click', stopTimer);
resetButton.addEventListener('click', resetTimer);
</script>
</body>
</html>