The component uses the useState hook to define the following state variables:
cost and revenue store the user-inputted product cost and selling price or revenue.
markupPercentage and grossMarginPercentage store the calculated markup percentage and gross margin percentage.
The calculateMargin function is defined. This function tries to parse cost and revenue as floats, then calculates the profit (profitFloat), markup percentage (markupPercentageFloat), and gross margin percentage (grossMarginPercentageFloat) based on the formulae provided. The calculated percentages are then stored in the corresponding state variables using setMarkupPercentage and setGrossMarginPercentage.
In the rendering part, Material-UI components are used to create the user interface:
TextField components are used for inputting the product cost and selling price/revenue. The onChange event listeners update the corresponding state variables (setCost and setRevenue).
Clicking the "Calculate Margin" button triggers the calculateMargin function, which calculates and updates the markup percentage and gross margin percentage state variables.
The calculated percentages are displayed using the Typography component.
Screenshots(Attach 2 screenshots of your own input and output) -
By raising this PR I affirm that -
[x] My code follows the guidelines of this project.
[x] I have performed a self-review of my own code.
[x] I have commented my code.
[x] My code gives the correct output.
[x] I affirm that I strictly follow contributing guidelines and code of conduct.
Issue Id you have worked upon -
Margin Calculator
Briefly explain your program logic -
The component uses the useState hook to define the following state variables: cost and revenue store the user-inputted product cost and selling price or revenue. markupPercentage and grossMarginPercentage store the calculated markup percentage and gross margin percentage. The calculateMargin function is defined. This function tries to parse cost and revenue as floats, then calculates the profit (profitFloat), markup percentage (markupPercentageFloat), and gross margin percentage (grossMarginPercentageFloat) based on the formulae provided. The calculated percentages are then stored in the corresponding state variables using setMarkupPercentage and setGrossMarginPercentage.
In the rendering part, Material-UI components are used to create the user interface: TextField components are used for inputting the product cost and selling price/revenue. The onChange event listeners update the corresponding state variables (setCost and setRevenue). Clicking the "Calculate Margin" button triggers the calculateMargin function, which calculates and updates the markup percentage and gross margin percentage state variables. The calculated percentages are displayed using the Typography component.
Screenshots(Attach 2 screenshots of your own input and output) -
By raising this PR I affirm that -
[x] My code follows the guidelines of this project.
[x] I have performed a self-review of my own code.
[x] I have commented my code.
[x] My code gives the correct output.
[x] I affirm that I strictly follow contributing guidelines and code of conduct.