Implement a page with a multi-step form, where each step shows when you have completed the previous one. In other words, we're not looking for previous/next buttons, but the next step should appear automatically.
- Two checkboxes with labels
A1andA2. Both are unchecked by default. Next step is available after at least one of them is checked. - Two toggle buttons with labels
B1andB2. One button untoggles another (same as radio buttons behavior). Both are inactive by default. Next step is available when any option has been chosen. - Text field with button
Check. When button is pressed a value of the field will be send. Next step is available if a response from API is fine. - Selectbox with
C1,C2,C3options. It is empty by default. Next step is available when any option has been chosen. - Submit button. Should send data to the server.
If a form submit fails then a user must be informed by an error message. It doesn't matter how the message appears but the redux store should be able to manage it.
JSON with a (checked values), b (active button value), text (text field value), c (selectbox's value) fields.
Example:
{
a: ["A1"],
b: "B1",
text: "@abcdef",
c: "C1"
}Use api.js from this gist.
- Use webpack, react, redux, ES6. Use the Redux store to manage the state as much as possible.
- Use any library you need.
- Single page is enough. No need to use routers and create any other pages.
- If you want to use inline styles do it in a nice way. :)
- Use best practices.
- Well structured and readable code matters. Code written for programmers rather than machines is better.
- Tell us how much time took an implementation step by step.
- Feel free to apply your UX skills, though we don’t evaluate the appearance.
- Tests and documentation are welcome.
- We love functional programming :)
Next steps are expected to start your project
npm install
npm run build
npm start
Tip: as server tool you can use http-server
It would be nice if you will follow Code Style Guides of Airbnb
You can use .eslintrc from this gist.
GOOD LUCK!