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)
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
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!
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😁
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
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
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,
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 :)
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`; }
.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()
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();
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.
@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"]
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 .
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(); }
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 ❤
people always said hey man use date api in js, date methods in js is a headache, now i understand why
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
thanks alot for being a life saver of self taught web developer
Hello Avinash, Bro next time make a shopping cart tutorial.
I cannot leave without thanking you for your free and great resources
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' ) :)
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
I nailed it,works like charm to me
Untill i become boss you are my boss
How about the result will be in the input box?
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"
everything is great except your explanations ... please explain how syntax are working
very good teching style i like it sir
Big fan Bro You Are Genious in Your Skills
Thank You that was an easy tutorial.
love the work keep it up boss💯🙏
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
Hi thanks for great video
But my text align is not exactly under the box ,why?
Thanks for video can you please upload search functionality with js .. search ..
UZBEKISTAN , HELLO BROTHER I LOVE YOU
Today's date is the 12th of August but it is showing the 11th of August. What to do ?
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
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 🥺
Hello sir make javascript tutorial
Why because in your project we are suffering to understand the js code
new Date() is not showing up as a method for me and I have no clue why.
my calculate button is not working .what should i do?
Big fan anna❤
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 It is not showing anything in console box I have put yr code same but there is nothing
Great job, sir!
Thanks brother 🙏
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,
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?
Thanku so much for uploading this it's grt 🙏
my problem is userInput.max its not supported show type error line 23
Like the tutorial 💚
Like the tutorial 👌
Why the js part not working does anyone know
you can make video on urdu/hindi language plx
Date not showing..
excellent
it says nan bcause the console.log doesnt wort but i dunt know why
thank you
Keep it up❤
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 :)
thank you sir
hello bro build a search bar with html css and javascript
js part is not working
How to make freelance website like fiverr
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`;
}
.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()
Ye jo date ko calculate krny ka code likha iski smjh ni ai sir
it is not working properly
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);
Wow! ❤❤❤
thanks
you are welcome Koletsios!
Wanna Collab? 💙
::-webkit-calender-picker-indicator not working can somebody help?
Type it manually
Can anyone pls explain the last block of code?
Line 56-59
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
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();
bro JavaScript code is not working you must need to see.
It's working bro
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
-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
Code not working
❤❤
This is not mobile-responsive
atleast give sourse code
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 .
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
... 💚💛❤🙏
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 🥲
Thank you
You're welcome