React JS Interview Questions ( Drag and Drop Notes ) - Frontend Machine Coding Interview Experience

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 -

➡️ Source Code -

👤 Join the RoadsideCoder Community Discord -

🔗 MERN Stack Chat App Tutorial -

🔗 JS Interview Series -

🔗 Cars24 Interview Experience -

🔗 Unacademy Interview Experience -

🔗 Tazorpay Interview Experience -

🔗 React Beginner's Project Tutorials -

#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 -

Special Thanks to our members -

[RoadsideCoder]

Roadside to Dream Job - Frontend Interview Prep Course 🔥🔥

[Solo_playz]

Your videos becoming calculation-heavy 💀day by day which proves that FE is not limited to only HTML<CSS<JS only ☠

[mehr]

Could you create a video on how to host your portfolio website in github pages?

[PradeepKumar-jppy]

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:
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, ,

[jazibbashar]

Bhai agr aap code ko explain krte chalo then it's good for people like me who is new to react

[play_with_Vpp]

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.

[koppresh]

Is it possible to attach events without making use addeventlister and outside the onmousedown function?

[nitinakuch]

Such machine coding questions asked for experienced ones or freshers?

[anubhapant]

Thanks for sharing this knowledge-packed video on React machine coding! 🚀 Learned a lot and would love to see more content like this 😇

[KingOfKings]

I have an idea to build up the floor planner web app using react and drf but I don't know how to execute it. First user can edit floor plane in 2D environment and then have a visualisation in 3D after he done editing and something like that. Here I need drag n drop to put objects in floor plane with canvas and user can draw walls in canvas

[saiphaneeshk.h.]

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.

[gunjangidwani]

Hi Piyush, this is really good, thanks for sharing

[harishgowdabp]

What is the difference between your course and your YouTube playlist? You have all the topics in the YouTube playlist also....
Can you give some information about your course contents?

[navneetkumarsharma]

Hi Peeyush, Which monitor & keyboard/ mouse do you use with Mac?

[priyasuryawanshi]

In my recent interview, I have been asked to create a Kanban Board in react JS

[MrColins]

thank you, it is very interesting task

[debarshipal]

Hey Piyush, loving your videos keep it up brother❤

[yashvijaybombale]

can you upload long videos with slow explaination it was fast ! Drag n Drop logic

[CppGod-knfy]

People asking Piyush to explain things in 'detail' should first get their basics right and then watch this video

[OfficeuserUser]

Can someone tell which vs code theme he is using😊