Phone interview for Frontend Engineer (2+ years exp) role. The stages I went through were:

1. 15 minute call with a recruiter
2. 4 question online assessment
3. 1 hour phone/business interview

The prompt that was pasted into the IDE was something like "Let a user draw two circles on the screen. Change the color of the circles if they overlap". Functional requirements that I got after asking questions paraphrased below:

• When the user clicks the left mouse button, the center of a circle is placed. When the user releases the left mouse button, a circle with the corresponding radius is created. The circle should scale in real time as the user is dragging the mouse which holding left click.
• The same is true for the right mouse button, except a second circle is placed.
• Another click-drag of the left or right mouse buttons replaces the associated circle.
• If the user left clicks with no dragging, clear the circles.
• If the circles overlap, they should change color.

Environment was JS, React, and CSS. My approach was to create a div that detected mouse events, storing centers and radii in state. I kept two references to elements (the circles) whose width and height I updated when the states updated. I calculated each radius by doing the pathagorean theorum with the center and mouse-up coordinates.

I got maybe halfway through the problem in ~45min. At the end, the interviewer asked me why I chose not to use the <canvas> element. My answer was the I have no experience with the canvas API. He replied "Oh, I thought you did. This is a big part of what we do - draw things on maps."

Good luck out there friends. I spent all my time on algos and system design and was not prepared for this question.