Overview
This prompt aims to guide users in creating a functional age calculator using HTML and JavaScript. Programmers and coding enthusiasts will benefit from this structured approach to building interactive web applications.
Prompt Overview
Purpose: This code provides a user-friendly age calculator for determining age from a date of birth.
Audience: It is designed for individuals seeking to quickly calculate their age online.
Distinctive Feature: The calculator displays age in years, months, and days for detailed results.
Outcome: Users receive an accurate age calculation displayed clearly on the webpage.
Quick Specs
- Media: HTML, JavaScript
- Use case: Age calculation tool
- Techniques: Form handling, Date manipulation
- Models: HTML, JavaScript
- Estimated time: 30 minutes
- Skill level: Beginner
Variables to Fill
- [font-family: Arial, sans-serif;] – Font Family: Arial, Sans Serif;
- [yearDiff] – Yeardiff
- [months] – Months
- [days] – Days
Example Variables Block
- [yearDiff]: 25
- [months]: 3
- [days]: 12
The Prompt
Create HTML code for an age calculator. The calculator should allow a user to input a date of birth and display the calculated age in years, months, and days.
# Steps
1. HTML Structure:
– Design the form to capture the user’s input, specifically the date of birth.
– Use appropriate input types for capturing the date.
– Include a submit button to trigger the calculation.
2. JavaScript Logic:
– On submission, read the input value.
– Calculate the age by comparing the current date to the date of birth.
– Break down the resulting age into years, months, and days.
3. Display the Result:
– Show the computed age back to the user.
– Ensure the result is presented in a clear and readable format below the input form.
# Output Format
– Provide an HTML file structure with inline JavaScript that functions correctly as a standalone webpage.
– Ensure functionality is self-contained with no external dependencies.
# Example
“`html
Age Calculator
body [font-family: Arial, sans-serif;]
.container [max-width: 300px; margin: auto; text-align: center; padding: 50px;]
# Calculate Your Age
Enter your date of birth:
##
function calculateAge() {
var dob = document.getElementById(‘dob’).value;
if (!dob) {
document.getElementById(‘result’).innerText = “Please enter your date of birth.”;
return;
}
var dobDate = new Date(dob);
var today = new Date();
var age = today.getFullYear() – dobDate.getFullYear();
var monthDiff = today.getMonth() – dobDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dobDate.getDate())) {
age--;
}
var yearDiff = age;
// Calculate months
var months = monthDiff < 0 ? 12 + monthDiff : monthDiff;
if (today.getDate() = dobDate.getDate() ? today.getDate() – dobDate.getDate() : new Date(today.getFullYear(), today.getMonth(), 0).getDate() – dobDate.getDate() + today.getDate();
document.getElementById(‘result’).innerText = `You are $[yearDiff] years, $[months] months, and $[days] days old.`;
}
“`
Screenshot Examples
How to Use This Prompt
- “`html
- Age Calculator
- Calculate Your Age
- Enter your date of birth:
- “`
Tips for Best Results
- Use Semantic HTML: Ensure you use appropriate HTML elements like , , and for better accessibility.
- Validate Input: Always check if the date of birth is valid before performing calculations to avoid errors.
- Clear Output: Display the result in a user-friendly format, making it easy to read and understand.
- Responsive Design: Use CSS to ensure the age calculator looks good on various devices, enhancing user experience.
FAQ
- What is the purpose of an age calculator?
An age calculator determines a person's age based on their date of birth. - What input type is used for the date of birth?
The input type used is 'date', allowing users to select a date easily. - How does the calculator display the age?
It shows the age in years, months, and days below the input form. - What language is used for the calculator's logic?
JavaScript is used to perform calculations and update the displayed age.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
