Age & Birthday Countdown Calculator

<div class="age-card">
  <h2><i class="fas fa-birthday-cake"></i> Age Calculator</h2>
  
  <div class="dob-input-group">
    <label>Select Date of Birth:</label>
    <input type="date" id="dob-input" value="2000-01-15">
    <button id="calc-age-btn" class="btn-calc-age">Calculate Age</button>
  </div>

  <div class="results-grid" id="age-results">
    <div class="result-box main-age">
      <span class="num" id="res-years">26</span>
      <span class="lbl">Years</span>
    </div>
    <div class="result-box">
      <span class="num" id="res-months">2</span>
      <span class="lbl">Months</span>
    </div>
    <div class="result-box">
      <span class="num" id="res-days">6</span>
      <span class="lbl">Days</span>
    </div>
  </div>

  <div class="extra-stats">
    <div class="stat-line">
      <span>Next Birthday:</span>
      <strong id="next-bday-days">114 Days Left</strong>
    </div>
    <div class="stat-line">
      <span>Zodiac Sign:</span>
      <strong id="zodiac-sign">Capricorn ♑</strong>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
  background: #0f172a;
  color: #f8fafc;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.age-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 24px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.age-card h2 { font-size: 1.3rem; color: #f43f5e; margin-bottom: 20px; text-align: center; }
.dob-input-group label { display: block; font-size: 0.85rem; color: #94a3b8; margin-bottom: 6px; }
.dob-input-group input { width: 100%; padding: 12px; background: #0f172a; border: 1px solid #334155; border-radius: 10px; color: #f8fafc; font-size: 1rem; outline: none; margin-bottom: 12px; }
.btn-calc-age { width: 100%; background: #f43f5e; color: #ffffff; border: none; padding: 12px; border-radius: 10px; font-weight: 700; cursor: pointer; margin-bottom: 24px; }
.results-grid { display: flex; gap: 10px; margin-bottom: 20px; }
.result-box { flex: 1; background: #0f172a; border: 1px solid #334155; border-radius: 14px; padding: 14px 8px; text-align: center; }
.result-box.main-age .num { color: #f43f5e; }
.result-box .num { font-size: 1.8rem; font-weight: 800; color: #38bdf8; display: block; }
.result-box .lbl { font-size: 0.75rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; }
.extra-stats { background: #0f172a; border-radius: 12px; padding: 14px; border: 1px solid #334155; font-size: 0.9rem; }
.stat-line { display: flex; justify-content: space-between; margin-bottom: 8px; color: #94a3b8; }
.stat-line:last-child { margin-bottom: 0; }
.stat-line strong { color: #f8fafc; }

const dobInput = document.getElementById('dob-input');
const calcBtn = document.getElementById('calc-age-btn');
const resYears = document.getElementById('res-years');
const resMonths = document.getElementById('res-months');
const resDays = document.getElementById('res-days');
const nextBdayDays = document.getElementById('next-bday-days');
const zodiacSign = document.getElementById('zodiac-sign');

function getZodiac(month, day) {
  const signs = [
    { name: 'Capricorn ♑', endDay: 19 },
    { name: 'Aquarius ♒', endDay: 18 },
    { name: 'Pisces ♓', endDay: 20 },
    { name: 'Aries ♈', endDay: 19 },
    { name: 'Taurus ♉', endDay: 20 },
    { name: 'Gemini ♊', endDay: 20 },
    { name: 'Cancer ♋', endDay: 22 },
    { name: 'Leo ♌', endDay: 22 },
    { name: 'Virgo ♍', endDay: 22 },
    { name: 'Libra ♎', endDay: 22 },
    { name: 'Scorpio ♏', endDay: 21 },
    { name: 'Sagittarius ♐', endDay: 21 },
    { name: 'Capricorn ♑', endDay: 31 }
  ];
  return day <= signs[month].endDay ? signs[month].name : signs[(month + 1) % 12].name;
}

function calculateAge() {
  const dobVal = dobInput.value;
  if (!dobVal) return;

  const dob = new Date(dobVal);
  const now = new Date();

  let years = now.getFullYear() - dob.getFullYear();
  let months = now.getMonth() - dob.getMonth();
  let days = now.getDate() - dob.getDate();

  if (days < 0) {
    months--;
    const prevMonth = new Date(now.getFullYear(), now.getMonth(), 0);
    days += prevMonth.getDate();
  }
  if (months < 0) {
    years--;
    months += 12;
  }

  resYears.textContent = Math.max(0, years);
  resMonths.textContent = Math.max(0, months);
  resDays.textContent = Math.max(0, days);

  // Next birthday calculation
  let nextBday = new Date(now.getFullYear(), dob.getMonth(), dob.getDate());
  if (nextBday < now) {
    nextBday.setFullYear(now.getFullYear() + 1);
  }
  const diffDays = Math.ceil((nextBday - now) / (1000 * 60 * 60 * 24));
  nextBdayDays.textContent = `${diffDays} Day${diffDays === 1 ? '' : 's'} Left`;

  zodiacSign.textContent = getZodiac(dob.getMonth(), dob.getDate());
}

calcBtn.addEventListener('click', calculateAge);
calculateAge();