year-progress/index.html at main · IvanVnucec/year-progress · 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
<!DOCTYPE html>
<html lang="en" style="color-scheme: dark;">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,">
    <title id="title">Year Progress</title>
</head>

<body style="display: flex; justify-content: center; text-align: center;">
    <div style="position: absolute; top: 20%">
        <h1 style="font-size: 3em;">Year Progress</h1>
        <div style="margin: 50px 0;">
            <span id="current-year" style="margin-right: 10px;"></span>
            <progress id="progress-bar" max="100" style="width: 45vw; max-width: 300px;"></progress>
            <span id="next-year" style="margin-left: 10px;"></span>
            <div id="percent" style="font-size: 1.0em; margin-top: 3px;"></div>
        </div>
    </div>
    <div style="font-size: 9pt; position: absolute; bottom: 0; margin-bottom: 1em;">Made by: Ivan Vnučec, <a
            href="https://github.com/IvanVnucec/year-progress">GitHub</a>, 2023</div>

    <script>
        document.onload = updateProgress();
        setInterval(updateProgress, 1000);

        function updateProgress() {
            const currentDate = new Date();
            const currentYear = currentDate.getFullYear();
            const startOfYear = new Date(currentYear, 0, 1, 0, 0, 0, 0);
            const endOfYear = new Date(currentYear, 11, 31, 23, 59, 59, 999);
            const totalTime = endOfYear.getTime() - startOfYear.getTime();
            const timeElapsed = currentDate.getTime() - startOfYear.getTime();
            const percentRemaining = (timeElapsed / totalTime) * 100.0;

            document.getElementById("title").innerHTML = 'Year Progress: ' + percentRemaining.toFixed(2) + ' %';
            document.getElementById("current-year").innerHTML = currentYear;
            document.getElementById("next-year").innerHTML = currentYear + 1;
            document.getElementById("progress-bar").value = percentRemaining;
            document.getElementById("percent").innerHTML = percentRemaining.toFixed(5) + ' %';
        }
    </script>
</body>

</html>