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
A1
andA2
. Both are unchecked by default. Next step is available after at least one of them is checked. - Two toggle buttons with labels
B1
andB2
. 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
,C3
options. 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 any starting boilerplate to setup your project. (e.g)create-react-app).
- Install redux and use the redux store to manage the state.
- 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 for react/redux/frontend. We will look at how you apply them.
- Use software engineering principles to write your code. We will ask about them.
- Well structured and readable code matters. Can other developers easily read your code and extend it?
- Keep a healthy commit history.
- Have at least 20% test coverage. Test at least one react component.
- Functional programming is a plus :)
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
GOOD LUCK!