countdown/app.js at master · hackastory/countdown · GitHub

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
'use strict';

var sound = new Audio('stop.mp3');
var countdownTime = 60;
var isCounting = false;
var $logo = $("#logo");
var $text = $("#text");
var $body = $("body");
var $times = $$("[data-time]");

function $(selector) {
    return document.querySelector(selector);
}

function $$(selector) {
    return [].slice.call(document.querySelectorAll(selector));
}

function reset() {
    $body.className = "";
    $logo.className = "";
    $text.innerHTML = 'GO';
}

function timeup() {
    isCounting = false;
    $body.className = "timeup";
    $text.innerHTML = "TIME UP";
    sound.currentTime = 0;
    sound.play();
}

function setup() {
    $logo.onclick = function() {
        isCounting = false;
        reset();
    }

    $text.onclick = function() {
        countdown();
    }

    $times.forEach(function(time) {
        time.onclick = function(e) {
            var time = e.target.getAttribute('data-time');
            countdownTime = time;
            $text.innerHTML = countdownTime / 60;
            console.log('Setting time to ' + time);
        }
    })
}

function countdown() {
    $body.className = "";
    isCounting = true;
    var then = +new Date();

    function anim() {
        var now = +new Date();
        var diff = countdownTime - Math.round( (now - then) / 1000);
        $text.innerHTML = diff;

        if (diff < 1) {
            $logo.className = "";
            timeup();
        } else if (isCounting) {
            $logo.className = "pulse";
            requestAnimationFrame(anim);
        } else {
            reset();
        }

    }

    anim();
}

setup();
reset();