Lent Count down

by akmiecik

HTML

<div class="countdown-container" id="countdown-container"></div>

CSS

body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        .countdown-container {
            display: flex;
            margin-left: 1vw;
        }

        .countdown-dot {
            width: 2vw;
            height: 2vw;
            margin-right: 1vw;
            background-color: violet;
            border: 2px solid white;
            border-radius: 50%;
        }

        .sunday {
            background-color: white;
        }

JavaScript

// Calculate the start date (Wednesday) 47 days before Easter
const currentDate = new Date();
const easterSunday = new Date(currentDate.getFullYear(), 3, 4); // Assuming Easter Sunday is April 4 in 2021
const startDate = new Date(easterSunday);
startDate.setDate(easterSunday.getDate() - 47);

// Adjust the start date to be Wednesday (day 3 of the week)
startDate.setDate(startDate.getDate() - (startDate.getDay() - 3 + 7) % 7);

// Log the start date to the console
console.log('Start Date:', startDate.toDateString());

// Create countdown dots for all 47 days
const countdownContainer = document.getElementById('countdown-container');
for (let i = 0; i < 47; i++) {
    const dot = document.createElement('div');
    const currentDate = new Date(startDate);
    currentDate.setDate(startDate.getDate() + i);

    // Check if the date has not passed
    if (currentDate >= currentDate) {
        const dayOfWeek = currentDate.getDay();

        // Check if it's a Sunday or within the first week
        dot.classList.add('countdown-dot', (dayOfWeek === 0 || (i < 4 && dayOfWeek !== 3)) ? 'sunday' : 'violet');
        countdownContainer.appendChild(dot);
    }
}