minute_timer/index.html at main · abel8260/minute_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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Basic tags for character encoding, viewport settings, and title -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
    <!-- Basic tags END -->

    <!-- SEO tags for description, keywords, and author -->
    <meta name="description" content="clock for time, Timer. Basic timer."/>
    <meta name="keywords" content="time, watch time, minute timer"/>
    <meta name="author" content="abel vb"/>
    <!-- SEO tags END -->

    <!-- Favicon tags for different formats -->
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <link rel="icon" href="./favicon.png" type="image/png">
    <!-- Favicon tags END -->

    <!-- Open Graph tags for social media sharing -->
    <meta property="og:title" content="Minute timer" />
    <meta property="og:type" content="timer" />
    <meta property="og:url" content="https://abel8260.github.io/minute_timer/" />
    <meta property="og:image" content="https://abel8260.github.io/minute_timer/ogimg.png" />
    <!-- Open Graph tags END -->

    <!-- CSS styles for the timer display -->
    <style>
        /* Style for the timer display */
        #timer {
            /* Set font size to 2em for larger display */
            font-size: 2em;
            /* Set font family to Arial, fallback to sans-serif */
            font-family: Arial, sans-serif;
            /* Use flexbox to center content */
            display: flex;
            justify-content: center;
            align-items: center;
            /* Set height to 80% of the viewport height */
            height: 80vh;
            /* Remove default margins */
            margin: 0;
            /* Set background color to a light grey */
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <!-- Header section containing the timer display -->
    <header>
        <div id="timer">01:00</div>
    </header>

    <!-- Footer section with author information -->
    <footer>
        <p>Author: Made with AI</p>
        <p>Edit BY: Abel VB</p>
        <p>Alt: A figure icon, the 4 pieces of a chess table. 4 whites and 2 black circles. 2 of these whites had a center circles black.</p>
    </footer>

    <!-- JavaScript for the countdown timer functionality -->
    <script>
        // Initial time in seconds
        let time = 60;
        // Get the timer element from the DOM
        const timerElement = document.getElementById('timer');

        // Function to update the timer every second
        const countdown = setInterval(() => {
            if (time <= 0) {
                // Clear the interval when the countdown is over
                clearInterval(countdown);
                // Alert the user that the countdown is over
                alert("The count is over!");
            } else {
                // Decrease the time by one second
                time--;
                // Calculate minutes and seconds
                const minutes = Math.floor(time / 60);
                const seconds = time % 60;
                // Update the timer display with leading zeros if necessary
                timerElement.textContent =
                    (minutes < 10 ? '0' : '') + minutes + ':' +
                    (seconds < 10 ? '0' : '') + seconds;
            }
        }, 1000); // Repeat every second (1000 milliseconds)
    </script>
</body>
</html>