Solving Uber Advanced Frontend Interview Question | Overlapping Circles

In this video, we will solve an advanced frontend interview question from Uber where we need to build an interactive feature where circles are drawn on the screen in response to user clicks. The circles will have specific behaviors based on user actions such as dragging, clicking, and overlapping. The application should dynamically update the circle's size during a drag operation and detect when two circles overlap, changing the color of the second circle in such cases.

Try now using the links below

You can support our channel via:

************************************************************
Devtools Tech is a YouTube channel started as a collaborative effort among like-minded engineers to provide high-quality programming tutorials for free. We firmly believe in knowledge sharing and easy access to quality content for everyone. Hence, this channel is an effort to give back to the community and a step toward our belief -- "We rise by lifting others".

Team Members:
Yomesh Gupta

#javascript #uber #web #frontend #interviewquestions #devtoolstech #code #programming #developement #ai
***********************************************************

[DevtoolsTech]

At @44:11 we need to add rightCircleRadius to find the rightCenter. It was a miss.

[subhamjena]

Pretty good solution Yomesh! Have seen similar solutions on other interviews but this was pretty neatly explained and I really liked the code calrity.
Just one more bug I noticed(correct me if wrong), The code was passing for the example cases but on 44:11 line-35, 36 you didn't edit the rightCircleRadius for rightCenter so some cases where the circle sizes are not similar and the right circle is close to leftCircle and the rightRadius is smaller, then the those cases will fail, as the rightCenter will shift by √2*(leftRadius-rightRadius). The circles will be overlapping but the color condition won't be met.

[perfect-peace-steph]

Clearly explained solution Yomesh! very helpful.
In addition to the observations you made at the end, we can also further expand the solution for the following:
1) If the color of the second circle has changed, it should be reset if we're drawing another circle at a distance.
2) The latest drawn circle should be on top position

[shubhamthaker]

a pretty awesome question with a nice approach followed, thankyou ! wish i could apply this much of logic in my journey working towards it.

[its_maalik]

a div with border radius is not really a circle (its still a square in the dom), can this be implemented with something like canvas?

[ShadabMehdi]

BRO!!! What was that at 43:35?? Did you seriously copy paste "L" ?? LMAO. Jokes aside, amazing video. Kudos.

[luxurymusic]

even u coded it in good amount of time, with a pre solution in mind, how can this be done realtime within 30-40 min with edgecases

[infinitytraverse]

share code also it will be helpfull for reference .

[tusharbansal]

Why width is not sqrt((x2-x1)^2 + (y2-y1)^2)) ?

[eshw]

What? Uber doesnt ask front end questions, dont they just do DSAs?