How to Create an Age Calculator with HTML, CSS, and JavaScript

Published on June 22, 2024

Hello everyone, welcome back to our YouTube channel! Today, we’re going to learn how to create a simple yet effective Age Calculator using HTML, CSS, and JavaScript. By the end of this tutorial, you’ll be able to build your own front-end age calculator to determine anyone’s age based on their date of birth.

Have you ever wondered how to calculate someone’s age quickly? Well, with this age calculator, you won’t need to figure it out anymore manually. Whether you’re building a website, learning frontend development, or just want to add a useful tool to your projects, this tutorial is for you.

Let’s start by setting up the basic structure of our Age Calculator. We have a simple HTML file here, which includes a heading saying “Age Calculator“, a label prompting users to enter their date of birth, an input field for the date, a button to trigger the calculation, and a placeholder for the result.

The HTML structure consists of a container div to hold our elements neatly. Inside, we have a heading tag indicating the title of our page, followed by a label and an input field where users can enter their date of birth. Then, we have a button labelled “Calculate Age” which users will click to initiate the calculation process. Lastly, we have a div where the calculated age will be displayed.

Although we won’t focus much on styling in this tutorial, you can always add CSS to enhance the visual appeal of your age calculator. Feel free to customise the look and feel according to your preferences and project requirements.

Now, let’s dive into the JavaScript part, where all the magic happens. We’ll write the logic to calculate the age based on the entered date of birth.

First, we need to select the input field and the button from the HTML document using JavaScript. We’ll then add an event listener to the button so that when it’s clicked, our calculation function will be triggered.

Next, we’ll define the calculation function. Inside this function, we’ll retrieve the date of birth entered by the user, calculate the age based on the current date, and display the result in the designated area on the webpage.

CSS

Let’s move on to the CSS part to design our Age Calculator and make it visually appealing. In this segment, we’ll add styles to our HTML elements using CSS to enhance the overall look and feel of our calculator.

Starting with the asterisk selector, we’re setting the font-family to Arial, Helvetica, sans-serif for all elements on the page, ensuring consistent typography throughout.

Moving on to the .container class, we’re defining the width, padding, margins, text alignment, background colour, border radius, and box shadow to create a centred and visually pleasing container for our calculator.

The h1 tag styling includes setting the colour to a dark shade, increasing the font size, and adding some bottom margin for spacing.

For the input[type=”date”] selector, we’re specifying the width, padding, margins, border, and font size to create an input field that’s large enough for easy interaction and fits well within the container.

Similarly, we’re styling the label with a larger font size, white colour, and capitalised text to make it stand out against the background.

The button styling involves setting padding, background colour, text colour, border, cursor, font size, font weight, and border-radius to create a visually appealing and clickable button for our users. Additionally, we’re changing the background colour on hover to provide visual feedback.

Lastly, we’re styling the #result div with margin-top and font-size properties to position the result text below the button and ensure it’s easily readable.

Java Script

Now, let’s move on to the JavaScript part to give our Age Calculator its functionality. In this segment, we’ll write the necessary code to calculate the age based on the date of birth entered by the user.

Starting with $(document).ready(function(){…}), we’re ensuring that our JavaScript code executes only after the HTML document has been fully loaded. This helps prevent any issues with accessing elements that haven’t been rendered yet.

Inside the click event handler for the #calculateAge button, we’re retrieving the value of the date of birth entered by the user using jQuery’s $(“#dob”).val(). We then convert this value into a Date object.

Next, we create a new Date object representing the current date and time.

We calculate the age in years, months, and days by subtracting the year, month, and day components of the date of birth from the current date. If the calculated months or days are negative, we adjust them accordingly to ensure accurate age calculation.

Finally, we update the #result div with the calculated age, formatted as “Your age is [years] years, [months] months, and [days] days”, inside a styled box for better presentation.

And finally, let’s add one more last line to our script to test our application and ensure everything is working smoothly.

We’ll enter a date of birth, click the “Calculate Age” button, and verify that the calculated age is displayed accurately in the designated area on the webpage.

With our Age Calculator fully functional and tested, we’ve successfully created a simple yet effective front-end application using HTML, CSS, and JavaScript. I hope you found this tutorial helpful and that you can now implement similar functionalities in your own projects. Thank you for joining me on this coding journey, and don’t forget to like, share, and subscribe for more tutorials like this. Happy coding!