import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import React, { useState } from "https://esm.sh/react@18.2.0";

function LoanCalculator() {

const [loanAmount, setLoanAmount] = useState(100000);

const [interestRate, setInterestRate] = useState(5);

const [loanTerm, setLoanTerm] = useState(30);

const [monthlyPayment, setMonthlyPayment] = useState(0);

const [totalInterest, setTotalInterest] = useState(0);

const calculateLoan = () => {

const monthlyRate = (interestRate / 100) / 12;

const numberOfPayments = loanTerm * 12;

const monthlyPaymentCalc = loanAmount

* (monthlyRate * Math.pow(1 + monthlyRate, numberOfPayments))

/ (Math.pow(1 + monthlyRate, numberOfPayments) - 1);

const totalPaid = monthlyPaymentCalc * numberOfPayments;

const totalInterestPaid = totalPaid - loanAmount;

setMonthlyPayment(monthlyPaymentCalc);

setTotalInterest(totalInterestPaid);

};

return (

<div style={styles.container}>

<h1>🏠 Loan Calculator</h1>

<div style={styles.inputGroup}>

<label>

Loan Amount ($)

<input

type="number"

value={loanAmount}

onChange={(e) => setLoanAmount(Number(e.target.value))}