/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function calculateMortgage(principal: number, annualRate: number, years: number) { const monthlyRate = annualRate / 12 / 100; const numPayments = years * 12; const monthlyPayment = principal * (monthlyRate * Math.pow(1 + monthlyRate, numPayments)) / (Math.pow(1 + monthlyRate, numPayments) - 1); const totalPayment = monthlyPayment * numPayments; const totalInterest = totalPayment - principal; return { monthlyPayment: monthlyPayment.toFixed(2), totalPayment: totalPayment.toFixed(2), totalInterest: totalInterest.toFixed(2) }; } function App() { const [principal, setPrincipal] = useState(300000); const [rate, setRate] = useState(6.5); const [years, setYears] = useState(30); const [results, setResults] = useState | null>(null); const handleCalculate = () => { const mortgageDetails = calculateMortgage(principal, rate, years); setResults(mortgageDetails); }; return (

🏠 Mortgage Calculator

Loan Amount ($) setPrincipal(Number(e.target.value))} min="1000" step="1000" />

Annual Interest Rate (%) setRate(Number(e.target.value))} min="0" step="0.1" />

Loan Term (Years) setYears(Number(e.target.value))} min="1" max="50" />

{results && (

Mortgage Breakdown

Monthly Payment: ${results.monthlyPayment}

Total Payment: ${results.totalPayment}

Total Interest: ${results.totalInterest}

View Source

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Mortgage Calculator

`, { headers: { "content-type": "text/html" } }); } const css = ` body { font-family: system-ui, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; line-height: 1.6; background-color: #f4f4f4; } .mortgage-calculator { background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } .inputs { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; } label { display: block; margin-bottom: 5px; color: #666; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } button { background-color: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #0056b3; } .results { background-color: #f8f9fa; border-radius: 4px; padding: 15px; text-align: center; } .results p { margin: 10px 0; } `;

IzzyM