/** * This app creates a comprehensive mortgage refinance offer comparison tool. * It calculates monthly payments, total interest paid, and displays charts for visual comparison. * It uses React for the frontend, Chart.js for data visualization, and Val Town's blob storage for data persistence. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import Chart from "https://esm.sh/chart.js/auto"; interface Offer { id: string; lender: string; rate: number; term: number; closingCosts: number; monthlyPayment: number; totalInterest: number; } function App() { const [offers, setOffers] = useState([]); const [newOffer, setNewOffer] = useState>({ lender: "", rate: 6, term: 30, closingCosts: 0, }); const [loanAmount, setLoanAmount] = useState(200000); const [selectedOffer, setSelectedOffer] = useState(null); const monthlyPaymentChartRef = useRef(null); const principalInterestChartRef = useRef(null); useEffect(() => { fetchOffers(); }, []); useEffect(() => { if (offers.length > 0) { updateMonthlyPaymentChart(); setSelectedOffer(offers[0]); } else { setSelectedOffer(null); } }, [offers]); useEffect(() => { if (selectedOffer) { updatePrincipalInterestChart(); } }, [selectedOffer]); const fetchOffers = async () => { try { const response = await fetch("/offers"); if (response.ok) { const data = await response.json(); const validOffers = data.filter((offer: any) => offer.id && offer.lender && typeof offer.rate === 'number' && typeof offer.term === 'number' && typeof offer.closingCosts === 'number' && typeof offer.monthlyPayment === 'number' && typeof offer.totalInterest === 'number' ); setOffers(validOffers); } else { console.error("Failed to fetch offers"); } } catch (error) { console.error("Error fetching offers:", error); } }; const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setNewOffer((prev) => ({ ...prev, [name]: name === "lender" ? value : Number(value) })); }; const calculateMonthlyPayment = (principal: number, annualRate: number, termYears: number) => { const monthlyRate = annualRate / 100 / 12; const numPayments = termYears * 12; return (principal * monthlyRate * Math.pow(1 + monthlyRate, numPayments)) / (Math.pow(1 + monthlyRate, numPayments) - 1); }; const calculateTotalInterest = (monthlyPayment: number, termYears: number, principal: number) => { return (monthlyPayment * termYears * 12) - principal; }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); const monthlyPayment = calculateMonthlyPayment(loanAmount, newOffer.rate, newOffer.term); const totalInterest = calculateTotalInterest(monthlyPayment, newOffer.term, loanAmount); const offerWithCalculations = { ...newOffer, monthlyPayment, totalInterest, }; try { const response = await fetch("/offers", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(offerWithCalculations), }); if (response.ok) { fetchOffers(); setNewOffer({ lender: "", rate: 0, term: 30, closingCosts: 0 }); } else { console.error("Failed to add offer"); } } catch (error) { console.error("Error adding offer:", error); } }; const handleDelete = async (id: string) => { try { const response = await fetch(`/offers/${id}`, { method: "DELETE" }); if (response.ok) { fetchOffers(); } else { console.error("Failed to delete offer"); } } catch (error) { console.error("Error deleting offer:", error); } }; const updateMonthlyPaymentChart = () => { const ctx = document.getElementById('monthlyPaymentChart') as HTMLCanvasElement; if (!ctx) return; if (monthlyPaymentChartRef.current) { monthlyPaymentChartRef.current.destroy(); } monthlyPaymentChartRef.current = new Chart(ctx, { type: 'bar', data: { labels: offers.map(offer => offer.lender), datasets: [{ label: 'Monthly Payment', data: offers.map(offer => offer.monthlyPayment), backgroundColor: 'rgba(54, 162, 235, 0.5)', borderColor: 'rgba(54, 162, 235, 1)', borderWidth: 1 }] }, options: { responsive: true, scales: { y: { beginAtZero: true, title: { display: true, text: 'Monthly Payment ($)' } } }, plugins: { title: { display: true, text: 'Monthly Payment Comparison' } } } }); }; const updatePrincipalInterestChart = () => { if (!selectedOffer) return; const ctx = document.getElementById('principalInterestChart') as HTMLCanvasElement; if (!ctx) return; if (principalInterestChartRef.current) { principalInterestChartRef.current.destroy(); } const monthlyRate = selectedOffer.rate / 100 / 12; const numPayments = selectedOffer.term * 12; const monthlyPayment = selectedOffer.monthlyPayment; const principalData = []; const interestData = []; let remainingBalance = loanAmount; for (let month = 1; month <= numPayments; month++) { const interestPayment = remainingBalance * monthlyRate; const principalPayment = monthlyPayment - interestPayment; principalData.push(principalPayment); interestData.push(interestPayment); remainingBalance -= principalPayment; } principalInterestChartRef.current = new Chart(ctx, { type: 'line', data: { labels: Array.from({ length: numPayments }, (_, i) => i + 1), datasets: [ { label: 'Principal', data: principalData, borderColor: 'rgba(54, 162, 235, 1)', fill: false }, { label: 'Interest', data: interestData, borderColor: 'rgba(255, 99, 132, 1)', fill: false } ] }, options: { responsive: true, scales: { x: { title: { display: true, text: 'Month' } }, y: { title: { display: true, text: 'Amount ($)' }, beginAtZero: true } }, plugins: { title: { display: true, text: `Principal vs Interest - ${selectedOffer.lender}` } } } }); }; return (

Mortgage Refinance Offer Comparison

Loan Details

Loan Amount ($) setLoanAmount(Number(e.target.value))} placeholder="e.g., 200000" min="0" required />

Add New Offer

Offer Comparison

{offers.length > 0 ? ( <> {offers.map((offer) => ( ))}

Lender	Interest Rate	Term (years)	Closing Costs	Monthly Payment	Total Interest	Actions
{offer.lender}	{offer.rate.toFixed(2)}%	{offer.term}	${offer.closingCosts.toFixed(2)}	${offer.monthlyPayment.toFixed(2)}	${offer.totalInterest.toFixed(2)}

{selectedOffer && (

)} ) : (

No offers added yet. Use the form above to add your first offer.

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const { blob } = await import("https://esm.town/v/std/blob"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const OFFERS_KEY = `${KEY}_offers`; if (request.method === "GET" && request.url.endsWith("/offers")) { const offers = await blob.getJSON(OFFERS_KEY) || []; return new Response(JSON.stringify(offers), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "POST" && request.url.endsWith("/offers")) { const offer = await request.json(); const offers = await blob.getJSON(OFFERS_KEY) || []; const newOffer = { ...offer, id: Date.now().toString() }; offers.push(newOffer); await blob.setJSON(OFFERS_KEY, offers); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "DELETE" && request.url.includes("/offers/")) { const id = request.url.split("/").pop(); const offers = await blob.getJSON(OFFERS_KEY) || []; const updatedOffers = offers.filter((offer: Offer) => offer.id !== id); await blob.setJSON(OFFERS_KEY, updatedOffers); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } return new Response(` Mortgage Refinance Offer Comparison

`, { headers: { "Content-Type": "text/html" }, }); } const css = ` body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f0f4f8; color: #333; } .container { max-width: 1000px; margin: 0 auto; } h1 { color: #2c3e50; text-align: center; margin-bottom: 30px; } h2 { color: #34495e; margin-bottom: 20px; } .card { background-color: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 20px; margin-bottom: 30px; } form { display: grid; gap: 15px; } .form-group { display: flex; flex-direction: column; } label { margin-bottom: 5px; font-weight: bold; color: #2c3e50; } input { padding: 10px; border: 1px solid #bdc3c7; border-radius: 4px; font-size: 16px; } button { padding: 12px 20px; background-color: #3498db; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #2980b9; } .action-buttons { display: flex; gap: 8px; } .select-btn, .delete-btn { padding: 6px 12px; font-size: 14px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s, color 0.3s; } .select-btn { background-color: #3498db; color: #fff; border: 1px solid #3498db; } .select-btn:hover { background-color: #2980b9; } .select-btn.selected { background-color: #2ecc71; border-color: #2ecc71; } .delete-btn { background-color: #e74c3c; color: #fff; border: 1px solid #e74c3c; } .delete-btn:hover { background-color: #c0392b; } table { width: 100%; border-collapse: collapse; margin-top: 20px; margin-bottom: 20px; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid #e0e0e0; } th { background-color: #f2f2f2; font-weight: bold; color: #2c3e50; } tr:hover { background-color: #f5f5f5; } .chart-container { margin-top: 30px; height: 400px; } footer { text-align: center; margin-top: 30px; font-size: 14px; } a { color: #3498db; text-decoration: none; } a:hover { text-decoration: underline; } `; export default server;

RefiComparison