How To Build Age Calculator App Using HTML CSS And JavaScript

[@islamicfinance001]

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)

[@saurabhvlogssss0001]

thanku brother for explaining

[@DanielDaniel-ce1vg]

Bless u bro

[@victorylab2525]

Thanks Alot

[@zeissgaming9181]

Awesome ❤

[@Applecitylightkiwi]

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

[@anmolyadav7105]

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

[@rajbarua7785]

bruh what is your skill level right now???

[@almudrikal9528]

@@rajbarua7785 why you asking that

[@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 ${y3} ${pluralYears}, ${m3} ${pluralMonths} and ${d3} ${pluralDays} old.`; Just thought I'd post this here in case anyone else was thinking the same thing! Many thanks, David

[@abdullahbinmamun3803]

good job

[@bmscodehub]

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

[@iftyrahman2239]

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

[@ugyenofficial]

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

[@gomeztorricellygomez7808]

I nailed it,works like charm to me

[@niranjanvanka376]

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

[@cart0_0n24]

everything is great except your explanations ... please explain how syntax are working

[@shifteditz06]

Hey guys please help me, : : -webkit-calender-picker-indicator is not working. Displaying small date input in the browser

[@steff18]

.input-box input::-webkit-calendar-picker-indicator This is the correct way of spelling it. ( calendar is with an 'a' and not an 'e' ) :)

[@maryamheidari3110]

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

[@sachinkundu2427]

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

[@Kiran23456]

Untill i become boss you are my boss

[@akanimoekong1817]

I'm grateful for your lessons, but I have a problem with the WebKit-calender-picker-indicator. It does not seems to be effective on my output. There is no positive response. The should be an indicator of I touch the date on my browser, but nothing changes. please help!

[@mirzatahataha2467]

same issue it also looking very small

[@GGARIN.C.R]

Bro it may happen due to browser incompatible

[@OlaRsk]

Maybe you miss the "-" at the beginning

[@Mentor_Makhdoom_Shorts]

it is -webkit-calendar-picker-indicator check the starting...

[@manjeet0768]

Set type="date"

[@spsanidhya283]

Thank You that was an easy tutorial.

[@andystar444]

love the work keep it up boss💯🙏

[@icyzenax2501]

Big fan Bro You Are Genious in Your Skills

[@sanjanasoni1043]

Thanku so much for uploading this it's grt 🙏

[@Wideshorts-]

sir it's displaying 'you are ${y3} years, ${m3} months, ${d3} days old' instead of 3 years, 4months, 3 days old for example.

[@JessieAstra]

same here bro. have you seen a solution to that?

[@Wideshorts-]

@@JessieAstra yes call the function and change the command in printf as your wish to come

[@vishalrajput8231]

Bro use template literal == `` `` , Ye vale nahi == ' '

[@DavidMunyagwa]

​@@Wideshorts-am receiving the same error 😢what can I do

[@physical_information]

very good teching style i like it sir

[@AnkushKumar-px9dp]

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

[@T0BC00N]

add the spaces around the minus(-) in the background-position line... calc(100% - 10px);

[@subramanyam681]

@@T0BC00N Thank you for clearing my doubt too bro

[@Tech_with_heart-yt]

My output is showing you are y3 years, m3 months and d3 days old am not getting tthe correct output when i click the calculate button

[@NinjaPro3]

UZBEKISTAN , HELLO BROTHER I LOVE YOU

[@DavidMunyagwa]

hello everyone, thanks a lot but i have a problem why is that i receive 'You are ${y3} years, ${m3} months and ${d3} days old'; when i try to run the web page Age calculator,

[@KardanKaaal]

Today's date is the 12th of August but it is showing the 11th of August. What to do ?

[@Kai-Ming05]

Bro everything is fine but when i add js then whatever i input in the calendar it shows 0 what to do next please help 🥺

[@Papang209]

How about the result will be in the input box?

[@ARJUN_030]

Big fan anna❤

[@konstantinreut2577]

Great job, sir!

[@dreamer7084]

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

[@syedanas4186]

Did you add the onlick function on button?

[@the_sky_fire]

For me the .input-box input::-webkit-calendar-picker-indicator 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

[@bilalmuneer877]

Calc (100% - 10px) us mines ka agay or pichy space doo phr sahi ho gy ga

[@Z_Rokhri]

What is the reason for not showing my results?

[@mvb873]

Same it's showing in the console but not in para

[@nihalnic]

I think you are Using ( " ) or( ' ) quota, That's why your code is not working. Use (`) this one and see Magic 😂 Btw sorry for my bad English🙂 im still learning😁

[@NoumanEjaz-x3r]

mine is not shown even in console @@mvb873

[@MewANtics]

new Date() is not showing up as a method for me and I have no clue why.

[@manjeshsingh3002]

Thanks brother 🙏

[@c_h_a_n_dra630]

my calculate button is not working .what should i do?

[@Muhammar_Rabbi]

you can make video on urdu/hindi language plx

[@harshasharma5103]

Hello It is not showing anything in console box I have put yr code same but there is nothing

[@amshovon1125]

Hello, I am watching video and try to code run but problem is don't show calculate years, month, days ,, result show 0days, 0month , 0years....How can i solve this problem??? Please help me. Thank you

[@tahashahid4186]

if you get the solution plz share with me.

[@ayoubbelmouche8818]

i think you wroned in "let d2 = today.getDate()" i guess you write "let d2 = birthDate.getDate()" the same case for m2 and y2

[@ichigo23984]

Like the tutorial 💚

[@ShivaMGupta-go1on]

my problem is userInput.max its not supported show type error line 23

[@vahazbade]

Like the tutorial 👌

[@Karimi.1380]

hello bro build a search bar with html css and javascript

[@CodeWithBalaji]

it will fix error if there is no dob selected: if (isNaN(y3) || isNaN(m3) || isNaN(d3)) { result.innerHTML = `Please select your DOB`; } else { result.innerHTML = `You are ${y3} years, ${m3} months and ${d3} days old`; }

[@laibaishfaq5564]

thank you sir

[@Mohsenkardani]

thank you

[@Depstechinsight]

Why the js part not working does anyone know

[@flyflor599]

excellent

[@Naina_is_not_working]

.input-box input::-webkit-calendar-picker-indicator ----- this is not working for firefox Solution: try to open in another browser and also check the calc()

[@FloriRosenbaum]

it says nan bcause the console.log doesnt wort but i dunt know why

[@jamesjordon-vq4cw]

Keep it up❤

[@Pcmagzine]

How to make freelance website like fiverr

[@sarakhansarakhan792]

Ye jo date ko calculate krny ka code likha iski smjh ni ai sir

[@_vickyy]

Date not showing..

[@ramyakantipudi4634]

My result is showing in console but not after adding result.innerHTML. why can you please tell me whats the wrong

[@monk_widom]

Me to .... solution?

[@josefigarola5402]

In the html file, you have to add the p tag to display the text then create the variable result that'll change the output after result.innerHTML let result = document.getElementById("result"); This should work :)

[@neelumarif568]

Please show full code I did but button is not working

[@josefigarola5402]

Probably you forgot the event listener at the end of the js script userInput.addEventListener("input", calculateAge);

[@OlaRsk]

Can anyone pls explain the last block of code? Line 56-59

[@RadwanBenmoussa-n6t]

Where can I found codes

[@salehabdullah-lt7fk]

Can somebody explain to me this part of the line below ".split("T")[0];" userInput.max = new Date().toISOString().split("T")[0]; and this function : function getDaysInMonths(year, month){ return new Date(year, month, 0).getDate(); } Thanks.

[@mohi7109]

it's my question too.

[@salehabdullah-lt7fk]

