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

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

Specs:

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.

4. 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.

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

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

7. 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.

Submission

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