GUI-clock-stopwatch-timer/index.htm at master · raghupviyer/GUI-clock-stopwatch-timer · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p><b><u>Clock</u></b></p>
    <div id="time-border"></div>
    <svg width="71" height="70" viewBox="0 0 71 70" fill="none" xmlns="http://www.w3.org/2000/svg" id="svg">
        <circle r="35" transform="matrix(-1 0 0 1 35 35)" fill="#FFF9EA" />
        <path
            d="M70.3536 35.3536C70.5488 35.1583 70.5488 34.8417 70.3536 34.6464L67.1716 31.4645C66.9763 31.2692 66.6597 31.2692 66.4645 31.4645C66.2692 31.6597 66.2692 31.9763 66.4645 32.1716L69.2929 35L66.4645 37.8284C66.2692 38.0237 66.2692 38.3403 66.4645 38.5355C66.6597 38.7308 66.9763 38.7308 67.1716 38.5355L70.3536 35.3536ZM35 35.5H70V34.5H35V35.5Z"
            fill="#FF0000" id="red-second-time" class="dial"/>
        <path
            d="M62.3536 35.3536C62.5488 35.1583 62.5488 34.8417 62.3536 34.6464L59.1716 31.4645C58.9763 31.2692 58.6597 31.2692 58.4645 31.4645C58.2692 31.6597 58.2692 31.9763 58.4645 32.1716L61.2929 35L58.4645 37.8284C58.2692 38.0237 58.2692 38.3403 58.4645 38.5355C58.6597 38.7308 58.9763 38.7308 59.1716 38.5355L62.3536 35.3536ZM35 35.5H62V34.5H35V35.5Z"
            fill="black" id="black-minute-time" class="dial"/>
        <path
            d="M52.3536 35.3536C52.5488 35.1583 52.5488 34.8417 52.3536 34.6464L49.1716 31.4645C48.9763 31.2692 48.6597 31.2692 48.4645 31.4645C48.2692 31.6597 48.2692 31.9763 48.4645 32.1716L51.2929 35L48.4645 37.8284C48.2692 38.0237 48.2692 38.3403 48.4645 38.5355C48.6597 38.7308 48.9763 38.7308 49.1716 38.5355L52.3536 35.3536ZM32 35.5H52V34.5H32V35.5Z"
            fill="#FAFF00" id="yellow-hour-time" class="dial"/>
    </svg>
    <br>


    <p><b><u>Stopwatch</u></b></p>
    <div id="stopwatch">0 : 0 : 0</div><br>
    <svg width="71" height="70" viewBox="0 0 71 70" fill="none" xmlns="http://www.w3.org/2000/svg" id="svg">
        <circle r="35" transform="matrix(-1 0 0 1 35 35)" fill="#FFF9EA" />
        <path
            d="M70.3536 35.3536C70.5488 35.1583 70.5488 34.8417 70.3536 34.6464L67.1716 31.4645C66.9763 31.2692 66.6597 31.2692 66.4645 31.4645C66.2692 31.6597 66.2692 31.9763 66.4645 32.1716L69.2929 35L66.4645 37.8284C66.2692 38.0237 66.2692 38.3403 66.4645 38.5355C66.6597 38.7308 66.9763 38.7308 67.1716 38.5355L70.3536 35.3536ZM35 35.5H70V34.5H35V35.5Z"
            fill="#FF0000" id="red-milisecond-stopwatch" class="dial" />
        <path
            d="M62.3536 35.3536C62.5488 35.1583 62.5488 34.8417 62.3536 34.6464L59.1716 31.4645C58.9763 31.2692 58.6597 31.2692 58.4645 31.4645C58.2692 31.6597 58.2692 31.9763 58.4645 32.1716L61.2929 35L58.4645 37.8284C58.2692 38.0237 58.2692 38.3403 58.4645 38.5355C58.6597 38.7308 58.9763 38.7308 59.1716 38.5355L62.3536 35.3536ZM35 35.5H62V34.5H35V35.5Z"
            fill="black" id="black-second-stopwatch" class="dial" />
        <path
            d="M52.3536 35.3536C52.5488 35.1583 52.5488 34.8417 52.3536 34.6464L49.1716 31.4645C48.9763 31.2692 48.6597 31.2692 48.4645 31.4645C48.2692 31.6597 48.2692 31.9763 48.4645 32.1716L51.2929 35L48.4645 37.8284C48.2692 38.0237 48.2692 38.3403 48.4645 38.5355C48.6597 38.7308 48.9763 38.7308 49.1716 38.5355L52.3536 35.3536ZM32 35.5H52V34.5H32V35.5Z"
            fill="#FAFF00" id="yellow-minute-stopwatch" class="dial" />
    </svg>

    <button id="start">start</button>
    <button id="stop">stop</button>
    <button id="reset">reset</button>
    <br>
    <br>


    <p><b><u>Timer</u></b></p>
    <span id="timer-display">0 : 0</span>
    <svg width="71" height="70" viewBox="0 0 71 70" fill="none" xmlns="http://www.w3.org/2000/svg" id="svg">
        <circle r="35" transform="matrix(-1 0 0 1 35 35)" fill="#FFF9EA" />
        <path
            d="M70.3536 35.3536C70.5488 35.1583 70.5488 34.8417 70.3536 34.6464L67.1716 31.4645C66.9763 31.2692 66.6597 31.2692 66.4645 31.4645C66.2692 31.6597 66.2692 31.9763 66.4645 32.1716L69.2929 35L66.4645 37.8284C66.2692 38.0237 66.2692 38.3403 66.4645 38.5355C66.6597 38.7308 66.9763 38.7308 67.1716 38.5355L70.3536 35.3536ZM35 35.5H70V34.5H35V35.5Z"
            fill="#FF0000" id="red-second-timer" class="dial" />
        <path
            d="M62.3536 35.3536C62.5488 35.1583 62.5488 34.8417 62.3536 34.6464L59.1716 31.4645C58.9763 31.2692 58.6597 31.2692 58.4645 31.4645C58.2692 31.6597 58.2692 31.9763 58.4645 32.1716L61.2929 35L58.4645 37.8284C58.2692 38.0237 58.2692 38.3403 58.4645 38.5355C58.6597 38.7308 58.9763 38.7308 59.1716 38.5355L62.3536 35.3536ZM35 35.5H62V34.5H35V35.5Z"
            fill="black" id="black-minute-timer" class="dial" />
    </svg>
    <span id="result"></span><BR><br>
    <input type="number" class="input" id="mins" placeholder="mins" min="0">
    <input type="number" class="input" id="secs" placeholder="secs" min="0" max="60"><br>
    <button id="timer-start-button">start</button>


    <script src="script.js"></script>
</body>
</html>