/** @jsxImportSource https://esm.sh/react@18.2.0 */ 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 (

🏠 Loan Calculator

Loan Amount ($) setLoanAmount(Number(e.target.value))} style={styles.input} /> Interest Rate (%) setInterestRate(Number(e.target.value))} style={styles.input} /> Loan Term (Years) setLoanTerm(Number(e.target.value))} style={styles.input} />

Loan Details

Monthly Payment: ${monthlyPayment.toFixed(2)}

Total Interest Paid: ${totalInterest.toFixed(2)}

Total Amount Paid: ${(monthlyPayment * loanTerm * 12).toFixed(2)}

View Source

); } const styles = { container: { fontFamily: "Arial, sans-serif", maxWidth: "500px", margin: "0 auto", padding: "20px", textAlign: "center", backgroundColor: "#f4f4f4", borderRadius: "8px", }, inputGroup: { display: "flex", flexDirection: "column", gap: "10px", marginBottom: "20px", }, input: { padding: "10px", borderRadius: "4px", border: "1px solid #ddd", }, button: { padding: "10px", backgroundColor: "#007bff", color: "white", border: "none", borderRadius: "4px", cursor: "pointer", }, results: { backgroundColor: "white", padding: "15px", borderRadius: "8px", boxShadow: "0 2px 4px rgba(0,0,0,0.1)", }, sourceLink: { display: "block", marginTop: "15px", color: "#666", textDecoration: "none", }, }; function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Loan Calculator

`, { headers: { "content-type": "text/html" }, }, ); }

arifio