Loan Calculator (₹)

/** @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 LoanCalculator() { const [principal, setPrincipal] = useState(''); const [rate, setRate] = useState(''); const [term, setTerm] = useState(''); const [monthlyPayment, setMonthlyPayment] = useState(null); const [totalInterest, setTotalInterest] = useState(null); const formatCurrency = (value) => { return new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value); }; const calculateLoan = () => { const p = parseFloat(principal); const r = parseFloat(rate) / 100 / 12; const n = parseFloat(term) * 12; if (p && r && n) { const monthlyPaymentCalc = p * (r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1); const totalPaymentCalc = monthlyPaymentCalc * n; const totalInterestCalc = totalPaymentCalc - p; setMonthlyPayment(monthlyPaymentCalc); setTotalInterest(totalInterestCalc); } }; const resetCalculator = () => { setPrincipal(''); setRate(''); setTerm(''); setMonthlyPayment(null); setTotalInterest(null); }; return (

Loan Amount (₹) setPrincipal(e.target.value)} placeholder="0" />

Annual Interest Rate (%) setRate(e.target.value)} placeholder="0" />

Loan Term (Years) setTerm(e.target.value)} placeholder="0" />

{monthlyPayment && ( <>

Monthly Payment {formatCurrency(monthlyPayment)}

Total Interest {formatCurrency(totalInterest)}

)}

View Source

); } function App() { return ; } 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" } }); } const css = ` body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f2f2f7; } .loan-calculator { background-color: white; border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; width: 300px; } .display { margin-bottom: 20px; } .input-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; color: #666; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; } .results { background-color: #f2f2f7; border-radius: 10px; padding: 15px; margin-bottom: 15px; } .result-item { display: flex; justify-content: space-between; margin-bottom: 10px; } .result-item span { color: #666; } .result-item strong { color: #000; } .buttons { display: flex; gap: 10px; } button { flex: 1; padding: 12px; border: none; border-radius: 10px; background-color: #007aff; color: white; font-size: 16px; cursor: pointer; } .reset-button { background-color: #ff3b30; color: white; } .source-link { display: block; text-align: center; margin-top: 15px; color: #666; text-decoration: none; font-size: 12px; } `;

thecybergenius