How To Build Age Calculator App Using HTML CSS And JavaScript

Learn How To Build Age Calculator App Using HTML CSS And JavaScript | Age Calculator JavaScript Project

In this video we will make an Age Calculator app with the help of HTML, CSS and JavaScript. This age calculator app has one data input box, where it display the calendar to pick date of birth. after selecting date of birth click on calculate button then it will display the exact age till today.
This age calculator app will display the exact age in years, months and days.
#JavaScriptProject

-----------------------------------------
Suggested Course:

❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate

-------------------------------------
Recommended Videos:

Learn Complete HTML and CSS from basics:

Make A Complete Website for college using HTML & CSS:

How to make a Business website step by step:

How to make personal resume website step by step:

How to make fitness website design using HTML CSS:

How to make an Ecommerce Website Design:

How to make a Job Portal website design with HTML & CSS:

How to make travel website design with HTML CSS Bootstrap:

-------------------------------------

Affordable web hosting (coupon- EASYTUTORIALS)

My recommended tools and tutorials

-------------------------------------

◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:

-------------------------------------
Connect with me:

[islamicfinance]

For those like me who did not understand the JS code of line 22:
Here's a step-by-step breakdown:
1. new Date().toISOString(): new Date() creates a new JavaScript Date object representing the current date and time.
.toISOString() converts the Date object to a string in ISO format, which looks like this: "YYYY-MM-DDTHH:mm:ss.sssZ". This format includes the date, time, and timezone information.

2. .split("T"): .split("T") is a method that splits the string into an array of substrings using the "T" character as the separator. After the split, you get an array with two elements: the date part before "T" and the time part after "T".


3. [0]: [0] retrieves the first element of the array, which is the date part.

4. "userInput.max = ...": userInput refers to an HTML input element, likely of type "date".
The .max attribute sets the maximum allowed value for the date input.

Putting it all together, the line of code sets the maximum date for the input element to the current date. It extracts the date part from the ISO string format and assigns it to the max attribute. This ensures that users cannot select a date beyond the current date when using the input field. (thanks to chatGPT for the explanation)

[bmscodehub]

thanks alot for being a life saver of self taught web developer

[anmolyadav]

This types of projects are beneficial for us beginners. Can't thank you enough!

[icyzenax]

Big fan Bro You Are Genious in Your Skills

[iftyrahman]

Hello Avinash, Bro next time make a shopping cart tutorial.

[sachinkundu]

Thanks for video can you please upload search functionality with js .. search ..

[ugyenofficial]

I cannot leave without thanking you for your free and great resources

[Applecitylightkiwi]

people always said hey man use date api in js, date methods in js is a headache, now i understand why

[sanjanasoni]

Thanku so much for uploading this it's grt 🙏

[CollegeNotes]

Hello Mr. Easy Tutorials!
I really appreciate this project tutorial and all the work you put into it. Huge thanks for your efforts!

In my implementation I wanted to change the 'days' to 'day' when d3 === 1, and the same with months and years, so I did this slight adjustment creating variables with a ternary operator to pluralise these words whenever the value was not exactly equal to 1:

let pluralDays = d3 !== 1 ? "days" : "day";
let pluralMonths = m3 !== 1 ? "months" : "month";
let pluralYears = y3 !== 1 ? "years" : "year";

then the template literal was:

result.innerHTML = `You are <span>${y3}</span> ${pluralYears}, <span>${m3}</span> ${pluralMonths} and <span> ${d3}</span> ${pluralDays} old.`;

Just thought I'd post this here in case anyone else was thinking the same thing!

Many thanks,
David

[NinjaPro]

UZBEKISTAN, HELLO BROTHER I LOVE YOU

[maryamheidari]

Hi thanks for great video
But my text align is not exactly under the box, why?

[chargeff]

Hey guys please help me, : : is not working. Displaying small date input in the browser

[niranjanvanka]

Hello sir make javascript tutorial
Why because in your project we are suffering to understand the js code

[AnkushKumar-pxdp]

hey bro after creating the webkit in css my date icon shifted to left side.. please help me out

[Papang]

How about the result will be in the input box?

[deepayadav]

Why the js part not working does anyone know

[dreamer]

My calendar button is in the format of mm/dd/yyyy and calculate button also not working. If anybody knows let me know guys.

[the_sky_fire]

For me the .input-box is not working I don' t know why. When I searched it said it depends on browser or something. We need to add additional things for this to work.

If anyone found this working please reply me back. Thank you in advance

[Karimi.]

hello bro build a search bar with html css and javascript