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.
- Each user avatar would contain the first letter of their name.
- You need to assign a random background color to the avatar. Be mindful of assigning light text color on darker backgrounds.
- 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.
- 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.
- On success, a new user avatar should be added.
- On clicking the removal button on avatar, a dialog should appear for removal confirmation.
- 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