Age Calculator Code & Scripts

<?php
/*
Template Name: Age Calculator Template
*/

get_header();
?>

<style>
  /* CSS styles for the age calculator template */
  /* ...existing styles... */

  /* Age Calculator Styles */
  #age-calculator {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
  }

  #age-calculator h1 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  #age-calculator .form-group {
    margin-bottom: 20px;
  }

  #age-calculator .form-group label {
    font-size: 20px;
    font-weight: bold;
  }

  #age-calculator .form-group input[type="date"] {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 10px;
  }

  #age-calculator .form-group button {
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .info-box {
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    font-size: 18px;
    margin-bottom: 20px;
    text-align: left;
  }
</style>

<div id="age-calculator">
  <h1>Age Calculator</h1>
  <form id="calculation-form">
    <div class="form-group">
      <label for="birth-date">Enter your birth date:</label>
      <input type="date" id="birth-date" required>
    </div>
    <button type="submit">Calculate Age</button>
  </form>

  <div id="result-container"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // JavaScript code for handling user interactions
  $(document).ready(function() {
    $('#calculation-form').on('submit', function(e) {
      e.preventDefault();
      var birthDate = new Date($('#birth-date').val());
      var now = new Date();

      // Calculate the age
      var ageYear = now.getFullYear() - birthDate.getFullYear();
      var ageMonth = now.getMonth() - birthDate.getMonth();
      var ageDay = now.getDate() - birthDate.getDate();

      if (ageMonth < 0 || (ageMonth === 0 && ageDay < 0)) {
        ageYear--;
        if (ageMonth < 0) {
          ageMonth = 12 + ageMonth;
        }
        if (ageDay < 0) {
          var monthDays = new Date(now.getFullYear(), now.getMonth(), 0).getDate();
          ageDay = monthDays + ageDay;
        }
      }

      // Display the age
      var resultContainer = $('#result-container');
      resultContainer.html('<div class="info-box"><p>Your age is: ' + ageYear + ' years, ' + ageMonth + ' months, and ' + ageDay + ' days</p></div>');
    });
  });
</script>

<?php get_footer(); ?>