Untitled

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Días Vividos y Faltantes para 80 Años</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        .container {
            display: grid;
            grid-template-columns: repeat(50, 20px);
            grid-gap: 5px;
            width: 90%;
            max-width: 1000px;
            margin: auto;
        }
        .day {
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        .tick {
            color: green;
        }
    </style>
</head>
<body>
    <div class="container" id="daysContainer"></div>

    <script>
        const fechaNacimiento = new Date(2002, 9, 25); // Octubre es 9 porque los meses empiezan en 0
        const fecha80Anios = new Date(fechaNacimiento.getFullYear() + 80, fechaNacimiento.getMonth(), fechaNacimiento.getDate());
        const fechaActual = new Date();
        const diasTotales = Math.floor((fecha80Anios - fechaNacimiento) / (1000 * 60 * 60 * 24));
        const diasVividos = Math.floor((fechaActual - fechaNacimiento) / (1000 * 60 * 60 * 24));

        const container = document.getElementById('daysContainer');

        for (let i = 0; i < diasTotales; i++) {
            const dayDiv = document.createElement('div');
            dayDiv.classList.add('day');
            if (i < diasVividos) {
                dayDiv.innerHTML = '&#10003;'; // Tick symbol
                dayDiv.classList.add('tick');
            }
            container.appendChild(dayDiv);
        }

        console.log(`Días vividos: ${diasVividos}`);
        console.log(`Días faltantes: ${diasTotales - diasVividos}`);
    </script>
</body>
</html>
Editor is loading...