🔴 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/
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
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?
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 🎉
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?
hi, it is happening because of the default behavior of backspace which is removing the character from input box. It can be resolve just by using this statement event.preventDeafult(); in the block where we are writing specific code for backspace.
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"?
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; } } }
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
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
![[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒](/img/n.gif)
🔴 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
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!
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.
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
Great video brother, learned a lot!
Outstanding very useful video & doing a great job bro🤓🤓🤓
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 🎉
amazing video....very clear explanation
Great video... Brother...🎉🎉🎉🎉
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
AWESOME LEARNT A LOT
this is practical example of real world enterprise grade production ready tutorial thank you so much
You're welcome!
U are really doing a great job bro
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
this has many bugs
click backspace on 3 field gives error
backspace does not remove the value in first field
Thanks a Lot Sir.
Welcome!
i had to watch twice to keep up but amazing content!!
Great . Thanks 😍😍.
This is so good. 💯
this is a smaller code to only focus first input element, put this on attribute "autoFocus={index == 0}" 🤓
Please create a video on Form Validations
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
hi, it is happening because of the default behavior of backspace which is removing the character from input box. It can be resolve just by using this statement event.preventDeafult(); in the block where we are writing specific code for backspace.
great job !!
I have got the downloaded file. Thanks
sir please make video on portfolio website using react
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
Just implemented wordle and it is very similar to this concept
make a video on form validation
Definetely!
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"?
which browser do you use?
firefox
WOW 😲😲😲
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 ❤❤❤❤❤
Thank You sir jii
Nice video but where is the verification logic part
I was asked this question last month,
Are you a fresher or have some experience? At what level does this question get asked?
If we want to past 4 digits from email or phone no?
@RoadsideCoder how to build Aadhar input box where we have 3 input boxes that take 4 numbers each?
Not able to focus on the input when clicking on it
WHY DON'T YOU USE TAILWIND CSS?
How is onOtpSubmit still working even after you declared it again with const
Continue this series
Thanks!
Please make a video on form validation
Ok Soon!
hay quá anh zaii oiiii
guys how can i get thier animated background
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.
Bro make videos on RTK query and redux toolkit
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
19:29
Why don't we just use a normal text input to place OTP?
Coz it's user friendly
Bro theme kaunsi hai
peacock extension
Hey, that's my number..
50 diffrerent people said that
Bhai console close Kara Karo recording ke time
nice one sir
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
Home work Answer ;
do it inside onclick
if (index >= 0) {
inputref.current[otp.indexOf("")].focus();
}
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;
}
}
}
love you
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
💚💚💙💙💖😍😍
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.
NGL, looked like you yourself were bit confused
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();
}
}
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
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
inputRef.current[newOtp.indexOf("")].focus()