Anniversary Calculator in Javascript

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>


<div class="container">
  <div class="header">
    <div class="icon-container">
      <ion-icon name="heart-outline"></ion-icon>
    </div>
    <h1>Anniversary Calculator</h1>
    <p class="subtitle">Calculate your special moments and milestones</p>
  </div>

  <div class="input-section">
    <div class="form-group">
      <label for="eventName">Event Name</label>
      <div class="input-wrapper">
        <ion-icon name="gift-outline" class="input-icon"></ion-icon>
        <input type="text" id="eventName" placeholder="e.g., Wedding, First Date, Business Launch">
      </div>
      <div class="error-message" id="nameError">Please enter an event name</div>
    </div>

    <div class="form-group">
      <label for="startDate">Start Date</label>
      <div class="input-wrapper">
        <ion-icon name="calendar-outline" class="input-icon"></ion-icon>
        <input type="date" id="startDate">
      </div>
      <div class="error-message" id="dateError">Please select a valid date</div>
    </div>

    <button class="calculate-btn" onclick="calculateAnniversary()">
      <ion-icon name="calculator-outline"></ion-icon>
      Calculate Anniversary
    </button>
  </div>

  <div class="results" id="results">
    <h2 class="result-title">
      <ion-icon name="trophy-outline"></ion-icon>
      <span id="eventTitle"></span>
    </h2>

    <div class="time-grid">
      <div class="time-card">
        <div class="time-value" id="years">0</div>
        <div class="time-label">Years</div>
      </div>
      <div class="time-card">
        <div class="time-value" id="months">0</div>
        <div class="time-label">Months</div>
      </div>
      <div class="time-card">
        <div class="time-value" id="days">0</div>
        <div class="time-label">Days</div>
      </div>
      <div class="time-card">
        <div class="time-value" id="hours">0</div>
        <div class="time-label">Hours</div>
      </div>
    </div>

    <div class="next-anniversary">
      <div class="next-anniversary-title">Next Anniversary</div>
      <div class="next-anniversary-date" id="nextDate"></div>
      <div class="countdown" id="countdown"></div>
    </div>

    <div class="milestones">
      <h3 class="milestone-title">
        <ion-icon name="star-outline"></ion-icon>
        Upcoming Milestones
      </h3>
      <div id="milestonesList"></div>
    </div>
  </div>
