-
You are provided with an incomplete
<Checkout />
component. -
You are not allowed to add any additional HTML elements.
-
You are not allowed to use refs.
-
Once the
<Checkout />
component is mounted, load the products using thegetProducts
function. -
Once all the data is successfully loaded, hide the loading icon.
-
Render each product object as a
<Product/>
component, passing in the necessary props. -
Implement the following functionality:
- The add and remove buttons should adjust the ordered quantity of each product
- The add and remove buttons should be enabled/disabled to ensure that the ordered quantity can’t be negative and can’t exceed the available count for that product.
- The total shown for each product should be calculated based on the ordered quantity and the price
- The total in the order summary should be calculated
- For orders over $1000, apply a 10% discount to the order. Display the discount text only if a discount has been applied.
- The total should reflect any discount that has been applied
- All dollar amounts should be displayed to 2 decimal places
The project uses yarn. In the project directory, you can run:
Installs all the dependencies required for the project to run.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
- Code quality
- Code readability
- Obviosuly it should work as expected
- Don't need extra features, just the ones mentioned in the requirements
- Fork this repository and submit your solution as a pull request to a specific branch that is assigned to you. Don't submit PR to main branch ❌.
Make Pull Request to the branch that is assigned to you.
For example, if your candidate ID is candidate-001
, then make a pull request to branch candidate-001
. I hope it is clear ✅
- 1 hour from the time you start the assignment.
- Don't share your solution with anyone else.
- Don't share the source code of this assignment with anyone else.
- If you have any questions, please feel free to reach out to me from telegram.