Posted inAPI Project

Best DOB Calculator Online – Calculate Age, Ideal Weight, Height & BMI Instantly!

No CommentsPosted inAPI Project

How to Create DOB Calculator – Calculate Your Age, Weight, Height & BMI Instantly!

Are you looking for an advanced DOB calculator that not only calculates your age but also provides ideal weight, height, BMI, and fitness recommendations? Our free online DOB calculator is designed to give you accurate results based on your age and gender.

🔹 Features of Our DOB Calculator

Click On Calculator
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Health & Fitness Calculator</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
      :root {
    --primary-color: #4CAF50;
    --secondary-color: #2196F3;
    --text-color: #333;
    --bg-color: #fff;
    --card-bg: #f5f5f5;
    --shadow: 0 2px 5px rgba(0,0,0,0.1);
}

[data-theme="dark"] {
    --primary-color: #66bb6a;
    --secondary-color: #42a5f5;
    --text-color: #fff;
    --bg-color: #1a1a1a;
    --card-bg: #2d2d2d;
    --shadow: 0 2px 5px rgba(255,255,255,0.1);
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color 0.3s, color 0.3s;
}

.container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 20px;
}

h1 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-color);
}

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

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

input[type="date"],
input[type="number"] {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.gender-options {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.button-group {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.calculate-btn, .refresh-btn {
    flex: 1;
    padding: 1rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.calculate-btn {
    background-color: var(--primary-color);
    color: white;
}

.refresh-btn {
    background-color: #f44336;
    color: white;
}

.calculate-btn:hover {
    background-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.refresh-btn:hover {
    background-color: #d32f2f;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.refresh-btn i {
    transition: transform 0.3s ease;
}

.refresh-btn:hover i {
    transform: rotate(180deg);
}

.result-card {
    background-color: var(--card-bg);
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.result-card.hoverable:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    opacity: 0;
    transition: opacity 0.3s;
}

.result-card:hover::before {
    opacity: 1;
}

.editable {
    padding: 0.3rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.editable:hover {
    background-color: rgba(0,0,0,0.05);
    cursor: text;
}

[data-theme="dark"] .editable:hover {
    background-color: rgba(255,255,255,0.1);
}

#detailedAdvice {
    margin-top: 1rem;
    padding: 1rem;
    border-left: 4px solid var(--primary-color);
    background-color: rgba(76, 175, 80, 0.1);
}

.advice-item {
    margin: 0.5rem 0;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.3s;
}

.advice-item:hover {
    background-color: rgba(76, 175, 80, 0.2);
    padding-left: 1rem;
}

.action-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.share-btn,
.download-btn {
    flex: 1;
    padding: 0.8rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.share-btn {
    background-color: var(--secondary-color);
    color: white;
}

.download-btn {
    background-color: var(--primary-color);
    color: white;
}

.hidden {
    display: none;
}

/* Dark Mode Toggle */
.theme-switch {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Responsive Design */
@media (max-width: 600px) {
    .container {
        padding: 0 15px;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .gender-options {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .button-group {
        flex-direction: column;
    }
}
    </style>
</head>
<body>
    <div class="theme-switch">
        <i class="fas fa-moon"></i>
        <label class="switch">
            <input type="checkbox" id="darkModeToggle">
            <span class="slider round"></span>
        </label>
    </div>

    <div class="container">
        <h1>🏃‍♂️ Health & Fitness Calculator 💪</h1>
        
        <form id="healthForm">
            <div class="form-group">
                <label for="dob">Date of Birth:</label>
                <input type="date" id="dob" required>
            </div>

            <div class="form-group">
                <label>Gender:</label>
                <div class="gender-options">
                    <input type="radio" id="male" name="gender" value="male" required>
                    <label for="male">Male</label>
                    <input type="radio" id="female" name="gender" value="female">
                    <label for="female">Female</label>
                    <input type="radio" id="other" name="gender" value="other">
                    <label for="other">Other</label>
                </div>
            </div>

            <div class="form-group">
                <label for="weight">Current Weight (kg):</label>
                <input type="number" id="weight" step="0.1" placeholder="Optional">
            </div>

            <div class="form-group">
                <label for="height">Current Height (cm):</label>
                <input type="number" id="height" step="0.1" placeholder="Optional">
            </div>

            <div class="button-group">
                <button type="submit" class="calculate-btn">Calculate Results</button>
                <button type="button" class="refresh-btn" id="refreshBtn">
                    <i class="fas fa-sync-alt"></i> Reset Form
                </button>
            </div>
        </form>

        <div id="results" class="hidden">
            <h2>Your Results 📊</h2>
            
            <div class="result-card hoverable">
                <h3>Age Details</h3>
                <p id="exactAge" class="editable" contenteditable="true"></p>
                <p id="nextBirthday"></p>
            </div>

            <div class="result-card hoverable">
                <h3>Ideal Measurements</h3>
                <p id="idealWeight" class="editable" contenteditable="true"></p>
                <p id="idealHeight" class="editable" contenteditable="true"></p>
            </div>

            <div class="result-card hoverable">
                <h3>BMI Analysis</h3>
                <p id="bmiResult" class="editable" contenteditable="true"></p>
                <p id="bmiCategory"></p>
                <p id="emojiReaction"></p>
            </div>

            <div class="result-card hoverable">
                <h3>Detailed Health Suggestions</h3>
                <p id="healthTips"></p>
                <div id="detailedAdvice"></div>
            </div>

            <div class="action-buttons">
                <button id="shareBtn" class="share-btn">
                    <i class="fas fa-share-alt"></i> Share Results
                </button>
                <button id="downloadBtn" class="download-btn">
                    <i class="fas fa-download"></i> Download Report
                </button>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script src="script.js"></script>
    <script>
      // Dark mode functionality
const darkModeToggle = document.getElementById('darkModeToggle');
darkModeToggle.addEventListener('change', () => {
    document.body.setAttribute('data-theme', darkModeToggle.checked ? 'dark' : 'light');
});

// Main form functionality
const healthForm = document.getElementById('healthForm');
const resultsDiv = document.getElementById('results');

healthForm.addEventListener('submit', (e) => {
    e.preventDefault();
    calculateResults();
});

function calculateResults() {
    // Get form values
    const dob = new Date(document.getElementById('dob').value);
    const gender = document.querySelector('input[name="gender"]:checked').value;
    const weight = parseFloat(document.getElementById('weight').value);
    const height = parseFloat(document.getElementById('height').value);

    // Calculate age details
    const ageDetails = calculateAge(dob);
    document.getElementById('exactAge').textContent = `Age: ${ageDetails.years} years, ${ageDetails.months} months, and ${ageDetails.days} days`;
    document.getElementById('nextBirthday').textContent = `Next birthday in: ${ageDetails.nextBirthday} days`;

    // Calculate ideal measurements
    const idealMeasurements = calculateIdealMeasurements(ageDetails.years, gender);
    document.getElementById('idealWeight').textContent = `Ideal Weight Range: ${idealMeasurements.weight.min}kg - ${idealMeasurements.weight.max}kg`;
    document.getElementById('idealHeight').textContent = `Ideal Height Range: ${idealMeasurements.height.min}cm - ${idealMeasurements.height.max}cm`;

    // Calculate BMI if weight and height are provided
    if (weight && height) {
        const bmiResult = calculateBMI(weight, height);
        document.getElementById('bmiResult').textContent = `Your BMI: ${bmiResult.bmi.toFixed(1)}`;
        document.getElementById('bmiCategory').textContent = `Category: ${bmiResult.category}`;
        document.getElementById('emojiReaction').innerHTML = getEmojiReaction(bmiResult.category);
        document.getElementById('healthTips').innerHTML = getHealthTips(bmiResult.category);
        
        // Add detailed advice
        document.getElementById('detailedAdvice').innerHTML = getDetailedAdvice(weight, height, bmiResult.category, gender);
    }

    resultsDiv.classList.remove('hidden');
}

function calculateAge(dob) {
    const today = new Date();
    let years = today.getFullYear() - dob.getFullYear();
    let months = today.getMonth() - dob.getMonth();
    let days = today.getDate() - dob.getDate();

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

    if (days < 0) {
        const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, dob.getDate());
        days = Math.floor((today - lastMonth) / (1000 * 60 * 60 * 24));
    }

    // Calculate days until next birthday
    const nextBirthday = new Date(today.getFullYear(), dob.getMonth(), dob.getDate());
    if (nextBirthday < today) {
        nextBirthday.setFullYear(nextBirthday.getFullYear() + 1);
    }
    const daysUntilBirthday = Math.ceil((nextBirthday - today) / (1000 * 60 * 60 * 24));

    return {
        years,
        months,
        days,
        nextBirthday: daysUntilBirthday
    };
}

function calculateIdealMeasurements(age, gender) {
    let weightRange = { min: 0, max: 0 };
    let heightRange = { min: 0, max: 0 };

    if (gender === 'male') {
        weightRange = { min: 50 + (age - 18) * 0.3, max: 70 + (age - 18) * 0.3 };
        heightRange = { min: 165, max: 185 };
    } else if (gender === 'female') {
        weightRange = { min: 45 + (age - 18) * 0.3, max: 65 + (age - 18) * 0.3 };
        heightRange = { min: 155, max: 175 };
    } else {
        weightRange = { min: 47 + (age - 18) * 0.3, max: 67 + (age - 18) * 0.3 };
        heightRange = { min: 160, max: 180 };
    }

    return {
        weight: {
            min: Math.round(weightRange.min),
            max: Math.round(weightRange.max)
        },
        height: heightRange
    };
}

function calculateBMI(weight, height) {
    const heightInMeters = height / 100;
    const bmi = weight / (heightInMeters * heightInMeters);
    let category;

    if (bmi < 18.5) category = 'Underweight';
    else if (bmi < 25) category = 'Normal Weight';
    else if (bmi < 30) category = 'Overweight';
    else category = 'Obese';

    return { bmi, category };
}

function getEmojiReaction(category) {
    const reactions = {
        'Normal Weight': '🏆 You are in great shape! Keep it up!',
        'Underweight': '🤔 You need to gain some weight for better health!',
        'Overweight': '😬 A little more exercise will keep you fit!',
        'Obese': '😱 Take action now for a healthier lifestyle!'
    };
    return reactions[category];
}

function getHealthTips(category) {
    const tips = {
        'Normal Weight': `
            <ul>
                <li>Maintain your balanced diet</li>
                <li>Continue regular exercise</li>
                <li>Stay hydrated</li>
                <li>Get adequate sleep</li>
            </ul>`,
        'Underweight': `
            <ul>
                <li>Increase calorie intake with nutrient-rich foods</li>
                <li>Add healthy snacks between meals</li>
                <li>Include protein in every meal</li>
                <li>Consider strength training</li>
            </ul>`,
        'Overweight': `
            <ul>
                <li>Monitor portion sizes</li>
                <li>Increase physical activity</li>
                <li>Choose whole foods over processed foods</li>
                <li>Stay consistent with exercise</li>
            </ul>`,
        'Obese': `
            <ul>
                <li>Consult a healthcare professional</li>
                <li>Start with walking daily</li>
                <li>Focus on whole, unprocessed foods</li>
                <li>Consider keeping a food diary</li>
            </ul>`
    };
    return tips[category];
}

function getDetailedAdvice(weight, height, bmiCategory, gender) {
    const heightInMeters = height / 100;
    const idealWeight = Math.round(22 * heightInMeters * heightInMeters);
    const weightDiff = Math.abs(weight - idealWeight);
    
    let advice = '<div class="advice-container">';
    
    // Weight-specific advice
    if (bmiCategory === 'Underweight') {
        advice += `
            <div class="advice-item">
                🍳 <strong>Diet Tips:</strong>
                <ul>
                    <li>Add ${Math.round(weightDiff * 7000 / 30)} extra calories daily to gain 1kg per month</li>
                    <li>Include healthy fats like avocados, nuts, and olive oil</li>
                    <li>Eat protein-rich foods every 3-4 hours</li>
                    <li>Try protein smoothies with fruits and nuts</li>
                </ul>
            </div>
            <div class="advice-item">
                💪 <strong>Exercise Tips:</strong>
                <ul>
                    <li>Focus on strength training 3 times per week</li>
                    <li>Limit cardio to 20 minutes per session</li>
                    <li>Try resistance band exercises</li>
                </ul>
            </div>`;
    } else if (bmiCategory === 'Overweight' || bmiCategory === 'Obese') {
        const weeklyWeightLoss = weightDiff > 20 ? 1 : 0.5;
        advice += `
            <div class="advice-item">
                🥗 <strong>Diet Tips:</strong>
                <ul>
                    <li>Reduce ${Math.round(weeklyWeightLoss * 7700 / 7)} calories daily for healthy weight loss</li>
                    <li>Drink water before meals to feel fuller</li>
                    <li>Use smaller plates to control portions</li>
                    <li>Include fiber-rich foods in every meal</li>
                </ul>
            </div>
            <div class="advice-item">
                🏃‍♂️ <strong>Exercise Tips:</strong>
                <ul>
                    <li>Start with 30 minutes of walking daily</li>
                    <li>Gradually increase to ${Math.min(Math.round(weightDiff/2 + 30), 60)} minutes</li>
                    <li>Add resistance training 2-3 times per week</li>
                    <li>Try swimming or cycling for low-impact cardio</li>
                </ul>
            </div>`;
    } else {
        advice += `
            <div class="advice-item">
                🎯 <strong>Maintenance Tips:</strong>
                <ul>
                    <li>Continue balanced diet with ${Math.round(weight * 30)} calories daily</li>
                    <li>Include variety in your meals</li>
                    <li>Stay hydrated with ${Math.round(weight * 0.033)} liters of water daily</li>
                </ul>
            </div>
            <div class="advice-item">
                🌟 <strong>Fitness Tips:</strong>
                <ul>
                    <li>Mix cardio and strength training</li>
                    <li>Try new activities to stay motivated</li>
                    <li>Get 7-9 hours of quality sleep</li>
                </ul>
            </div>`;
    }

    // Height-specific advice
    if (gender === 'male' && height < 170 || gender === 'female' && height < 160) {
        advice += `
            <div class="advice-item">
                📏 <strong>Height Optimization Tips:</strong>
                <ul>
                    <li>Ensure adequate sleep for optimal growth hormone production</li>
                    <li>Include calcium and vitamin D rich foods</li>
                    <li>Practice good posture exercises</li>
                    <li>Consider yoga or swimming for spine elongation</li>
                </ul>
            </div>`;
    }

    advice += '</div>';
    return advice;
}

// Refresh functionality
document.getElementById('refreshBtn').addEventListener('click', () => {
    // Reset form
    healthForm.reset();
    
    // Clear all result fields
    document.getElementById('exactAge').textContent = '';
    document.getElementById('nextBirthday').textContent = '';
    document.getElementById('idealWeight').textContent = '';
    document.getElementById('idealHeight').textContent = '';
    document.getElementById('bmiResult').textContent = '';
    document.getElementById('bmiCategory').textContent = '';
    document.getElementById('emojiReaction').textContent = '';
    document.getElementById('healthTips').textContent = '';
    document.getElementById('detailedAdvice').innerHTML = '';
    
    // Hide results section
    resultsDiv.classList.add('hidden');
    
    // Scroll to top of form
    healthForm.scrollIntoView({ behavior: 'smooth' });
    
    // Optional: Add a small animation to the refresh button icon
    const refreshIcon = document.querySelector('.refresh-btn i');
    refreshIcon.style.transform = 'rotate(360deg)';
    setTimeout(() => {
        refreshIcon.style.transform = 'rotate(0deg)';
    }, 300);
});

// Share functionality
document.getElementById('shareBtn').addEventListener('click', async () => {
    if (navigator.share) {
        try {
            await navigator.share({
                title: 'My Health & Fitness Results',
                text: document.getElementById('results').innerText
            });
        } catch (err) {
            console.error('Share failed:', err);
        }
    } else {
        alert('Web Share API not supported in your browser');
    }
});

// Download functionality
document.getElementById('downloadBtn').addEventListener('click', () => {
    const element = document.getElementById('results');
    const opt = {
        margin: 1,
        filename: 'health-fitness-report.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };

    html2pdf().set(opt).from(element).save();
});
    </script>
</body>
</html>
Best DOB Calculator – Calculate Your Age, Weight, Height & BMI Instantly! Are you looking for an advanced DOB calculator that not only calculates your age but also provides ideal weight, height, BMI, and fitness recommendations? Our free online DOB calculator is designed to give you accurate results based on your age and gender. 🔹 Features of Our DOB Calculator ✔️ Accurate Age Calculation (Years, Months, Days)✔️ Ideal Weight & Height Suggestion (Based on Age & Gender)✔️ BMI Calculation & Fitness Analysis✔️ Birthday Countdown – Find Your Next Birthday✔️ Emoji-Based Health Feedback (Fun & Interactive)✔️ Dark Mode & Mobile-Friendly Design✔️ Share & Download Your Health Report
Best DOB Calculator – Calculate Your Age, Weight, Height & BMI Instantly!

✔️ Accurate Age Calculation (Years, Months, Days)
✔️ Ideal Weight & Height Suggestion (Based on Age & Gender)
✔️ BMI Calculation & Fitness Analysis
✔️ Birthday Countdown – Find Your Next Birthday
✔️ Emoji-Based Health Feedback (Fun & Interactive)
✔️ Dark Mode & Mobile-Friendly Design
✔️ Share & Download Your Health Report

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *