How To Build Age Calculator App Using HTML CSS And JavaScript
ฝัง
- เผยแพร่เมื่อ 26 ก.ย. 2024
- Learn How To Build Age Calculator App Using HTML CSS And JavaScript | Age Calculator JavaScript Project
❤️ SUBSCRIBE: goo.gl/tTFmPb
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
👉 easytutorialsp...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialsp...
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ 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:
► / @greatstackdev
-------------------------------------
Connect with me:
👉 linktr.ee/iama...
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)
thanku brother for explaining
Bless u bro
Thanks Alot
Awesome ❤
This types of projects are beneficial for us beginners. Can't thank you enough!
bruh what is your skill level right now???
@@rajbarua7785 why you asking that
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
good job
people always said hey man use date api in js, date methods in js is a headache, now i understand why
Hey guys please help me, : : -webkit-calender-picker-indicator is not working. Displaying small date input in the browser
.input-box input::-webkit-calendar-picker-indicator
This is the correct way of spelling it.
( calendar is with an 'a' and not an 'e' ) :)
Hello Avinash, Bro next time make a shopping cart tutorial.
thanks alot for being a life saver of self taught web developer
love the work keep it up boss💯🙏
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!
same issue it also looking very small
Bro it may happen due to browser incompatible
Maybe you miss the "-" at the beginning
it is -webkit-calendar-picker-indicator check the starting...
Set type="date"
I cannot leave without thanking you for your free and great resources
I nailed it,works like charm to me
Thank You that was an easy tutorial.
Thanku so much for uploading this it's grt 🙏
hey bro after creating the webkit in css my date icon shifted to left side.. please help me out
add the spaces around the minus(-) in the background-position line... calc(100% - 10px);
@@T0BC00N Thank you for clearing my doubt too bro
Thanks for video can you please upload search functionality with js .. search ..
very good teching style i like it sir
Hi thanks for great video
But my text align is not exactly under the box ,why?
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,
Big fan Bro You Are Genious in Your Skills
My calendar button is in the format of mm/dd/yyyy and calculate button also not working. If anybody knows let me know guys.
Did you add the onlick function on button?
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
Calc (100% - 10px) us mines ka agay or pichy space doo phr sahi ho gy ga
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
if you get the solution plz share with me.
i think you wroned in "let d2 = today.getDate()" i guess you write "let d2 = birthDate.getDate()" the same case for m2 and y2
Hello sir make javascript tutorial
Why because in your project we are suffering to understand the js code
Big fan anna❤
new Date() is not showing up as a method for me and I have no clue why.
What is the reason for not showing my results?
Same it's showing in the console but not in para
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😁
mine is not shown even in console
@@mvb873
Great job, sir!
Today's date is the 12th of August but it is showing the 11th of August. What to do ?
Thanks brother 🙏
Untill i become boss you are my boss
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 🥺
Like the tutorial 👌
UZBEKISTAN , HELLO BROTHER I LOVE YOU
Hello It is not showing anything in console box I have put yr code same but there is nothing
Like the tutorial 💚
everything is great except your explanations ... please explain how syntax are working
Why the js part not working does anyone know
thank you sir
my problem is userInput.max its not supported show type error line 23
How about the result will be in the input box?
thank you
it says nan bcause the console.log doesnt wort but i dunt know why
My result is showing in console but not after adding result.innerHTML. why can you please tell me whats the wrong
Me to .... solution?
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 :)
excellent
sir it's displaying 'you are ${y3} years, ${m3} months, ${d3} days old' instead of 3 years, 4months, 3 days old for example.
same here bro. have you seen a solution to that?
@@JessieAstra yes call the function and change the command in printf as your wish to come
Bro use template literal == `` `` ,
Ye vale nahi == ' '
@@Wideshorts-am receiving the same error 😢what can I do
Date not showing..
you can make video on urdu/hindi language plx
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.
it's my question too.
@@mohi7109 kindly let me know when you have an idea about it.
reply if u find it
@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"]
@@shivanshurawat2309 Thanks for replying
Keep it up❤
Ye jo date ko calculate krny ka code likha iski smjh ni ai sir
My code is not working..in console result is showing 0 0 0
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();
thanks
you are welcome Koletsios!
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`;
}
Can anyone pls explain the last block of code?
Line 56-59
hello bro build a search bar with html css and javascript
::-webkit-calender-picker-indicator not working can somebody help?
Type it manually
Wow! ❤❤❤
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 .
How to make freelance website like fiverr
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();
}
pls explain
Please show full code I did but button is not working
Probably you forgot the event listener at the end of the js script
userInput.addEventListener("input", calculateAge);
it is not working properly
.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()
❤❤
-webkit-calendar-picker-indicator not working
Same bro
@@MyGamingEra because you are using it on firefox, it only support in chrome
@@lautaroalegria1427 Yes
Chrome me bhi nahi horaha
My calculate button isn't working, bro
Check if you spelled the name on the onclick right & make sure you have () in front of it
For me, it was undefined. My problem was the
Let result = .document.getElementById
After I erase the . In '.document', it worked.
i had to add userInput.addEventListener("input", calculateAge); at the end of my js file
bro JavaScript code is not working you must need to see.
It's working bro
Code not working
Wanna Collab? 💙
This is not mobile-responsive
atleast give sourse code
24 oct 23
11 nov 23
i don't like your videos i am having lot of issue in date picker option you should explain more
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
::-webkit-calendar-picker-indicator not working 🥲
my calculate button is not working .what should i do?
Thank you
You're welcome