defuse-the-bom.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Defuse the BOM</title>
</head>
<body>

<h2 id="message">This BOM will self destruct in <span id="timer"></span> seconds...</h2>
<button id="defuser">Defuse the BOM</button>

<script>
(function() {
    "use strict";


    var detonationTimer = 10;

    // TODO: This function needs to be called once every second
    var interval = 1000;

    var TimerId = setInterval(function updateTimer() {
        if (detonationTimer === 0) {
            alert('EXTERMINATE!');
            document.body.innerHTML = '';
        } else if (detonationTimer > 0) {
            document.getElementById('timer').innerHTML = detonationTimer;
        }

        detonationTimer-=2;
    }, interval);

    console.log(TimerId);


    // TODO: When this function runs, it needs to
    // cancel the interval/timeout for updateTimer()
    function defuseTheBOM() {
        clearInterval(TimerId);
    }

    // Don't modify anything below this line!
    //
    // This causes the defuseTheBOM() function to be called
    // when the "defuser" button is clicked.
    // We will learn about events in the DOM lessons
    var defuser = document.getElementById('defuser');
    defuser.addEventListener('click', defuseTheBOM);
})();
</script>
</body>
</html>