-
Notifications
You must be signed in to change notification settings - Fork 5
/
countdown.jade
79 lines (61 loc) · 2.25 KB
/
countdown.jade
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
extends base
block vars
- var title = 'Countdown Clock'
block styles
link(rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inconsolata")
link(rel="stylesheet" type="text/css" href="styles/countdown.css")
block body
.timer
.timer__controls
- var times = [20, 300, 900, 1200, 3600]
- var status = ["20 Secs", "Work 5", "Quick 15", "Snack 20", "Lunch Break"]
each timer, index in times
button.timer__button(data-time="#{timer}")= status[index]
form(name="customForm" id="custom")
input(type="text" name="minutes" placeholder="Enter Minutes")
.display
h1.display__time-left
p.display__end-time
script(type="text/javascript").
let countdown
const $timerDisplay = document.querySelector('.display__time-left')
const $endTime = document.querySelector('.display__end-time')
const $buttons = document.querySelectorAll('[data-time]')
function timer(seconds) {
clearInterval(countdown)
const now = Date.now()
const then = now + seconds * 1000
displayTimeLeft(seconds)
displayEndTime(then)
countdown = setInterval(() => {
const secondsLeft = Math.round((then - Date.now()) / 1000)
if (secondsLeft < 0) {
clearInterval(countdown)
return
}
displayTimeLeft(secondsLeft)
}, 1000)
}
function displayTimeLeft(seconds) {
const minutes = Math.floor(seconds / 60)
const remainderSeconds = seconds % 60;
const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`
document.title = display
$timerDisplay.textContent = display
}
function displayEndTime(timestamp) {
const end = new Date(timestamp)
const hour = end.getHours()
const minutes = end.getMinutes()
$endTime.textContent = `Be Back At ${hour > 12 ? hour - 12 : hour}:${minutes < 10 ? '0' : ''}${minutes}`
}
function startTimer() {
timer(parseInt(this.dataset.time))
}
$buttons.forEach($button => $button.addEventListener('click', startTimer))
document.customForm.addEventListener('submit', function(e) {
e.preventDefault()
const mins = this.minutes.value;
timer((mins * 60))
this.reset()
})