I was asked this question in an Amazon Front End Engineer phone screen. Interview was conducted on Amazon Chime using a non-compiling whiteboard platform created by Amazon.

Question: Create a like button that changes appearance based on the states below. Code using only vanilla HTML, CSS, and Javascript.

Normal:

Hovered:

Clicked:

Requirements:

• The button should say 'Like' and show a heart icon to the left of the text.
• The button should have gray text, heart and border when unclicked
• When the user hovers over the button, the text, heart and border should turn red
• When the user clicks the button, the text and heart should turn white and the background color should turn red
• Clicking the button should call a back-end service so that while the request is processing, the button should show a loading or processing state (see image below). Only once the request is complete, then the button should show the updated "clicked" state.