</div>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #ff006e 0%, #ff4d94 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
        }

        .container {
            background: white;
            padding: 3rem 2.5rem;
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(255, 0, 110, 0.4);
            max-width: 600px;
            width: 100%;
            animation: slideIn 0.5s ease-out;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .header {
            text-align: center;
            margin-bottom: 2.5rem;
        }

        .icon-container {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #ff006e, #ff4d94);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(255, 0, 110, 0.4);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 0 0 15px rgba(255, 0, 110, 0);
            }
        }

        .icon-container ion-icon {
            font-size: 3rem;
            color: white;
        }

        h1 {
            color: #2c3e50;
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .subtitle {
            color: #6c757d;
            font-size: 1rem;
        }

        .input-section {
            margin-bottom: 2rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            color: #2c3e50;
            font-weight: 500;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }

        .input-wrapper {
            position: relative;
        }

        .input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.25rem;
            color: #ff006e;
        }

        input[type="text"],
        input[type="date"] {
            width: 100%;
            padding: 0.875rem 1rem 0.875rem 3rem;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            outline: none;
        }

        input[type="text"]:focus,
        input[type="date"]:focus {
            border-color: #ff006e;
            box-shadow: 0 0 0 4px rgba(255, 0, 110, 0.1);
        }

        .calculate-btn {
            width: 100%;
            padding: 1rem;
            background: linear-gradient(135deg, #ff006e, #ff4d94);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.125rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(255, 0, 110, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .calculate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 0, 110, 0.4);
        }

        .calculate-btn:active {
            transform: translateY(0);
        }

        .results {
            display: none;
            margin-top: 2rem;
            padding: 2rem;
            background: linear-gradient(135deg, rgba(255, 0, 110, 0.05), rgba(255, 77, 148, 0.05));
            border-radius: 16px;
            border: 2px solid rgba(255, 0, 110, 0.1);
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        .results.show {
            display: block;
        }

        .result-title {
            text-align: center;
            color: #ff006e;
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .time-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .time-card {
            background: white;
            padding: 1.25rem;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(255, 0, 110, 0.1);
        }

        .time-value {
            font-size: 2rem;
            font-weight: 700;
            color: #ff006e;
            margin-bottom: 0.25rem;
        }

        .time-label {
            font-size: 0.875rem;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .milestones {
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 2px solid rgba(255, 0, 110, 0.1);
        }

        .milestone-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .milestone-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.875rem 1rem;
            background: white;
            border-radius: 10px;
            margin-bottom: 0.75rem;
            box-shadow: 0 2px 10px rgba(255, 0, 110, 0.08);
            transition: all 0.3s ease;
        }

        .milestone-item:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(255, 0, 110, 0.15);
        }

        .milestone-name {
            font-weight: 500;
            color: #2c3e50;
        }

        .milestone-date {
            color: #ff006e;
            font-size: 0.875rem;
            font-weight: 600;
        }

        .next-anniversary {
            background: linear-gradient(135deg, #ff006e, #ff4d94);
            color: white;
            padding: 1.5rem;
            border-radius: 12px;
            text-align: center;
            margin-top: 1.5rem;
        }

        .next-anniversary-title {
            font-size: 0.875rem;
            opacity: 0.9;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .next-anniversary-date {
            font-size: 1.5rem;
            font-weight: 700;
        }

        .countdown {
            margin-top: 0.5rem;
            font-size: 0.95rem;
            opacity: 0.95;
        }

        .error-message {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            display: none;
        }

        .error-message.show {
            display: block;
        }

    function calculateAnniversary() {
            const eventName = document.getElementById('eventName').value;
            const startDateInput = document.getElementById('startDate').value;
            const nameError = document.getElementById('nameError');
            const dateError = document.getElementById('dateError');
            
            nameError.classList.remove('show');
            dateError.classList.remove('show');
            
            let isValid = true;
            
            if (!eventName.trim()) {
                nameError.classList.add('show');
                isValid = false;
            }
            
            if (!startDateInput) {
                dateError.classList.add('show');
                isValid = false;
            }
            
            if (!isValid) return;
            
            const startDate = new Date(startDateInput);
            const today = new Date();
            
            if (startDate > today) {
                dateError.textContent = 'Start date cannot be in the future';
                dateError.classList.add('show');
                return;
            }
            
            const diff = today - startDate;
            const totalDays = Math.floor(diff / (1000 * 60 * 60 * 24));
            const totalHours = Math.floor(diff / (1000 * 60 * 60));
            
            const years = Math.floor(totalDays / 365);
            const months = Math.floor((totalDays % 365) / 30);
            const days = Math.floor((totalDays % 365) % 30);
            
            document.getElementById('eventTitle').textContent = eventName;
            document.getElementById('years').textContent = years;
            document.getElementById('months').textContent = months;
            document.getElementById('days').textContent = days;
            document.getElementById('hours').textContent = totalHours.toLocaleString();
            
            const nextAnniversary = new Date(startDate);
            nextAnniversary.setFullYear(today.getFullYear() + (today > new Date(today.getFullYear(), startDate.getMonth(), startDate.getDate()) ? 1 : 0));
            
            document.getElementById('nextDate').textContent = nextAnniversary.toLocaleDateString('en-US', {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });
            
            const daysUntilNext = Math.ceil((nextAnniversary - today) / (1000 * 60 * 60 * 24));
            document.getElementById('countdown').textContent = `In ${daysUntilNext} days`;
            
            generateMilestones(startDate, today);
            
            document.getElementById('results').classList.add('show');
            document.getElementById('results').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }
        
        function generateMilestones(startDate, today) {
            const milestonesList = document.getElementById('milestonesList');
            milestonesList.innerHTML = '';
            
            const milestones = [
                { years: 1, name: '1st Anniversary' },
                { years: 5, name: '5th Anniversary' },
                { years: 10, name: '10th Anniversary' },
                { years: 15, name: '15th Anniversary' },
                { years: 20, name: '20th Anniversary' },
                { years: 25, name: '25th Anniversary (Silver)' },
                { years: 30, name: '30th Anniversary (Pearl)' },
                { years: 40, name: '40th Anniversary (Ruby)' },
                { years: 50, name: '50th Anniversary (Golden)' },
                { years: 60, name: '60th Anniversary (Diamond)' }
            ];
            
            let displayedCount = 0;
            
            for (const milestone of milestones) {
                const milestoneDate = new Date(startDate);
                milestoneDate.setFullYear(startDate.getFullYear() + milestone.years);
                
                if (milestoneDate > today && displayedCount < 5) {
                    const item = document.createElement('div');
                    item.className = 'milestone-item';
                    item.innerHTML = `
                        <span class="milestone-name">${milestone.name}</span>
                        <span class="milestone-date">${milestoneDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</span>
                    `;
                    milestonesList.appendChild(item);
                    displayedCount++;
                }
            }
            
            if (displayedCount === 0) {
                milestonesList.innerHTML = '<p style="text-align: center; color: #6c757d; padding: 1rem;">You\'ve reached all major milestones! 🎉</p>';
            }
        }
        
        document.getElementById('startDate').max = new Date().toISOString().split('T')[0];