HTML-CSS-Projects/stopwatch.html at main · pratibhameher/HTML-CSS-Projects · 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
<!DOCTYPE html>
<html>
<head>
    <title>Digital Stopwatch</title>
    <script src="jquery.js"></script>
    <style>
        body{
            font-family:'Times New Roman', Times, seri;
            text-align: center;
            background-color: #222;
            color: white;
            margin-top: 100px;
        }
        h1{
            color: indianred;
        }
        div{
            background: peachpuff;
            border: 20px;
            border-radius: 15px;
            margin-left: 500px;
            margin-right: 500px;
            padding-top: 40px;
            padding-bottom: 40px;
        }
        .stopwatch{
            font-size: 50px;
            margin: 20px;
            color: indianred;
        }
        button{
            font-size: 18px;
            padding: 10px 20px;
            margin: 5px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }
        #start { background-color: green; color: white;}
        #pause { background-color: orange; color: white;}
        #reset { background-color: red; color: white;}
    </style>
    </head>
    <body>
      <div>
      <h1>Digital Stopwatch</h1>
      <div class="stopwatch">00:00:00</div>
      <button id="start">Start</button>
      <button id="pause">Pause</button>
      <button id="reset">reset</button>
      </div>
      <script>
        $(document).ready(function(){
           let hours=0;
           let minutes=0;
           let seconds=0;
           let timer;
           let running=false;

           function updateDisplay(){
            $(".stopwatch").text(
                (hours < 10 ? "0" +hours : hours)+":"+(minutes < 10 ? "0" +minutes : minutes)+":"+(seconds < 10 ? "0" +seconds : seconds));
            }

            function startTimer(){
              if(!running){
                 timer=setInterval(() =>{
                 seconds++;
                 if(seconds==60){
                   seconds=0;
                   minutes++;
                 }
                 if(minutes==60){
                    minutes=0;
                    hours++;
                 }
                 updateDisplay();
                 }, 1000);
                 running=true;
               }
            }

            function pauseTimer(){
                clearInterval(timer);
                running=false;
            }

            function resetTimer(){
                clearInterval(timer);
                houes=minutes=seconds=0;
                running=false;
                updateDisplay();
            }
            $("#start").click(startTimer);
            $("#pause").click(pauseTimer);
            $("#reset").click(resetTimer);
        });
      </script>
    </body>
</html>