Front-end coding test
Overview
This should be a short coding assignment that should help you demonstrate your coding skills and way of thinking.
You can imagine this assignment as something that will go into production, but you only have a limited time to work on the task and then after you are done someone else will start from there. Therefore we want you to do your best to describe what and why you did something and most importantly what you did not do, but should be done in order to make this production ready.
Time
We don’t want you to spend more than 2 hours on all tasks. It’s better to tackle each task enough to give us a sense of how you’re approaching the problem, than it is to spend all of your time on task 1 and not moving on to task 2. You may wish to stub-out some of your solutions or simply write pseudo code if you run out of time. We understand that there's more important things in life than completing a coding test, but this should give you a good idea of the kind of thing you'll be working on if you're successful in your application.
Solution
We are using React and Less CSS. You are free to use whatever technologies you are comfortable in. You can submit the result via zip file or link to repository or you can just use online editors (e.g. Codepen or JSbin).
If you wish to use React and / or ES6 we have prepared a quick bootstrapped solution that uses ES6 and React via Babel and Less CSS: Firefly Coding Test Bootstrap.
Task
HTML & CSS
The tabs component should look as similar to the ones provided in the design. If you make some compromises in terms of the design, please write down what and why is something not working (e.g. "points" text is not aligned because I would have to refactor the code to use flexbox and I ran out of time).
Javascript
We'd like you to build a Javascript version of the component. It should:
- Demonstrate state handling, i.e. handle switching of tabs.
- Allow the user to click the name of the hero or villain to rename them. This should live update the name in the tab.