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

ReactHTML/CSS/JavaScriptAll Levels
1095
Do you see value in our efforts?

Devtools Tech is a free platform for Frontend Engineers. It takes a lot of time, effort, and finanical resources to keep the platform running. If you see any value in our work and would like to support us then you can do using the following options.

InternationalDomestic

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

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.

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.

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