Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Detect and Highlight Overlapping Circles Drawn on Mouse Click

easyreactgeometrymathmouse eventsstate managementsde2GoogleAmazonFigmaUI Component

Prompt

Build a React (or VanillaJS) app where each click on the screen draws a circle with a fixed radius of 100px at that position. After each new circle is added, check all existing circles for overlaps by comparing center-to-center distances against the sum of their radii. If two circles overlap, change the background color of the later circle to indicate the conflict. SDE3 bonus: let users drag the mouse to set a custom diameter before releasing.

Store circles as array of {x, y, radius} objects in state.
Test Results

Detect and Highlight Overlapping Circles Drawn on Mouse Click

Build a React (or VanillaJS) app where each click on the screen draws a circle with a fixed radius of 100px at that position. After each new circle is added, check all existing circles for overlaps by comparing center-to-center distances against the sum of their radii. If two circles overlap, change the background color of the later circle to indicate the conflict. SDE3 bonus: let users drag the mouse to set a custom diameter before releasing.