Detect overlapping circle | Uber Frontend Interview Question | Q-30

JavaScript Interview Question - 30 | In this video, we will see how to solve a medium-difficulty problem asked in an Uber frontend engineer interview to SDE1 and SDE2.

We have to generate a circle on the screen where the user clicks and detect if two circles are overlapping or not. If they collide, change the color of the later circle.

You can expect this frontend system design/coding question in Rippling, Uber, Flipkart, Atlassian, Meta, Google, Microsoft, Dropbox, TCS, Infosys, Wipro, Cognizant, Capgemini, Accenture, Nvidia, Nutanix, and other product-based organizations' interviews.

Loved the question?, I have 120+ such solved problems in my ebook "JavaScript Interview Guide". If you are preparing for Interviews and looking for a solutions book, Get my Ebook.

Social links

[amansaxena]

Tough one this will really test your FE skills

[abd]

Thanks a lot for this video, I tried the same code given in description, I notice one issue here, if draw 2 circle near each other it turned into green but it didn't overlap, here the issue is of border radius, I went into console, removed border radius then found that these 2 square are overlapping, it would much helpful if you let us know how to handle this.

[xatul]

I dont get why we need to use prevState?
Why were we not allowed to access the earlier state?
Any links would be helpful

[anujnandwana]

The condition is not correct for circle. Two circles will intersect if the difference between their radius is smaller than the distance separating their centers :
correct answer is :
const distance = Math.sqrt(
(x1 - x2)*(x1 - x2) + (y1 - y2)*(y1 - y2)
);

if ( distance -r1 - r2 <= 0) {
return true;
} ;