Stopwatch Demo

July 10, 2017


The user should see the following:

  • 1. An application title labeled "Stopwatch Demo"
  • 2. A section with a timer that displays the current elapsed time to the hundredth second
  • 3. A button labeled "Start/Stop"
  • 4. A button labeled "Reset"
  • 5. A button labeled "Record Time"
  • 6. A section labeled "Past Times" that keeps a record of previously recorded times

The user should be able to do the following:

  • 1. Start and stop the timer by pressing the "Start/Stop" button.
  • 2. Start and stop the timer by pressing the 's' key.
  • 3. Record the current timer count into the Past Times section by pressing the "Record Time" button
  • 4. Record the current timer count into the Past Times section by pressing the 't' key.
  • 5. Reset the timer count to 0 and wipe all previously recorded times in the Past Times section by pressing the "Reset" button.
  • 6. Reset the timer count to 0 and wipe all previously recorded times in the Past Times section by pressing the 'r' key.

Stopwatch Demo



Past Times

JavaScript Code:

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
/* global variables */
var interval;
var start = false;
var counter = 0;

/* execute function */
setUp();

/* function definition */
function setUp() {
    let timer     = document.querySelector("#timer");
    let pastTimes = document.querySelector("#pastTimes");
    let startstop = document.querySelector("#startstop");
    let reset     = document.querySelector("#reset");
    let record    = document.querySelector("#record");
    timer.innerHTML = "0.00"; 
    startstop.addEventListener('click', function(){
        if(start){
            clearInterval(interval);
        }else{
            interval = setInterval(function(){
                counter += 0.01;
                timer.innerHTML = counter.toFixed(2); 
            }, 100);
        }         
        start = !start;
    })
    reset.addEventListener('click', function(){
        /*location.reload();*/
        clearInterval(interval);
        counter = 0;
        start = false;
        timer.innerHTML = counter.toFixed(2);
        pastTimes.innerHTML = "";
    })
    record.addEventListener('click', function(){
        pastTimes.innerHTML += counter.toFixed(2) + "<br/>";
        
    })

    document.addEventListener('keydown', function(event){

        switch (event.key) {
            case 's' :  startstop.click();
                        break;
            case 'r' :  reset.click();
                        break;
            case 't' :  record.click();
                        break;                        
        }
        
    });
}