Adding loan amount.

UniqueClone · Jun 7, 2024 · 411c15e · 411c15e
1 parent 4ec381a
commit 411c15e
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 11 deletions.
diff --git a/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx b/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx
@@ -39,10 +39,25 @@ const OptionSection: React.FC<{
 }> = (props: { id: number; option: MortgageProperties }) => {
     const { id, option } = props;
     const [housePrice, setHousePrice] = React.useState(option.housePrice);
+    const [loanAmount, setLoanAmount] = React.useState(housePrice * 0.9);
     const useOneInterestRate = option.interestRate !== undefined;
     const [interestRate, setInterestRate] = React.useState(3.8);
     // const [mortgageTerm, setMortgageTerm] = React.useState(option.mortgageTerm);
 
+    const handleLoanAmountChange = (
+        loanAmount: number,
+        housePrice: number,
+        setLoanAmount: (loanAmount: number) => void
+    ) => {
+        if (loanAmount < 0) {
+            setLoanAmount(0);
+        } else if (loanAmount > housePrice * 0.9) {
+            setLoanAmount(housePrice * 0.9);
+        } else {
+            setLoanAmount(loanAmount);
+        }
+    };
+
     return (
         <div>
             <h2
@@ -52,6 +67,7 @@ const OptionSection: React.FC<{
             >
                 Option {id}
             </h2>
+
             <label>
                 House Price (€)
                 <input
@@ -60,6 +76,28 @@ const OptionSection: React.FC<{
                     onChange={(e) => setHousePrice(parseInt(e.target.value))}
                 />
             </label>
+
+            <br />
+
+            <label>
+                Loan Amount (%)
+                <input
+                    type="number"
+                    value={loanAmount}
+                    onChange={(e) =>
+                        handleLoanAmountChange(
+                            parseFloat(e.target.value),
+                            housePrice,
+                            setLoanAmount
+                        )
+                    }
+                />
+            </label>
+
+            <button onClick={() => setLoanAmount(housePrice * 0.9)}>
+                Set loan amount to 90%
+            </button>
+
             {!useOneInterestRate && (
                 <>
                     <br />
@@ -83,7 +121,7 @@ const OptionSection: React.FC<{
                 <p>
                     {formatter.format(
                         getMonthlyPayment(
-                            housePrice * 0.9,
+                            loanAmount,
                             option.interestRate ?? interestRate,
                             option.mortgageTerm
                         )
@@ -94,7 +132,8 @@ const OptionSection: React.FC<{
                 Savings Required:{" "}
                 <p>
                     {formatter.format(
-                        housePrice * option.depositPercentage +
+                        housePrice -
+                            loanAmount +
                             option.fees.valuationFee +
                             option.fees.surveyFee +
                             option.fees.legalFee +

diff --git a/src/components/MortgageCalculator/MortgageCalculator.css b/src/components/MortgageCalculator/MortgageCalculator.css
@@ -8,10 +8,10 @@ input[type="checkbox"] {
 input[type="number"] {
     border-radius: 2rem;
     border: 1px solid #ccc;
-    padding: 0.5em;
-    font-size: 1em;
+    padding: 0.5rem;
+    font-size: 1rem;
     font-family: inherit;
-    margin: 0.5em;
+    margin: 0.5rem;
     margin-bottom: 2rem;
     text-align: center;
 }
@@ -22,11 +22,16 @@ input[type="number"]:focus {
     box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.2);
 }
 
-/* form {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-} */
+button {
+    background-color: #424cfd;
+    color: white;
+    border: none;
+    border-radius: 2rem;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    cursor: pointer;
+    max-width: 65%;
+}
 
 label {
     font-weight: bold;
@@ -38,7 +43,7 @@ textarea {
     border: 1px solid #ccc;
     padding: 0.5em;
     padding-top: 10rem;
-    font-size: 1em;
+    font-size: 1rem;
     font-family: inherit;
     margin-bottom: 1em;
 }