Build User Avatar Screen | Frontend Coding Challenge | JavaScript Interview Question | Machine Coding Round

@Devtools Tech

In this question, you need to build a screen that contains a list of users' avatars based on the first letter of their name.

User Avatar Screen


  1. Each user avatar would contain the first letter of their name.
  2. You need to assign a random background color to the avatar. Be mindful of assigning light text color on darker backgrounds.
  3. There should be a circular button at the end of the list to add new avatars. On clicking of that button, a dialog box should open to gather user's name.

Create Avatar Dialog

  1. User should be able to enter the name. Dialog box should contain two CTAs: One for submission and other one for cancellation. Dialog box should be dismissible. Please see the below design for interactions.

Create Avatar Dialog Interaction

  1. On success, a new user avatar should be added.

Avatar Creation Success Screen

  1. On clicking the removal button on avatar, a dialog should appear for removal confirmation.

User Removal Dialog

  1. On success, selected avatar should be removed.

Once you have completed the above mentioned specs, feel free to add more interactions, functionalities, and improve the UI/UX.


Start the timer and try to finish as soon as possible. You can record your solving process or take a screenshot of your final code and share it on Twitter/LinkedIn and tag @devtoolstech