You'll be building a simple react component: an avatar picker. It looks like this:
The user clicks on the avatar to open a popover which allows the user to choose another avatar from the list. After a click a (fake) HTTP request is made (while a loading spinner runs), the popover closes and the new avatar will appear in the inital view.
- The initially shown avatar is the first in the given list of avatars
- The initial avatar which opens the popover has a border of 1px on hover and active state
- The avatar icons are shown in groups of 4, aligned left (with 6 icons it will exactly look like it does in the gif)
- The popover opens with a scaling animation that overbounces a bit (see gif; you're free to choose values for the animation that look good in your opinion, or close to what you see above)
- The currently chosen avatar has a blue border of 3px
- The avatar list icons have grey border and are overlaid by a blue colored area with an opacity of 20% on hover
- The loading spinner should look like shown above. It is also blue.
- The popover fades out with a scaling animation (no overbounce)
- A click outside the popover area will result in the popover closing
- Simulate a server request/response by showing the spinner for exactly one second before choosing the avatar
- The popover is closed when an avatar is chosen
- Avatar image
- height: 60px, width: 60px, perfect circles
- border for initial image: hover, focus 1px, color: rgb(155, 160, 163)
- avatar list images:
- border on hover: 3px border, color rgb(155, 160, 163);
- overlay on hover: color rgb(122, 161, 178), opacity: 20%
- border spinner, currently active avatar: color: rgb(122, 161, 178)
- margin between two avatars: 14px
- Popover
- width: 280px
- height: variable
- rounded corners of 2px radius
- background: rgb(44, 48, 51)
- drop shadow: color: rgb(102, 102, 102), size 2px, blur 10px
- padding: 14px
- triangle: equilateral, 8px each side
- "Choose your avatar" title
- font: 'Source Sans Pro' (use the google font)
- color: rgb(249, 249, 249)
- size: 16px
- margin top and bottom: 14px
- This is going to be a react component which is being passed just one property: the list of available avatars. This list contains the src of the image file, the avatar label and a unique avatar id. The number of avatars can vary (let's say up to 12). For this example please use the following array:
[
{ "src": "avatar1.png", "label": "Avatar 1", "id": 1 },
{ "src": "avatar2.png", "label": "Avatar 2", "id": 2 },
{ "src": "avatar3.png", "label": "Avatar 3", "id": 3 },
{ "src": "avatar4.png", "label": "Avatar 4", "id": 4 },
{ "src": "avatar5.png", "label": "Avatar 5", "id": 5 },
{ "src": "avatar6.png", "label": "Avatar 6", "id": 6 }
]
(you may adjust the paths to your needs of course)
- Requested browser compatibility: IE11 and up, current versions of Chrome, FF, Safari
- You may split up the main component in as many sub-components as you see fit
- The whole component must also be fully usable when just using a keyboard
- Think of it as a component that will end up in a large, scalable react app. Consider this when writing HTML and CSS as well.
- You're free to use as many third party JS libraries that you see fit
- You're NOT allowed to use any third party CSS libraries
- You're free to use any build tools that you like (including CSS pre/post-processors). Do not focus on the tooling though. Choose tools that get you going quickly (when you're unsure, create-react-app might work well for you).
- Only use the image assets given in this repository and do not modify the files in any way
- Use proper semantics when writing HTML (for example: the avatar list has to be a
<ul>
and all the children just<li>
elements)
- A suite of unit tests written for this component using your favourite testing toolchain
- The results have to be shared as a git repository
- You can either create a private repository on your favourite git hosting provider (github, gitlab, bitbucket) and then give access to
- Or create a public repository and send the link to both of these email addresses
- Or send the whole repository, zipped (including the
.git
directory) to both of these email addresses - Important note: please only submit your work when it is completely done!
Happy coding! ❤️
- Avatar icons by Freepik
Some people seem to be forking and using this. That's great! If you like, submit your findings by creating an issue or submitting a PR. This repo is published under the MIT Licnse.