java/lesson12_timer.html at master · avtohem/java · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Getting Started wiht JAVA Script</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
    body, .jumbotron {padding:30px;}

    .timer {
      font-size: 120px;
    }
    </style>

  </head>

  <body>

  .<div class="jumbotron text-center">

    <!--timer -->
    <div class="timer">

      <span class = "minutes">00</span>:<span class ="seconds">00</span>

    </div>

    <!-- timer buttons -->
    <div class="timer-buttons">
      <button class="btn btn-lg btn-success" data-action="start">Start</button>
      <button class="btn btn-lg btn-danger" data-action="stop">Stop</button>
      <button  class="btn btn-link btn-block" data-action = "reset">Reset</button>

    </div>

  </div>

    <script>
      //grab everything we need
      const startButton =document.querySelector('[data-action = "start"]');
      const stopButton =document.querySelector('[data-action = "stop"]');
      const resetButton =document.querySelector('[data-action = "reset"]');
      const minutes = document.querySelector('.minutes');
      const seconds = document.querySelector('.seconds');
      let timerTime = 0;
      let interval;
      let isRunning= false;


      //difine functions

      function startTimer() {
        if (isRunning) return;

        isRunning = true;

        interval = setInterval(incrementTimer, 1000);
      };

      function stopTimer() {
        if (!isRunning) return;
        isRunning = false;
        clearInterval(interval);
      };

      function resetTimer() {
        stopTimer();
        timerTime = 0;
        minutes.innerText = 'XX'
        seconds.innerText = 'XX'
      };


      function pad(number){
        return (number < 10) ? '0' + number : number;
      }

      function incrementTimer(){

          timerTime++;
          const numberOfMinutes = Math.floor(timerTime / 60);
          const numOfSeconds = timerTime % 60;

          minutes.innerText = pad(numberOfMinutes);
          seconds.innerText = pad(numOfSeconds);

      }
      //add event listeneers

      startButton.addEventListener('click', startTimer);
      stopButton.addEventListener('click', stopTimer);
      resetButton.addEventListener('click', resetTimer);

    </script>


  </body>
</html>