Age calculator In HTML with java scirpt
Certainly! Here's a complete example of an age calculator using HTML and JavaScript:htmlCopy code
<!DOCTYPE html> <html> <head> <title>Age Calculator</title> <style> .container { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; text-align: center; } </style> </head> <body> <div class="container"> <h2>Age Calculator</h2> <label for="birthdate">Enter your birthdate:</label> <input type="date" id="birthdate"> <button onclick="calculateAge()">Calculate</button> <p id="result"></p> </div> <script> function calculateAge() { var birthdate = document.getElementById("birthdate").value; var today = new Date(); var birthdate = new Date(birthdate); var age = today.getFullYear() - birthdate.getFullYear(); var month = today.getMonth() - birthdate.getMonth(); if (month < 0 || (month === 0 && today.getDate() < birthdate.getDate())) { age--; } document.getElementById("result").innerHTML = "Your age is: " + age; } </script> </body> </html>
In this code, we have a simple HTML structure with an input field for the birthdate, a button to calculate the age, and a paragraph to display the result. The JavaScript code defines the calculateAge() function, which retrieves the birthdate from the input field, calculates the age based on the current date, and displays the result in the designated paragraph.
The CSS styles are used to center the container and add some basic styling to the elements.
You can save this code in an HTML file and open it in a web browser to see the age calculator in action. When you select a birthdate and click the "Calculate" button, the calculated age will be displayed below.