How to Make an Age Calculator with the Help of ChatGPT

Are you searching to make an Age Calculator with the help of ChatGPT and you want some help creating Age Calculator using ChatGPT then don’t worry because Here I will explore from scratch to build an Age calculator using ChatGPT

You already know that people are using ChatGPT to create tools in a very fast way and then why we will not use it

Do you know? I have created too many tools using ChatGPT so I can try to help you to create an Age Calculator tool using ChatGPT

To Create an Age calculator using HTML, CSS, and javascript follow our steps that will help you to create an awesome Age Calculator

  • First, go to https://chat.openai.com/ and log in to use ChatGPT
  • Now Enter give below prompts
    • Create an Age calculator using javascript, html, and CSS that shows the exact Age of a person with years months, and days and it should be responsive
  • Now you will see your code from ChatGPT just copy and paste where you want to use it

The age Calculator code using my ChatGPT prompt is given below

<!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>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            width: 100%;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .input-section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        label {
            flex: 1;
        }

        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .result {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Age Calculator</h1>
        <div class="input-section">
            <label for="birthdate">Enter your birthdate:</label>
            <input type="date" id="birthdate">
            <button onclick="calculateAge()">Calculate Age</button>
        </div>
        <div class="result" id="result">
            <!-- Age result will be displayed here -->
        </div>
    </div>
    <script>
        function calculateAge() {
            const birthdateInput = document.getElementById("birthdate");
            const birthdate = new Date(birthdateInput.value);
            const today = new Date();

            if (birthdate >= today) {
                alert("Invalid birthdate. Please select a date before today.");
                return;
            }

            const age = calculateAgeFromDate(birthdate, today);
            displayResult(age);
        }

        function calculateAgeFromDate(birthdate, today) {
            let ageYears = today.getFullYear() - birthdate.getFullYear();
            let ageMonths = today.getMonth() - birthdate.getMonth();
            let ageDays = today.getDate() - birthdate.getDate();

            if (ageDays < 0) {
                ageMonths--;
                ageDays += daysInMonth(today.getMonth() - 1, today.getFullYear());
            }

            if (ageMonths < 0) {
                ageYears--;
                ageMonths += 12;
            }

            return { years: ageYears, months: ageMonths, days: ageDays };
        }

        function daysInMonth(month, year) {
            return new Date(year, month + 1, 0).getDate();
        }

        function displayResult(age) {
            const resultElement = document.getElementById("result");
            resultElement.innerHTML = `<p>Your exact age is:</p>
            <p>${age.years} years, ${age.months} months, and ${age.days} days</p>`;
        }
    </script>
</body>
</html>

Age calculator screenshot

Leave a Comment