🎂 Boost Visitor Engagement with a Free Age Calculator Widget

<div id="age-calculator-widget" style="max-width:400px; margin:20px auto; padding:20px; border:1px solid #ddd; border-radius:8px; font-family:Arial,sans-serif; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
  <h3 style="text-align:center; color:#007bff; margin-top:0;">Age Calculator</h3>
  <label for="widget-birthdate" style="display:block; margin-bottom:8px; font-weight:600; color:#555; font-size:14px;">Enter Your Date of Birth:</label>
  <input type="date" id="widget-birthdate" style="width:100%; box-sizing: border-box; padding:10px; margin-bottom:15px; border:1px solid #ddd; border-radius:4px;">
  <button onclick="calculateWidgetAge()" style="width:100%; padding:12px; background:#007bff; color:white; border:none; border-radius:4px; cursor:pointer; font-size: 16px;">Calculate Age</button>
  <div id="widget-result" style="margin-top:15px; text-align:center; font-weight:bold; color:#333;"></div>
  <p style="text-align:center; font-size:12px; margin-top:15px; margin-bottom: 0;">
    <a href="https://whatsmyage.site" target="_blank" rel="noopener noreferrer" style="color:#007bff; text-decoration:none;">Powered by WhatsmyAge.site</a>
  </p>
</div>

<script>
function calculateWidgetAge() {
  // Self-contained calculation logic
  function calculateAgeInternal(birthDate, targetDate) {
    let years = targetDate.getFullYear() - birthDate.getFullYear();
    let months = targetDate.getMonth() - birthDate.getMonth();
    let days = targetDate.getDate() - birthDate.getDate();
    if (days < 0) {
      months--;
      const prevMonth = new Date(targetDate.getFullYear(), targetDate.getMonth(), 0);
      days += prevMonth.getDate();
    }
    if (months < 0) {
      years--;
      months += 12;
    }
    return { years, months, days };
  }
  
  const birthDateInput = document.getElementById('widget-birthdate').value;
  if (!birthDateInput) {
    document.getElementById('widget-result').innerHTML = 'Please enter a valid birth date';
    return;
  }
  
  const birthDate = new Date(birthDateInput);
  const today = new Date();
  
  if (birthDate >= today) {
    document.getElementById('widget-result').innerHTML = 'Birth date must be in the past.';
    return;
  }

  const age = calculateAgeInternal(birthDate, today);
  document.getElementById('widget-result').innerHTML = 
    `You are ${age.years} years, ${age.months} months, and ${age.days} days old.`;
}
</script>