/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useMemo } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import { Chart } from "https://esm.sh/react-chartjs-2@5.2.0"; import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from "https://esm.sh/chart.js@4.4.0"; ChartJS.register( CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend ); function calculateLoanDetails(principal: number, annualRate: number, years: number) { const monthlyRate = annualRate / 100 / 12; const months = years * 12; const monthlyPayment = principal * (monthlyRate * Math.pow(1 + monthlyRate, months)) / (Math.pow(1 + monthlyRate, months) - 1); const totalPayment = monthlyPayment * months; const totalInterest = totalPayment - principal; const amortizationSchedule = Array.from({ length: months }, (_, index) => { const balance = principal * Math.pow(1 + monthlyRate, index + 1) - (monthlyPayment * (Math.pow(1 + monthlyRate, index + 1) - 1) / monthlyRate); const interestPayment = principal * monthlyRate * Math.pow(1 + monthlyRate, index) - (monthlyPayment * (Math.pow(1 + monthlyRate, index) - 1) / monthlyRate); const principalPayment = monthlyPayment - interestPayment; return { month: index + 1, payment: monthlyPayment, principalPayment, interestPayment, remainingBalance: Math.max(balance, 0) }; }); return { monthlyPayment, totalPayment, totalInterest, amortizationSchedule }; } function App() { const [principal, setPrincipal] = useState(200000); const [rate, setRate] = useState(6.5); const [years, setYears] = useState(30); const loanDetails = useMemo(() => calculateLoanDetails(principal, rate, years), [principal, rate, years] ); const chartData = { labels: ['Monthly Payment', 'Total Interest', 'Total Payment'], datasets: [{ label: 'Loan Breakdown', data: [ loanDetails.monthlyPayment, loanDetails.totalInterest, loanDetails.totalPayment ], backgroundColor: ['#36A2EB', '#FF6384', '#4BC0C0'] }] }; const amortizationChartData = { labels: loanDetails.amortizationSchedule .filter((_, i) => i % Math.floor(loanDetails.amortizationSchedule.length / 10) === 0) .map(entry => `Month ${entry.month}`), datasets: [ { label: 'Principal Payment', data: loanDetails.amortizationSchedule .filter((_, i) => i % Math.floor(loanDetails.amortizationSchedule.length / 10) === 0) .map(entry => entry.principalPayment), backgroundColor: '#36A2EB' }, { label: 'Interest Payment', data: loanDetails.amortizationSchedule .filter((_, i) => i % Math.floor(loanDetails.amortizationSchedule.length / 10) === 0) .map(entry => entry.interestPayment), backgroundColor: '#FF6384' } ] }; return (

🏠 Advanced Loan Calculator

Loan Amount ($): setPrincipal(Number(e.target.value))} style={{ width: '100%' }} />

Annual Interest Rate (%): setRate(Number(e.target.value))} style={{ width: '100%' }} />

Loan Term (Years): setYears(Number(e.target.value))} style={{ width: '100%' }} />

Loan Summary

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

Total Payment: ${loanDetails.totalPayment.toFixed(2)}

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

Loan Breakdown

Amortization Progression

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(` Advanced Loan Calculator

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

adofficial