Added UI explanation in Loan Repayment fields

src/components/LoanRepayment.js

@@ -7,7 +7,7 @@ function LoanRepayment({
   setResults,
   setLoading,
 }) {
-  const [selectedSalary, setSelectedSalary] = useState('10th Percentile');
+  const [expectedSalary, setExpectedSalary] = useState('');
   const [tuitionType, setTuitionType] = useState('inState'); // Tuition type: inState or outOfState
   const [interestRate, setInterestRate] = useState(5.5); // Interest rate
   const [loanTerm, setLoanTerm] = useState(10); // Loan term in years
@@ -20,22 +20,32 @@ function LoanRepayment({
       setError('School data is missing. Loan calculations cannot proceed.');
       return false;
     }
-    if (interestRate <= 0) {
+    
-      setError('Interest rate must be greater than 0.');
+    if (isNaN(interestRate) || interestRate <= 0) {
+      setError('Interest rate must be a valid number greater than 0.');
       return false;
     }
-    if (loanTerm <= 0) {
+  
-      setError('Loan term must be greater than 0.');
+    if (isNaN(loanTerm) || loanTerm <= 0) {
+      setError('Loan term must be a valid number greater than 0.');
       return false;
     }
-    if (extraPayment < 0) {
+  
+    if (isNaN(extraPayment) || extraPayment < 0) {
       setError('Extra monthly payment cannot be negative.');
       return false;
     }
-    if (currentSalary < 0) {
+  
-      setError('Current salary cannot be negative.');
+    if (isNaN(currentSalary) || currentSalary < 0) {
+      setError('Current salary must be a valid number and cannot be negative.');
       return false;
     }
+  
+    if (isNaN(expectedSalary) || expectedSalary < 0) {
+      setError('Expected salary must be a valid number and cannot be negative.');
+      return false;
+    }
+  
     setError(null);
     return true;
   };
@@ -75,7 +85,7 @@ function LoanRepayment({
 
       const totalLoanCost = extraMonthlyPayment * monthsWithExtra;
 
-      let salary = Number(salaryData.find((point) => point.percentile === selectedSalary)?.value || 0);
+      let salary = Number(expectedSalary) || 0; 
       let netGain = 'N/A';
       let monthlySalary = 'N/A';
 
@@ -113,28 +123,44 @@ function LoanRepayment({
     </div>
     <div className="input-group">
       <label>Interest Rate:</label>
-      <input type="number" value={interestRate} onChange={(e) => setInterestRate(e.target.value)} />
+      <input type="number" 
+      value={interestRate} 
+      onChange={(e) => setInterestRate(e.target.value)} 
+      placeholder="Enter the interest rate"
+      />
     </div>
     <div className="input-group">
       <label>Loan Term (years):</label>
-      <input type="number" value={loanTerm} onChange={(e) => setLoanTerm(e.target.value)} />
+      <input type="number" 
+      value={loanTerm} 
+      onChange={(e) => setLoanTerm(e.target.value)} 
+      placeholder="Enter the length of the loan repayment period"
+      />
     </div>
     <div className="input-group">
       <label>Extra Monthly Payment:</label>
-      <input type="number" value={extraPayment} onChange={(e) => setExtraPayment(e.target.value)} />
+      <input type="number" 
+      value={extraPayment} 
+      onChange={(e) => setExtraPayment(e.target.value)} 
+      placeholder="Enter any additional monthly payment" />
+      />
     </div>
     <div className="input-group">
       <label>Current Salary:</label>
-      <input type="number" value={currentSalary} onChange={(e) => setCurrentSalary(e.target.value)} />
+      <input type="number" 
+      value={currentSalary} 
+      onChange={(e) => setCurrentSalary(e.target.value)} 
+      placeholder="Enter your current salary" />
     </div>
     <div className="input-group">
-      <label>Expected Salary:</label>
+          <label>Expected Salary:</label>
-      <select value={selectedSalary} onChange={(e) => setSelectedSalary(e.target.value)}>
+          <input 
-        {salaryData.map((point, index) => (
+            type="number" 
-          <option key={index} value={point.percentile}>{point.percentile}</option>
+            value={expectedSalary} 
-        ))}
+            onChange={(e) => setExpectedSalary(e.target.value)} 
-      </select>
+            placeholder="Enter expected salary" 
-    </div>
+          />
+        </div>
     <div className="calculate-button-container">
       <button type="submit">Calculate</button>
     </div>