Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Mortgage Calculator
easy25 min
Build a loan payment form that computes the monthly principal-and-interest amount. Practice input validation, a derived calculation and clear result handling.
Requirements
Start with amount 200000, annual rate 6 and term 30 years; do not show a payment until calculation.
Accept a finite loan amount greater than 0 and at most 100000000; a finite annual percentage rate in [0,100]; and a whole-number term from 1 to 50 years. Reject blank fields.
Use n = years × 12 and r = annualRate / 1200. For r > 0, payment = principal × r / (1 − (1 + r)^(-n)); for zero interest use principal / n.
Display only the monthly payment rounded to exactly two decimals in #payment. The calculation excludes taxes, insurance, fees and other loan costs.
For invalid inputs, clear the payment and show exactly “Enter a valid loan amount, rate and term.” Clear stale results and errors when an input changes. Submit without navigation.
Keep the supplied IDs so browser checks can find the controls. Use your selected framework to update the view; do not query or mutate rendered DOM manually.
Examples
Example 1
Input: Amount 200000, rate 6%, term 30 years
Output: 1199.10
Example 2
Input: Amount 1200, rate 0%, term 1 year
Output: 100.00
Submit valid principal, annual percentage rate and whole years to calculate a two-decimal monthly payment.
