How to Create an Age Calculator on Your Blogger Site

<div class="age-calculator-container">
    <h2 class="title">Age Calculator</h2>
    <div class="input-group">
        <label for="birthDate">Enter Your Date of Birth:</label>
        <input type="date" id="birthDate" class="input-field" />
    </div>
    <button id="calculateBtn" class="calculate-button">Calculate Age</button>
    <div id="result" class="result-area">
        </div>
</div>

<script>
// JavaScript code will go here, after the HTML
</script>

<style>
/* Responsive Base Styles */
.age-calculator-container {
    max-width: 400px;
    margin: 30px auto;
    padding: 20px;
    border-radius: 12px;
    color: #fff;
    /* Dark Fire Crackle Background - Replace 'path/to/fire-crackles.jpg' with your image URL */
    background: #1a1a1a url('path/to/fire-crackles.jpg') no-repeat center center;
    background-size: cover;
    box-shadow: 0 10px 25px rgba(255, 69, 0, 0.4); /* Fire shadow effect */
    text-align: center;
    font-family: 'Arial', sans-serif;
    animation: fadeIn 1s ease-out; /* Simple animation */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.title {
    color: #ff4500; /* Orange-Red for fire theme */
    margin-bottom: 20px;
    font-size: 1.8em;
}

.input-group {
    margin-bottom: 25px;
    text-align: left;
}

label {
    display: block;
    margin-bottom: 8px;
    font-size: 1em;
    font-weight: bold;
}

.input-field {
    width: 100%;
    padding: 10px;
    border: 2px solid #ff8c00; /* Darker orange border */
    border-radius: 6px;
    background-color: #333; /* Dark input background */
    color: #fff;
    font-size: 1em;
    box-sizing: border-box; /* Important for responsiveness */
}

/* Stylish and Colourful Animation for Button */
.calculate-button {
    background-color: #ff4500;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.calculate-button:hover {
    background-color: #ff8c00;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.8);
}

.result-area {
    margin-top: 30px;
    padding: 15px;
    min-height: 40px;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: bold;
    color: #76ff03; /* A contrasting colour for the result */
    word-wrap: break-word;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .age-calculator-container {
        margin: 10px;
        padding: 15px;
    }
    .title {
        font-size: 1.5em;
    }
}
</style>

document.addEventListener('DOMContentLoaded', function() {
    const calculateBtn = document.getElementById('calculateBtn');
    const birthDateInput = document.getElementById('birthDate');
    const resultArea = document.getElementById('result');

    calculateBtn.addEventListener('click', calculateAge);

    function calculateAge() {
        const birthDateValue = birthDateInput.value;

        if (!birthDateValue) {
            resultArea.innerHTML = 'Please enter your date of birth.';
            return;
        }

        const today = new Date();
        const birthDate = new Date(birthDateValue);

        // Basic Age Calculation
        let age = today.getFullYear() - birthDate.getFullYear();
        const monthDiff = today.getMonth() - birthDate.getMonth();
        const dayDiff = today.getDate() - birthDate.getDate();

        // Adjust age if the birthday hasn't passed this year yet
        if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
            age--;
        }

        // Detailed output (Years, Months, Days)
        let years = age;
        let months = monthDiff;
        let days = dayDiff;

        if (days < 0) {
            months--;
            // Get number of days in the previous month
            const prevMonth = new Date(today.getFullYear(), today.getMonth(), 0);
            days += prevMonth.getDate();
        }

        if (months < 0) {
            years--;
            months += 12;
        }

        resultArea.innerHTML = `Your exact age is: **${years}** years, **${months}** months, and **${days}** days.`;

        // Optional: Add a simple crackle/flash animation to the result
        resultArea.style.animation = 'none';
        void resultArea.offsetWidth; // Trigger reflow
        resultArea.style.animation = 'crackleFlash 0.5s ease-out';
    }
});

@keyframes crackleFlash {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(118, 255, 3, 0.5); }
    50% { transform: scale(1.02); box-shadow: 0 0 20px rgba(118, 255, 3, 1); }
    100% { transform: scale(1); box-shadow: 0 0 10px rgba(118, 255, 3, 0.5); }
}