/** @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 SIPCalculator() { const [monthlyInvestment, setMonthlyInvestment] = useState(5000); const [expectedReturn, setExpectedReturn] = useState(12); const [investmentPeriod, setInvestmentPeriod] = useState(5); const [result, setResult] = useState(null); const calculateSIP = () => { const monthlyRate = expectedReturn / 12 / 100; const totalMonths = investmentPeriod * 12; const futureValue = monthlyInvestment * ((Math.pow(1 + monthlyRate, totalMonths) - 1) / monthlyRate) * (1 + monthlyRate); const totalInvestment = monthlyInvestment * totalMonths; const totalGain = futureValue - totalInvestment; setResult({ futureValue: Math.round(futureValue), totalInvestment: Math.round(totalInvestment), totalGain: Math.round(totalGain) }); }; return (

📈 SIP Calculator

Monthly Investment (₹) setMonthlyInvestment(Number(e.target.value))} /> Expected Annual Return (%) setExpectedReturn(Number(e.target.value))} /> Investment Period (Years) setInvestmentPeriod(Number(e.target.value))} />

{result && (

Investment Summary

Future Value: ₹{result.futureValue.toLocaleString()}

Total Investment: ₹{result.totalInvestment.toLocaleString()}

Total Gain: ₹{result.totalGain.toLocaleString()}

)}

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

`, { headers: { "content-type": "text/html" } }); } const css = ` body { font-family: 'Arial', sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f4f4f4; } .sip-calculator { background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } .input-group { display: flex; flex-direction: column; gap: 15px; } label { display: flex; flex-direction: column; font-weight: bold; } input { padding: 10px; margin-top: 5px; border: 1px solid #ddd; border-radius: 4px; } button { background-color: #4CAF50; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #45a049; } .result { margin-top: 20px; padding: 15px; background-color: #e8f5e9; border-radius: 4px; } footer { margin-top: 20px; text-align: center; font-size: 0.8em; } `;

sipCalculator

Versions

v0