- Use node version(LTS) should be
v16.16.0
- Don't change/override package.json
- The Submission should not contain spaces ,for example /rct-101 folder/eval will not work
- Do not push node_modules and package_lock.json to GitHub
✅ able to submit the app - 1 mark ( minimum score )
✅ Check if the title 'SPLITTER' is present - 1 mark
✅ Check if the Left and Right box present - 1 mark
✅ Check initial structure - 1 mark
✅ Check default tip as 15% - 1 mark
✅ Check select tip buttons-2 - 2 marks
✅ Check select tip buttons-1 - 2 marks
✅ Check Custom tip - 2 marks
✅ Checking reset button - 2 marks
Create the following application:
- Your challenge is to build out this tip calculator app and get it looking as close to the design as possible.
- where the inputs are
- total bill
- % of tip
- number of people
- output
- what is the tip paid per person
- what is the total amount paid per person
- Calculate the correct tip and total cost of the bill per person
- Use node version(LTS) should be
v16.16.0
- Don't change/override package.json
- please make sure you do not push package-lock.json
- Run the following commands
npm install --engine-strict
npm start
- src
- Components
- BillPage.jsx
- LeftBox.jsx
- RightBox.jsx
- App.js
- App.css
- index.js
- Components
You can find the test case under the cypress folder with the file name spec.cy.js
- title
SPLITTER
should present
- On default load, the tip % should be
15%
and the no . of people should be1
. - Bill
- input, where the total amount to pay added with
className="bill_input"
- input, where the total amount to pay added with
- Select Tip %
- 5 buttons for different tip percentages.
- one input for
Custom Tip
withclassName="custom"
- Number of people
- input with value by default is
1
we can increase it i.e. we are adding contribution to pay bill Amount withclassName="people"
- input with value by default is
- Input bill-900, tip as 10% and no . of people 3
- output expected for single person tip Amount -30.00 and total -330.00
- hint use num.toFixed();
- calculate the tip amount for a single person with
className="tipAmount"
- calculate the
Total
amount to pay by a single person withclassName="TotalAmount"
- On clicking the
RESET
button withclassName="Reset"
Output Expected as-- Bill input = 0
- no. of People = 1
- Tip Amount = 0.00
- Total Amount = 0.00
- Do not remove the
data-testid
andclassName
attributes from the boilerplate anywhere. Removing them may lead to low scores - Do not remove the classNames present on the tags ,they are required for the UI.
- The
options
,type
,name
,tags
etc mentioned above are CASE-SENSITIVE. So ensure to use them in the same form as given above. - Do not change the current folder structure and names of components/files provided.
- the system on cp.masaischool.com may take between 1-20 minutes for responding,
- so we request you to read the problem carefully and debug it before itself
- we also request you not just submit it last minute
- try to keep one submission at a time