Loan Calculator

Easy
64
2
68.1% Acceptance

In this lab, you'll create a simple application using React that calculates the Equated Monthly Installment (EMI) based on the total loan amount and the number of monthly payments.

Objective

Your task is to build an EMI calculator that takes two inputs - the total loan amount and the number of payments - and displays the amount to be paid each month.

Steps to Build the App

  1. Setup Your Environment: Create a new React application and set up the necessary components.
  2. Create Input Fields:
    • Create an input field for the total loan amount. Assign it the ID totalCost.
    • Add another input field for the number of monthly payments. This should have the ID numberOfIntervals.
  3. Implement the Calculate Button: Add a button that, when clicked, calculates the monthly payment. This button must have the ID calculate.
  4. Display Output: Show the result of the calculation in a div element. The ID of this element should be output. The monthly installment should be displayed as a floating-point number, rounded to two decimal places.

Testing IDs

Your implementation will be tested using these specific IDs:

  • totalCost for the total loan amount input field.
  • numberOfIntervals for the number of payments input field.
  • calculate for the calculate button.
  • output for the div displaying the calculated monthly installment.

Challenges

Challenge 1: Create Required Input Elements and Button

  • Input for Total Cost: Create an input element for entering the total loan amount. This input must have the ID totalCost.
  • Input for Number of Payments: Add another input for specifying the number of monthly payments. Assign it the ID numberOfIntervals.
  • Calculate Button: Implement a button that triggers the EMI calculation. This button should be identifiable with the ID calculate.

Challenge 2: Implement Calculation and Display Output

  • Calculate Monthly Payment: On clicking the calculate button, the application should compute the monthly installment. The installment is calculated by dividing the total cost by the number of intervals.
  • Display Result: Show the calculated monthly installment in a div element with the ID output. The amount should be displayed as a floating-point number with two decimal places.