counters/calendar.html at main · alosk256/counters · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label>
        Weekday:
        <select id="weekday">
            <option value="0">Sunday</option>
            <option value="1">Monday</option>
            <option value="2">Tuesday</option>
            <option value="3">Wednesday</option>
            <option value="4">Thursday</option>
            <option value="5">Friday</option>
            <option value="6">Saturday</option>
        </select>
    </label>
    <label>
        Year:
        <input type="number" id="year" min="1" max="9999" value="2026">
    </label>
    <h2 id="count"></h2>
    <ul id="dates"></ul>
    <script>
        // References to the form controls and output elements
        const weekdaySelect = document.getElementById('weekday');
        const yearInput = document.getElementById('year');
        const countDisplay = document.getElementById('count');
        const datesList = document.getElementById('dates');

        // Calculate and display the selected weekday occurrences for the chosen year
        function updateCalendar() {
            const weekday = parseInt(weekdaySelect.value, 10); // selected day of week (0-6)
            const year = parseInt(yearInput.value, 10); // selected year user
            let count = 0; // number of matching weekdays in the year
            let dates = []; // list of matching dates in MM/DD format

            // Loop through each month of the selected year, and each day of that month
            for (let month = 0; month < 12; month++) {
                const daysInMonth = new Date(year, month + 1, 0).getDate();
                for (let day = 1; day <= daysInMonth; day++) {
                    // Check whether this date falls on the selected weekday and add them to the dates array
                    if (new Date(year, month, day).getDay() === weekday) {
                        count++;
                        dates.push(`${month + 1}/${day}`);
                    }
                }
            }

            // Update summary text to show the count and weekday name
            countDisplay.textContent = `There are ${count} ${weekdaySelect.options[weekday].text}s in ${year}.`;
            // Render the list of matching dates
            datesList.innerHTML = dates.map(date => `<li>${date}</li>`).join('');
        }

        // Recalculate whenever the weekday selection changes
        weekdaySelect.addEventListener('change', updateCalendar);
        // Recalculate whenever the year input changes
        yearInput.addEventListener('input', updateCalendar);

        // Initial render on page load
        updateCalendar();
    </script>
</body>
</html>