<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Age Calculator</title>
    <link rel="stylesheet" href="style.css">
<style>
body {
    font-family: Arial, sans-serif;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

label {
    font-size: 16px;
    margin-right: 10px;
}

input[type="date"]#dob, input[type="date"]#ageAtDate {
    padding: 10px;
    font-size: 16px;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

h2 {
    color: #00698f;
}

a {
    text-decoration: none;
    color: #00698f;
    transition: text-decoration 0.2s ease-in-out;
}

a:hover {
    text-decoration: underline;
}

ul {
    text-align: left;
    margin: 0 auto;
    width: 50%;
    padding: 20px;
}

li {
    margin-bottom: 10px;
}
</style>
</head>
<body>
    <h1>Age Calculator</h1>
    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" required min="1900-01-01">
    <br><br>
    <label for="ageAtDate">Age at the Date of:</label>
    <input type="date" id="ageAtDate" required>
    <button onclick="calculateAge()">Calculate Age</button>
    <h2 id="result"></h2>
    <br><br>
    <p>Visit my blog: <a href="https://codecrafti.blogspot.com" target="_blank">CodeCrafti</a></p>
    <p>&copy; 2024 Babar Ali</p>
    <h3>How to Use:</h3>
    <ul>
        <li>Enter your date of birth in the "Date of Birth" field.</li>
        <li>Enter the date you want to calculate your age at in the "Age at the Date of" field.</li>
        <li>Click the "Calculate Age" button.</li>
        <li>Your age at the specified date will be displayed below.</li>
    </ul>

    <script src="script.js"></script>
<script>
function calculateAge() {
    const dob = document.getElementById('dob').value;
    const ageAtDate = document.getElementById('ageAtDate').value;
    const dobDate = new Date(dob);
    const ageAtDateDate = new Date(ageAtDate);
    const years = ageAtDateDate.getFullYear() - dobDate.getFullYear();
    const months = ageAtDateDate.getMonth() - dobDate.getMonth();
    const days = ageAtDateDate.getDate() - dobDate.getDate();
    const seconds = ageAtDateDate.getTime() - dobDate.getTime();
    if (months < 0 || (months === 0 && days < 0)) {
        years--;
    }
    const weeks = Math.floor(seconds / (7 * 24 * 60 * 60 * 1000));
    document.getElementById('result').innerHTML = `
        You are ${years} years old.<br>
        You are ${weeks} weeks old.<br>
        You are ${days} days old.<br>
        You are ${seconds} seconds old.
    `;
}
</script>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.