diff --git a/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx b/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx index 1ece2df..4827f92 100644 --- a/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx +++ b/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx @@ -59,27 +59,33 @@ const OptionSection: React.FC<{ onChange={(e) => setHousePrice(parseInt(e.target.value))} /> -
{formatter.format(housePrice)}
++ {formatter.format( + getMonthlyPayment( + housePrice * 0.9, + option.interestRate, + option.mortgageTerm + ) + )} +
+ {formatter.format( + housePrice * option.depositPercentage + + option.fees.valuationFee + + option.fees.surveyFee + + option.fees.legalFee + + housePrice * 0.01 + // stamp duty + option.fees.searchFee + )} +
); diff --git a/src/components/MortgageCalculator/MortgageCalculator.css b/src/components/MortgageCalculator/MortgageCalculator.css index c33cc83..543b176 100644 --- a/src/components/MortgageCalculator/MortgageCalculator.css +++ b/src/components/MortgageCalculator/MortgageCalculator.css @@ -75,5 +75,7 @@ h2 { h3 { font-size: large; - color: lightgreen + p { + color: lightgreen + } } \ No newline at end of file