challenge-21.js

/*
O desafio de hoje será um pequeno projeto: um cronômetro!
As regras para criação do cronômetro são as seguintes:
1. Crie um arquivo index.html e adicione esse script a ele;
2. Crie um campo `input` do tipo `text`, e inicie-o com um valor 0 (zero).
Ele será o nosso cronômetro;
3. Crie 3 botões para as ações do cronômetro: Start, Stop e Reset;
4. Ao clicar em Start, o valor do campo deve ser incrementado de 1 em 1, a
cada segundo;
5. Ao clicar em Stop, o cronômetro deve parar de contar;
6. Ao clicar em Reset, o cronômetro deve zerar e parar de contar.

Utilize o atributo data-js para nomear o campo e os botões. Você pode
usar o nome que achar melhor, desde que ele seja semântico, ou seja, o nome
dado ao elemento HTML deve definir o que o elemento é ou o que ele faz.
*/
(function( doc ) {
    'use strict';

    // Variables
    var timerId;
    var timerAction = {
        start: start,
        stop: stop,
        reset: reset
    };

    var $display = doc.querySelector('[data-timer="display"]');
    var $buttons = doc.querySelectorAll('[data-timer-action]');

    // Events
    $buttons.forEach(function($button) {
        var action = $button.dataset.timerAction;

        if( !isActionValid(action) ) return;

        $button.addEventListener('click', function() {
            exec( action );
        }, false);
    });

    // Methods
    function isActionValid( action ) {
        return timerAction[action];
    }

    function exec( action ) {
        timerAction[action]();
    }

    function start() {
        incrementCounter();
        showCounterInDisplay();
        timerId = setTimeout( start, 1000 );
    }

    function incrementCounter() {
        counter++;
    }

    function stop() {
        clearTimeout( timerId );
    }

    function reset() {
        stop();
        resetCounter();
        showCounterInDisplay();
    }

    function resetCounter() {
        counter = 0;
    }

    function showCounterInDisplay() {
        $display.value = counter;
    }

})( document );