As a user who needs to get lend some money I would like to have the ability to choose the amount and term of the loan so that I know what will be my monthly instalment and interest.
- 2 sliders
- 1st slider controls the
amount - 2nd slider controls the
term(number of loan)
- 1st slider controls the
- The calculator has a configuration. The configuration contains the minimum, maximum and step for both
amountandterm. It also contains the default value. - Each slider has also a
<select>besides it. The<select>contains all possible values (takestepinto account). - If either of these control elements change the second one must be updated as well (slider changes -> select is updated and vice versa).
API is available at https://js-developer-second-round.herokuapp.com/api/v1/
- https://js-developer-second-round.herokuapp.com/api/v1/application/constraints contains the configuration values for the calculator (min, max, default value, step for both
amountandterm) - https://js-developer-second-round.herokuapp.com/api/v1/application/first-loan-offer?amount=1000&term=5 based on the variables
amountandtermit responds with a JSON object that contains all information about the offered loan. - https://js-developer-second-round.herokuapp.com/api/v1/application/real-first-loan-offer?amount=1000&term=5 this endpoint works exactly in the same way as
/api/v1/application/first-loan-offerthe only difference being that it behaves more like a real-life service in the way that it has latency (randomly between 0 and 1000 ms)
- Use Flux (Redux) to capture the state of the application
- Use Immutable.js or Ramda to save and manipulate the state
- Use some boilerplate to kick off the project (e.g. Este)
- Use
/api/v1/application/real-first-loan-offerand offer should be rendered correctly (so your selected amount and term will allways correspond with shown offer) - Cache all requests so the application is more responsive to user input
- Server rendering
- Use inline styles
Example of a production application: https://www.vivus.com.mx/