React JS Interview Questions ( OTP Login ) - Frontend Machine Coding Interview Experience
Vložit
- čas přidán 25. 06. 2024
- 🔴 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 🤓 - / roadsidecoder
React Interview Question on implementing a OTP login with Phone Number feature will be created in this video along with tips and tricks to tackle your React JS and JavaScript Questions in Frontend Machine Coding Interviews.
👤 Join the RoadsideCoder Community Discord -
/ discord
🔗 React JS Interview Series -
• Frontend Machine Codin...
➡️ Source Code -
github.com/piyush-eon/fronten...
🔗 Strings Video -
• Strings - Data Structu...
🔗 Complete Data Structures and Algorithms with JS Course - • Data Structures and Al...
🔗 JS Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 MERN Stack Tutorial with Redux -
• MERN Stack Project Tut...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
#JavascriptInterview #ReactInterview #ReactJS
-------------------------------------------------------------------------
00:00 Intro
01:05 Setup New React App
03:12 Phone Login Component
10:42 OTP Input Component
16:08 Styling OTP Inputs
16:57 OTP Field focus after First Render
19:29 Updating OTP Field Logic
25:26 Move to Next Field after Input
27:08 Move to Previous Field on Backspace
29:08 Move Cursor to Last on Click
31:00 Adding More Validations
33:11 Homework for you
33:52 Secret Announcement
-------------------------------------------------------------------------
⭐ Support the channel -
/ @roadsidecoder
Special Thanks to our members -
🔴 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
Thank you so much for creating such a usable OTP component. I have implemented it in my project after learning it from you.
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 🎉
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.
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!
U are really doing a great job bro
Very very very useful video for frontend developers.
Thank you for giving the knowledge 👌👌👌👌
yeah you're right dude
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
this is practical example of real world enterprise grade production ready tutorial thank you so much
You're welcome!
hay quá anh zaii oiiii
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 so good. 💯
Great . Thanks 😍😍.
Great video... Brother...🎉🎉🎉🎉
Just implemented wordle and it is very similar to this concept
Thank You sir jii
Please create a video on Form Validations
Thanks a Lot Sir.
Welcome!
Continue this series
Thanks!
I have got the downloaded file. Thanks
this has many bugs
click backspace on 3 field gives error
backspace does not remove the value in first field
WOW 😲😲😲
@RoadsideCoder how to build Aadhar input box where we have 3 input boxes that take 4 numbers each?
sir please make video on portfolio website using react
If we want to past 4 digits from email or phone no?
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"?
I was asked this question last month,
How is onOtpSubmit still working even after you declared it again with const
Bro make videos on RTK query and redux toolkit
this is a smaller code to only focus first input element, put this on attribute "autoFocus={index == 0}" 🤓
nice one sir
love you
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
guys how can i get thier animated background
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 ❤❤❤❤❤
WHY DON'T YOU USE TAILWIND CSS?
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
Bhai console close Kara Karo recording ke time
make a video on form validation
Definetely!
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.
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
I thought he will code full API and auth logic, but nope…
Main problem he solved - how to move cursor from one input to another and check valid number. Probably it is enough for Indian coders 😂
??
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
Bro theme kaunsi hai
peacock extension
💚💚💙💙💖😍😍
Home work Answer ;
do it inside onclick
if (index >= 0) {
inputref.current[otp.indexOf("")].focus();
}
Hey, that's my number..
50 diffrerent people said that
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@@technicalgautamnangla2594
@@guptasagar694 faridabad haryana
NGL, looked like you yourself were bit confused
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;
}
}
}
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.
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
Please make a video on form validation
Ok Soon!