🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details ➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder 🟪 Follow me on Instagram and u will clear your interview 🤓 - instagram.com/roadsidecoder/
I had my machine coding round yesterday and the interviewer asked me to code this otp functionality. He was super impressed and I got selected in the technical round, next is hr round. Thanks dude for making this awesome content. Wish I had even 50% of the knowledge you have then I would be a superhero like you
@@RoadsideCoder Bro I have a doubt, in this video, at 4:00 , You just clicked on PhoneOtpForm, and then it got imported in the code, how can we do it bro, which extension bro?
Me : there is no way i will get asked these tricky js questions in my interview but lets watch roadsidecoder js interview questions anyway, 95% of the questions were from your videos lol , thanks a lot
Awesome tutorial! I'm new to React and I followed along in Typescript and had no problems. Very good explanation of why you use particular methods/patterns in certain situations! btw, you jump scared me with the Instagram sponsor 🤣
@H_NileshKumar Neither TypeScript nor JavaScript is strictly better for React development in all cases. But it has its advantages, like type safety and better IDE support (autocompletion, etc.). So, for more complex projects, I will use Typescript, and for fast prototyping, I'll go with Javascript. But again, it's also a preference.
Hey you are awesome 🙌….your channel is so underrated 😢…..thanks for this great content and try making a playlist of you developing complex only react projects ❤…..you gained a sub 🎉
I didn't try it, so correct me if I am wrong. If we are using "tab" button to move b/w components, the "onClick" won''t trigger. So maybe we should run the cursor positioning function on "onFocus"?
onKeyDown event is not working as expected. when i click backspace, the cursor still remains on the same input and when i again click backspace it goes to the previous input and automatically delete that otp. Instead, onKeyUp works perfectly fine in my code. why this happening?
bhai esa laga ki jaise tune ye sab kahan se rata mar ke ayae tha baise likh diya jo kar raha hai samjahana cahiye tha na bas likhe ja raha hai yar btw good content or code already present in geeks for geeks
@@RoadsideCoderBhai react padha hun main Mujhe app PE koi doubt nehi Hain bus ya bol Raha ti app ne pura geeks for geeks copy kar diya Apne kuch neya nehi samjhaya isiliye bola ye Mera alag I'd hai But thanks to this video It helps me know a lot of things ❤❤❤❤❤
When we gave the condition of phone number length to be < 10 then why is it allowing us to type random number more than 10? Shouldn't we throw an alert?🤔
The length should be exactly 10 and having only 0-9 in regex isn't correct validation, but that logic 000000000 will also be a valid number. Indian numbers start with 6-9 or 0 (044) in case of landline numbers.
@@RoadsideCoder sir web dev kr rakha h pr job nhi mil rahi h . Portals pr try krte h scam call aati h and paise maangte h .. . Kuch btaao sir first job kaise le IT sector m
Yes Bro, if (value && inputRefs.current) { for (let i = index + 1; i < length; i++) { if (!inputRefs.current[i].value && inputRefs.current[i]) { inputRefs.current[i].focus(); break; } } }
best video at final I tried with this logic inputRef.current[newOtp.indexOf("", index)].focus(); and it worked I just want to compare with your logic @roadsidecoader
To be honest, i foillowed this tutorail but the logics opf moving inside the OTP field, I didnot get any logic, Didnot understand a word...What to Do, Please help
🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder
🟪 Follow me on Instagram and u will clear your interview 🤓 - instagram.com/roadsidecoder/
👍
valid
Bhai paise nahi hain
I had my machine coding round yesterday and the interviewer asked me to code this otp functionality. He was super impressed and I got selected in the technical round, next is hr round. Thanks dude for making this awesome content. Wish I had even 50% of the knowledge you have then I would be a superhero like you
Amazing bro! Congrats.
@@RoadsideCoder Bro I have a doubt, in this video, at 4:00 , You just clicked on PhoneOtpForm, and then it got imported in the code, how can we do it bro, which extension bro?
Thank you so much for creating such a usable OTP component. I have implemented it in my project after learning it from you.
Me : there is no way i will get asked these tricky js questions in my interview but lets watch roadsidecoder js interview questions anyway,
95% of the questions were from your videos lol , thanks a lot
Hahah, Thanks a lot!
Awesome tutorial! I'm new to React and I followed along in Typescript and had no problems.
Very good explanation of why you use particular methods/patterns in certain situations!
btw, you jump scared me with the Instagram sponsor 🤣
Is it necessary or important to shift to typescript in react?
@H_NileshKumar Neither TypeScript nor JavaScript is strictly better for React development in all cases.
But it has its advantages, like type safety and better IDE support (autocompletion, etc.).
So, for more complex projects, I will use Typescript, and for fast prototyping, I'll go with Javascript.
But again, it's also a preference.
@@rocs11 I see , well I just found that I suck at logic building. Maybe bcoz I haven't done many projects with simple js ,so I'm doing that rn
Very very very useful video for frontend developers.
Thank you for giving the knowledge 👌👌👌👌
yeah you're right dude
HomeWork answer :
const value = e.target.value;
if (value && idx < length - 1 && inputRefs.current[idx + 1]) {
inputRefs.current[OTP.indexOf("")].focus();
}
its too long bro just do
if (index >= 0) {
inputref.current[otp.indexOf("")].focus();
}
@@theofficialleaker2495 Kaha se chalega ye, Question kya he aur tu bata kya raha he, agar kisi input field jo empty ho uspe directly jana he
Great video brother, learned a lot!
best video on machine coding, you covered many things in one video.. kudos... let's collab again because my audience is waiting :)
Thank u so much bhai 🥹
Yea, it was an excellent video
this is practical example of real world enterprise grade production ready tutorial thank you so much
You're welcome!
Hey you are awesome 🙌….your channel is so underrated 😢…..thanks for this great content and try making a playlist of you developing complex only react projects ❤…..you gained a sub 🎉
Outstanding very useful video & doing a great job bro🤓🤓🤓
this has many bugs
click backspace on 3 field gives error
backspace does not remove the value in first field
i had to watch twice to keep up but amazing content!!
this is a smaller code to only focus first input element, put this on attribute "autoFocus={index == 0}" 🤓
amazing video....very clear explanation
Please create a video on Form Validations
I didn't try it, so correct me if I am wrong. If we are using "tab" button to move b/w components, the "onClick" won''t trigger. So maybe we should run the cursor positioning function on "onFocus"?
great job !!
Great video... Brother...🎉🎉🎉🎉
Just implemented wordle and it is very similar to this concept
U are really doing a great job bro
sir please make video on portfolio website using react
hay quá anh zaii oiiii
onKeyDown event is not working as expected. when i click backspace, the cursor still remains on the same input and when i again click backspace it goes to the previous input and automatically delete that otp. Instead, onKeyUp works perfectly fine in my code. why this happening?
I am facing the same problem...have u rectified the reason for that bug?? If yes please tell me
This is so good. 💯
bhai esa laga ki jaise tune ye sab kahan se rata mar ke ayae tha baise likh diya jo kar raha hai samjahana cahiye tha na bas likhe ja raha hai yar
btw good content or code already present in geeks for geeks
bhai iss video ko follow karne se pehle apko react js aani zruri hai, else u wont understand the code.
@@RoadsideCoderBhai react padha hun main
Mujhe app PE koi doubt nehi Hain bus ya bol Raha ti app ne pura geeks for geeks copy kar diya
Apne kuch neya nehi samjhaya isiliye bola ye Mera alag I'd hai
But thanks to this video
It helps me know a lot of things ❤❤❤❤❤
@RoadsideCoder how to build Aadhar input box where we have 3 input boxes that take 4 numbers each?
Nice video but where is the verification logic part
Home work Answer ;
do it inside onclick
if (index >= 0) {
inputref.current[otp.indexOf("")].focus();
}
Thanks a Lot Sir.
Welcome!
I have got the downloaded file. Thanks
Great . Thanks 😍😍.
Continue this series
Why don't we just use a normal text input to place OTP?
Tweaked handleChange function to
const handleChange = (index, e) => {
const num = e.target.value;
if(isNaN(num)) return;
const newOtp = [...otp];
newOtp[index] = num.substring(num.length -1);
setOtp(newOtp);
const combinedOtp = newOtp.join("");
if(combinedOtp.length==length)
{
onOtpSubmit(combinedOtp);
}
// shift focus to next empty element
const nextEmptyIndex = newOtp.indexOf("");
if(num && nextEmptyIndex!==-1 && inputRefs.current[nextEmptyIndex])
{
inputRefs.current[nextEmptyIndex].focus();
}
}
make a video on form validation
Definetely!
nice one sir
Thank You sir jii
Please make a video on form validation
Ok Soon!
How is onOtpSubmit still working even after you declared it again with const
Bro make videos on RTK query and redux toolkit
Thanks!
Sir please bring a complete machine coding course please there are no one who are dealing this in complete market
Releasing Soon. 🔥
Join here to be updated - discord.gg/2ecgDwx5EE
@@RoadsideCoder may i know any tentative time line for course launch pleasee
1st week of feb most probably
@@RoadsideCoder exciteddd🥳🤩🔥
Nnn@@RoadsideCoder
I was asked this question last month,
Are you a fresher or have some experience? At what level does this question get asked?
Not able to focus on the input when clicking on it
WHY DON'T YOU USE TAILWIND CSS?
Hey, that's my number..
50 diffrerent people said that
which browser do you use?
firefox
If we want to past 4 digits from email or phone no?
guys how can i get thier animated background
WOW 😲😲😲
When we gave the condition of phone number length to be < 10 then why is it allowing us to type random number more than 10? Shouldn't we throw an alert?🤔
we are saying lenght>10 not less, just as an example.
The length should be exactly 10 and having only 0-9 in regex isn't correct validation, but that logic 000000000 will also be a valid number. Indian numbers start with 6-9 or 0 (044) in case of landline numbers.
love you
i am trying to book your call but not happening actually money deduct ho gaya he do baar but call booked nahi huva.
Please contact me on instagram @roadsidecoder with the screenshot
Bhai console close Kara Karo recording ke time
19:29
Bro theme kaunsi hai
peacock extension
Brother don't wast time on building such UI from scratch you can use the thirld party libraires .
In interviews you wone be allowed to use third party packages
Sir ye fresher interview question h kya experience
both
@@RoadsideCoder sir web dev kr rakha h pr job nhi mil rahi h .
Portals pr try krte h scam call aati h and paise maangte h .. .
Kuch btaao sir first job kaise le IT sector m
Nahi Mil paege..Kon si city me ho...Let me know, I will help@@gautamnangla2594
@@guptasagar694 faridabad haryana
Unnecessary give one input box y u need 4 I never understood
hahah, because this is the convention of an OTP Input
💚💚💙💙💖😍😍
fun fact: mobile number will go viral.
33:49 Is there anyone here who has done the work I came specifically for?
Yes Bro,
if (value && inputRefs.current) {
for (let i = index + 1; i < length; i++) {
if (!inputRefs.current[i].value && inputRefs.current[i]) {
inputRefs.current[i].focus();
break;
}
}
}
NGL, looked like you yourself were bit confused
best video at final I tried with this logic inputRef.current[newOtp.indexOf("", index)].focus(); and it worked I just want to compare with your logic @roadsidecoader
To be honest, i foillowed this tutorail but the logics opf moving inside the OTP field, I didnot get any logic, Didnot understand a word...What to Do, Please help
inputRef.current[newOtp.indexOf("")].focus()