timer/index.html at main · azs6189/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
<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
            integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
            crossorigin="anonymous" referrerpolicy="no-referrer" />
    </head>

    <body>
        <div class="timer">
            <div class="controls">
                <input id="duration" value="3" />
                <div>
                    <button id="start"><i class="fa-solid fa-play"></i></button>
                    <button id="pause"><i class="fa-solid fa-pause"></i></button>
                </div>
            </div>

            <svg class="dial">
                <!-- Perimeter = 2 * PI * r -->
                <!-- Perimeter = 2 * PI * 90 -->
                <!-- Perimeter = ~565 -->

                <!-- Border starts from the right-hand side and goes clock-wise -->
                <circle fill="transparent" stroke="green" stroke-width="15" r="190" cx="0"
                    cy="200" transform="rotate(-90 100 100)" />
            </svg>
        </div>

        <script src="timer.js"></script>
        <script src="index.js"></script>
    </body>

</html>