Create Age Calculator Tool Website Using ChatGPT

How to Create Age Calculator Tool Website Using ChatGPT

by

Age Calculator Is free tool website that can calculate your age using your Date of Birth and Current Date or specific date for which you can check. It help you to easily and fast calculate your age in year, month, weeks, days and minutes correctly. You have to just Provide your DOB and select last date for which you can check.

Crating this type tool website is very easy but not at all, but if you can do it your self. But today i will provide you complete code. you can just upload it on your website and it will start working. In this post i will provide you html, css and java code, just copy and paste in your wordpress blog. if you have little knowledge of Coding you can enhance and change the code according to your choice.

The purpose of the website, titled “Age Calculator,” is to allow users to input their Date of Birth and calculate their age in various time units, including years, months, weeks, days, hours, minutes, and seconds. This website serves as a simple tool for users who are curious about their age in different time intervals.

The website’s main features and functionality are as follows:

  1. Input Birthdate: Users can enter their birthdate using a date picker input field.
  2. Calculate Age: By clicking the “Calculate Age” button, the website calculates the user’s age based on the entered birthdate and the current date.
  3. Display Results: The calculated age is displayed in a structured format within the “result” section, showing the age in years, months, weeks, days, and more.

The website’s purpose is primarily educational and for simple information retrieval. It can be used by individuals who want to quickly determine their age in various time units without having to perform manual calculations. However, it’s worth noting that the age calculations provided are approximate, as they do not take into account factors like leap years and varying month lengths, so they may not be entirely accurate for all use cases.

 

Html Code

				
					<!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;
            text-align: left;
        }
        #calculator {
            margin: 20px auto;
            max-width: 600px;
            padding: 20px;
            background-color: #f4f4f4;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .verybigtext {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="calculator">
        <h1>Age Calculator</h1>
        <label for="birthdate">Enter your birthdate:</label>
        <input type="date" id="birthdate">
        <button onclick="calculateAge()">Calculate Age</button>
        <div id="result" class="verybigtext">
            <b>Age:</b><br>
            <p id="ageDisplay"></p>
        </div>
    </div>

    <script>
        function calculateAge() {
            const birthdate = new Date(document.getElementById("birthdate").value);
            const currentDate = new Date();
            const ageInMilliseconds = currentDate - birthdate;
            
            const ageInSeconds = Math.floor(ageInMilliseconds / 1000);
            const ageInMinutes = Math.floor(ageInSeconds / 60);
            const ageInHours = Math.floor(ageInMinutes / 60);
            const ageInDays = Math.floor(ageInHours / 24);
            const ageInWeeks = Math.floor(ageInDays / 7);
            const ageInMonths = Math.floor(ageInDays / 30.44); // Approximate number of days in a month
            const ageInYears = Math.floor(ageInDays / 365.25); // Approximate number of days in a year

            const ageText = `
                ${ageInYears} years 0 months 0 days<br>
                or ${ageInMonths} months 0 days<br>
                or ${ageInWeeks} weeks ${ageInDays % 7} days<br>
                or ${ageInDays} days<br>
                or ${ageInHours} hours<br>
                or ${ageInMinutes} minutes<br>
                or ${ageInSeconds} seconds
            `;

            document.getElementById("ageDisplay").innerHTML = ageText;
        }
    </script>
</body>
</html>

CSS Code

				
					body {
    font-family: Arial, sans-serif;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
}

main {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

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

input[type="text"] {
    width: 80%;
    padding: 10px;
}

button {
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

.result {
    text-align: center;
}

h2 {
    font-size: 24px;
    margin-top: 20px;
}

p#generated-domain {
    font-size: 18px;
}

Leave a comment