@@mohi7109 kindly let me know when you have an idea about it.

[@17-4-4]

reply if u find it

[@shivanshurawat2309]

@salehabdullah-lt7fk .max signify that the maximum value that should be set and not beyond it . new Date() is refering to the object made of the current date which include something like this 2024-07-23T10:20:30.000Z.Then toISOstring() converts this into string like "2024-07-23T10:20:30.000Z" and then split("T") separate this into different string array elements like ["2024-07-23", "10:20 ",..] and then lastly index 0 is called so it will take "2024-07-23"]

[@salehabdullah-lt7fk]

@@shivanshurawat2309 Thanks for replying

[@lukekoletsios3236]

thanks

[@GreatStackDev]

you are welcome Koletsios!

[@pranavrhegde1851]

js part is not working

[@farhanalikhan2912]

::-webkit-calender-picker-indicator not working can somebody help?

[@AstroPlus_]

Type it manually

[@sheikhrasel854]

Wow! ❤❤❤

[@komal8917]

My code is not working..in console result is showing 0 0 0

[@kimayagupta8982]

you might have added birthDate values for d2, m2, y2. I also did it by mistake. Assign these values : let d2 = today.getDate(); let m2 = today.getMonth() + 1; let y2 = today.getFullYear();

[@tahashahid4186]

bro JavaScript code is not working you must need to see.

[@baqigamer0]

It's working bro

[@webninjadev]

it is not working properly

[@Z_Rokhri]

My calculate button isn't working, bro

[@Epic_stickman90]

Check if you spelled the name on the onclick right & make sure you have () in front of it

[@zirconia1205]

For me, it was undefined. My problem was the Let result = .document.getElementById After I erase the . In '.document', it worked.

[@josefigarola5402]

i had to add userInput.addEventListener("input", calculateAge); at the end of my js file

[@tonsomar-coder]

Wanna Collab? 💙

[@RohitSingh-yw7rg]

-webkit-calendar-picker-indicator not working

[@MyGamingEra]

Same bro

[@lautaroalegria1427]

@@MyGamingEra because you are using it on firefox, it only support in chrome

[@RohitSingh-yw7rg]

@@lautaroalegria1427 Yes

[@aryaganguly632]

Chrome me bhi nahi horaha

[@iamankusingh]

❤❤

[@mohi7109]

Can somebody explain to me this part of the line below: ....} else { m3--; d3 = getDaysInMonth(y1, m1) + d2 - d1; } if (m3 < 0) { m3 = 11; y3--; } function getDaysInMonth(year, month) { return new Date(year, month, 0).getDate(); }

[@17-4-4]

pls explain

[@sushantlimbu4953]

atleast give sourse code

[@mohsin_maqbool]

This is not mobile-responsive

[@anjalikhare2297]

Code not working

[@surafelfikadu4331]

... 💚💛❤🙏

[@YashGuruModsoffical]

Bhai kis chij ki jaldi h tujhe itni jaldi jaldi type kr leta h fir smjhane Beth jata h ,aur tujhe samjhana bi to nhi ata dhang se , agr koi Banda tere channel pr kuch sikhne aa rha h iska mtlb usko jaldi nhi h kisi chij ki vo aram se time nikal kr Sikh rha h kam se kam fast to Mt kr video ko , smjhana to ata nhi tujhe to dheere dheere hi likh bol bol kr taki hm khud se smjh ske .

[@Kim-d2u]

24 oct 23

[@Kim-d2u]

11 nov 23

[@satyamverma8286]

i don't like your videos i am having lot of issue in date picker option you should explain more

[@anjinethmi6459]

It's working. Try calc(100%) instead of calc(100% - 10px). Not related to time object. This is the where only that I get an error

[@MyGamingEra]

::-webkit-calendar-picker-indicator not working 🥲

[@petermwansa4890]

Thank you

[@GreatStackDev]

You're welcome