Frontend Developer Intern Task: EMI Calculator Interface

Time: 2-3 hours

---

Task: Build a Responsive EMI Calculator Interface

Objective:
Develop a responsive user interface (UI) for an EMI (Equated Monthly Installment) calculator. The interface should allow users to input loan details and display the EMI results in a clear and intuitive manner.

---

Instructions:

1. User Input Form:

• Create a form that takes the following inputs from the user:
  • Loan amount
  • Interest rate
  • Loan tenure (in months/years)
  • Optional: Prepayment or extra EMI amount
• Ensure that form validation is in place (e.g., required fields, positive number inputs).

2. Display EMI Calculation Results:

• After form submission, display the calculated EMI, total interest payable, and total amount payable (principal + interest).
• If a prepayment is made, show how it affects the loan tenure and the total interest saved.
• Provide a month-wise breakdown of payments, including:
  • EMI paid
  • Interest paid
  • Principal paid
  • Remaining balance

3. User Experience Considerations:

• The design should be clean, responsive, and user-friendly.
• Use modern libraries or frameworks such as React, Vue, or Angular (React is preferred).
• Ensure the layout works well on both desktop and mobile screens.

4. Optional Advanced Features:

• Add the option for users to toggle between different themes (e.g., light/dark mode).
• Provide an option to save or print the EMI breakdown.

---

Requirements:

• Use HTML5, CSS3, and a frontend JavaScript framework (React, Vue, or Angular preferred).
• Use Bootstrap or a modern CSS framework for responsive design.
• Ensure clean, maintainable code with proper comments.
• Provide form validation and clear error messages for incorrect inputs.

---

Deliverables:

• A zipped folder containing:

  • The complete frontend project.
  • Instructions on how to run the project locally (via a README file).

• Bonus: Provide a live demo link (optional) if you host the app on a platform like Vercel, Netlify, or GitHub Pages.

---

Evaluation Criteria:

• Responsive and intuitive UI design.
• Functionality and form validation.
• Code quality and maintainability.
• Bonus points for additional features like dark mode or live demo.