React JS Interview Questions ( Drag and Drop Notes ) - Frontend Machine Coding Interview Experience
Vložit
- čas přidán 16. 06. 2024
- ➡️ My Frontend Interview Preparation Course - roadsidecoder.com/course-details (50% Discount)
🟪 My Instagram - / roadsidecoder
➡️ Book an Interview Preparation call with me - topmate.io/roadsidecoder
React Interview Question on building a Drag and Drop Feature will be discussed in this video along with tips and tricks to tackle your React JS and JavaScript Questions in Frontend Machine Coding Interviews.
🔗 React JS Interview Series -
• Frontend Machine Codin...
➡️ Source Code -
github.com/piyush-eon/fronten...
👤 Join the RoadsideCoder Community Discord -
/ discord
🔗 MERN Stack Chat App Tutorial -
• MERN Stack Chat App wi...
🔗 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...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
#JavascriptInterview #ReactInterview #ReactJS
-------------------------------------------------------------------------
00:00 Intro
01:07 Setup New React App
02:18 Building the UI
07:09 Random Rendering of Notes
12:06 Making Notes Persistant
13:34 Drag and Drop Logic
23:02 Prevent Overlaping Drag Logic
26:28 Homework
-------------------------------------------------------------------------
⭐ Support the channel -
/ @roadsidecoder
Special Thanks to our members -
Roadside to Dream Job - Frontend Interview Prep Course 🔥🔥
roadsidecoder.com/course-details (50% Discount for limited time)
Bhai agr aap code ko explain krte chalo then it's good for people like me who is new to react
Your videos becoming calculation-heavy 💀day by day which proves that FE is not limited to only HTML
True!
Hi Piyush, this is really good, thanks for sharing
thank you sir that was a great video it refreshed my react skills, taught me some new lessons, and my collection got another project.
Consider your HW to be done by my side.
Thanks for sharing this knowledge-packed video on React machine coding! 🚀 Learned a lot and would love to see more content like this 😇
Thanks! You can find more questions here - roadsidecoder.com/course-details
Hey Piyush, loving your videos keep it up brother❤
Thank you, I will
Is it possible to attach events without making use addeventlister and outside the onmousedown function?
Could you create a video on how to host your portfolio website in github pages?
Sure
Hi
@@RoadsideCoder Thanks a lot brother
I don't think it takes much effort to host. Just push all your files in a repo and go to settings and go to pages. Then enable the pages and you are done with it.
thank you, it is very interesting task
Glad it was helpful!
Great content 👏
Thank you 🙌
Great content bro....
Thanks!
Awesome video as always.
These kind of real world project examples really help.
There was a video where when a person is searched and clicked then the name will be added to the text field and the cursor will move.
Had a similar requirement but different UI, but the concept really helped to work on it.
Problem Statement: Weekday date range picker component
Create a date range picker component in React and TypeScript that allows users to select
weekdays (Monday through Friday) and prevents them from selecting weekends (Saturday and
Sunday). The component should include the following features:
● The component should allow users to select a date range defined by a start date and an
end date. Remember that a start date and an end date must be a weekday and should
not be a weekend.
● The selected date range should highlight only weekdays and weekends should not be
highlighted.
● The user should be able to change the year displayed in the date picker.
● The user should be able to change the month displayed in the date picker.
● The component should include a change handler that returns the selected date range
and any weekend dates within that range. As an example, if the range selected is
December 1st, 2022, to December 15th, 2022, the returned values should be an array
containing the date range as the first element (e.g. [2022-12-01, 2022-12-15]) and an
array of weekend dates within that range as the second element (e.g. [2022-12-03,
2022-12-04, 2022-12-10, 2022-12-11]).
● The component should include a prop that allows the user to input predefined ranges,
such as the last 7 days or last 30 days. These predefined ranges should be displayed
below the calendars.
Please refer to the date range picker linked below as an example:
rsuitejs.com/components/date-range-picker/#predefined-date-ranges
The use of date picker libraries (e.g. react-datepicker) or date libraries (e.g. date-fns,
Moment.js, Day.js) is strictly prohibited.
sir please solve this problem and make a tutorial video ,,
Thanks, I will
Hi Peeyush, Which monitor & keyboard/ mouse do you use with Mac?
I use windows
Such machine coding questions asked for experienced ones or freshers?
SDE 2 and above
What is the difference between your course and your CZcams playlist? You have all the topics in the CZcams playlist also....
Can you give some information about your course contents?
This has 4 new JS topics, react topic wise questions, lot of new machine coding questions and performance optimisation questions. All these are not on my YT channel
Few topics of JS are common between the course and my channel, The reason for including them in this is so that this becomes one stop for Frontend Interview preparation. You check the detailed curriculum in the website.
I have mentioned it in this video as well - czcams.com/video/8SgWqKosMIM/video.html
PS. You get the access to our premium discord community
can you upload long videos with slow explaination it was fast ! Drag n Drop logic
you can switch the video speed to 0.75 or 0.50, will be helpful
@@RoadsideCoder Bro drag and drop logic was not explained in detail. By slow explanation means explaining it in depth as well as the reason of applying some logic.
Why mouse event?
Why that particular mouse event?
I think using those mouse event was self explanatiory, I would recommend making more HTML,CSS and JS project to improve basics then u will be able to form these logic better.
More questions here - roadsidecoder.com/course-details
Can someone tell which vs code theme he is using😊
peacock
bhai app sirf react per video banate ho please angular per bhi banao
bro react is asked much more than angular
15:05
emojis in linux ?
This worked for me Installed :emojisense: extension press Ctrl + i for opening the extension search bar
RIP for those who watching after react 19
haha, react 19 is not out yet. its just beta
Hey we can make it only in javascript??
how do u wanna make it?
Too fast and no explanation. So its difficult to catch as a beginner.
You can start with basics first, so start with this playlist from beginning - czcams.com/play/PLKhlp2qtUcSZiWKJTi5-5r6IRdHhxP9ZU.html
Copied most of the logic from stack over flow😂.
Don't blindly use this in production. There are lots of performance problems with this code.
This is an interview question, obviously no one is going to use it in production 😂