30 Claude Prompts That Build Calculators

You are a senior front-end engineer who builds clean, accurate financial calculators. <context> I need a fully working mortgage payment calculator built as one self-contained HTML file with inline CSS and vanilla JS, so I can preview it instantly as an artifact and use it right away. </context> <inputs> - Currency and symbol: [E.G. USD, $] - Default loan amount: [E.G. 350000] - Default annual interest rate: [E.G. 6.5%] - Default term in years: [E.G. 30] - Extras to include: [PROPERTY TAX, INSURANCE, PMI, OR NONE] </inputs> <task> Build a calculator with labeled number inputs for loan amount, interest rate, term, and any extras above. On every input change, compute the monthly principal-and-interest payment using the standard amortization formula, plus total interest paid and total cost over the loan. Show a clear results panel and a simple breakdown of principal vs interest. Recalculate live, no submit button needed. </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only, no libraries. - Validate inputs (reject negative or empty values) and format money with the chosen currency and thousands separators. - Accessible labels tied to inputs; results update instantly and are keyboard friendly. </constraints> <format> Return the full HTML in an artifact, then state the exact amortization formula you used and how to add an extra-payment field. </format>

You are a financial-software engineer who specializes in accurate amortization tools. <context> I need a loan amortization calculator that prints a full payment schedule, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. EUR, EUR] - Loan amount: [E.G. 25000] - Annual interest rate: [E.G. 8.9%] - Term in months: [E.G. 60] - Optional one-time extra payment and the month it applies: [AMOUNT AND MONTH OR NONE] </inputs> <task> Build a calculator that computes the fixed monthly payment, then renders a month-by-month table showing payment number, payment, principal portion, interest portion, and remaining balance. Above the table, show monthly payment, total interest, and payoff date. If an extra payment is set, apply it and show interest and months saved versus the baseline. </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Table must scroll cleanly on mobile and use formatted currency; round consistently so the final balance lands at zero. - Accessible table markup with a caption and column headers. </constraints> <format> Return the full HTML in an artifact, then explain how you handled rounding so the schedule fully pays off, and how to export the table to CSV. </format>

You are a mortgage analyst who builds buyer-affordability tools. <context> I need a home-affordability calculator that tells a buyer the max home price they can target, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. GBP, ] - Gross annual income: [E.G. 90000] - Existing monthly debts: [E.G. 600] - Down payment available: [E.G. 40000] - Expected interest rate and term: [E.G. 6%, 30 YEARS] - Max debt-to-income ratio to use: [E.G. 36%] </inputs> <task> Build a calculator that derives the maximum affordable monthly housing payment from income and the chosen DTI, subtracts existing debts, then back-solves the largest loan that payment supports at the given rate and term, and adds the down payment to show the max home price. Display max home price, max loan, estimated monthly payment, and the DTI you assumed, with a short plain-language readout of what it means. </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Recalculate live; validate inputs and format currency; show a gentle warning if existing debts already exceed the DTI budget. - Accessible labels and a clear, scannable results card. </constraints> <format> Return the full HTML in an artifact, then explain the DTI math you used and how to add a property-tax and insurance adjustment. </format>

You are a personal-finance tool builder who helps people compare car-financing options. <context> I need a calculator that compares buying with an auto loan versus leasing, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. USD, $] - Vehicle price: [E.G. 38000] - Down payment: [E.G. 5000] - Loan rate and term: [E.G. 7%, 60 MONTHS] - Lease monthly and term: [E.G. 420, 36 MONTHS] - Expected resale value after the loan term: [E.G. 18000] </inputs> <task> Build a two-column calculator. The loan side computes the monthly payment, total paid, and net cost after subtracting expected resale equity. The lease side computes total lease cost over its term with no residual equity. Show both monthly payments, both total costs, and a clear verdict on which is cheaper over the compared horizon, plus the dollar difference. </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Recalculate live; format currency; handle the case where lease and loan terms differ by normalizing the comparison and labeling the assumption. - Accessible labels and a side-by-side layout that stacks on mobile. </constraints> <format> Return the full HTML in an artifact, then explain how you normalized the differing terms and the one assumption a buyer should double-check. </format>

You are a financial-wellness engineer who builds debt-payoff planners. <context> I need a calculator that compares the snowball and avalanche debt-payoff methods across multiple debts, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. USD, $] - Starter debts (name, balance, APR, minimum payment): [LIST 2-4] - Extra monthly amount available beyond minimums: [E.G. 300] </inputs> <task> Build a calculator that lets me add or remove debt rows (name, balance, APR, minimum). Given the extra monthly amount, simulate both strategies month by month: snowball pays the smallest balance first, avalanche pays the highest APR first, both rolling freed-up payments forward. Show months to debt-free, total interest paid, and total time and interest saved by avalanche versus snowball, side by side. </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Support dynamic add/remove of debt rows; validate that minimums cover at least the monthly interest, warn otherwise. - Format currency; accessible inputs and a clear two-strategy results panel. </constraints> <format> Return the full HTML in an artifact, then explain the month-by-month simulation logic and how to add a target payoff-date mode. </format>

You are a B2B growth engineer who builds ROI calculators that sales teams use to close deals. <context> I need a clean ROI calculator for my product or initiative, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. USD, $] - Cost of the investment: [E.G. ANNUAL PRICE OR PROJECT COST] - The value drivers (name and how each is measured): [E.G. HOURS SAVED PER WEEK, COST PER HOUR] - Time horizon: [E.G. 12 MONTHS] - Optional ramp-up before full value: [E.G. 2 MONTHS OR NONE] </inputs> <task> Build a calculator where the user enters their numbers for each value driver. Compute total gains over the horizon, net gain after the investment cost, ROI percentage, and payback period in months. Show a clear results card with the headline ROI percentage, the net dollar gain, and a one-line plain-language summary like "pays for itself in X months". </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Recalculate live; validate inputs and format currency and percentages. - Accessible labels; results card readable enough to screenshot for a sales deck. </constraints> <format> Return the full HTML in an artifact, then explain the value-driver math and how to make the calculator embeddable in a marketing site. </format>

You are a tools engineer who builds instant-quote calculators for service businesses. <context> I need a configurable pricing estimator that gives prospects an instant quote, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. USD, $] - Base price: [E.G. 500] - Quantity or size driver and its unit price: [E.G. PER PAGE, PER SEAT, PER SQ FT] - Add-on options with prices (checkboxes): [LIST 3-5] - Tiers or multipliers (e.g. rush, complexity): [LIST OR NONE] - Optional discount rule: [E.G. 10% OVER 10 UNITS OR NONE] </inputs> <task> Build an estimator with a quantity input, checkboxes for add-ons, and a dropdown for any tier or multiplier. Compute the running total live: base plus quantity times unit price, plus selected add-ons, times any multiplier, minus any discount that applies. Show an itemized line-by-line breakdown and a bold final estimate, with a note that it is an estimate, not a binding quote. </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Recalculate on every change; format currency; show the itemized breakdown so the number feels transparent. - Accessible form controls with proper labels and a clear total. </constraints> <format> Return the full HTML in an artifact, then explain the pricing-rule order of operations and how to add a "request this quote" capture step. </format>

You are a startup-finance engineer who builds break-even tools for founders. <context> I need a break-even calculator that shows how many units I must sell to cover costs, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. USD, $] - Fixed costs per period: [E.G. 12000 PER MONTH] - Variable cost per unit: [E.G. 8] - Price per unit: [E.G. 29] - Optional target profit to also solve for: [E.G. 5000 OR NONE] </inputs> <task> Build a calculator that computes the contribution margin per unit, the break-even point in units and in revenue, and, if a target profit is given, the units needed to hit it. Show a results panel with break-even units, break-even revenue, contribution margin, and contribution-margin ratio. Include a small text-based sensitivity readout showing how break-even shifts if price rises or falls 10%. </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Recalculate live; warn clearly if price is at or below variable cost (no break-even possible). - Format currency and percentages; accessible labels and a scannable results card. </constraints> <format> Return the full HTML in an artifact, then explain the contribution-margin formula and how to extend it to multiple products. </format>

You are a SaaS-metrics engineer who builds revenue calculators for subscription businesses. <context> I need a SaaS revenue calculator that projects MRR, ARR, and churn-adjusted growth, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. USD, $] - Current paying customers: [E.G. 200] - Average revenue per account per month: [E.G. 49] - New customers added per month: [E.G. 40] - Monthly churn rate: [E.G. 4%] - Projection horizon in months: [E.G. 12] </inputs> <task> Build a calculator that projects customers, MRR, and ARR month by month, applying new adds and churn each period. Show current MRR and ARR, end-of-horizon MRR and ARR, net new MRR over the period, and the approximate customer lifetime in months implied by the churn rate. Render a compact month table or a simple text trajectory of MRR by month. </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Recalculate live; validate that churn is between 0 and 100%; format currency. - Accessible inputs and a results layout that stacks cleanly on mobile. </constraints> <format> Return the full HTML in an artifact, then explain how churn compounds in your month-by-month loop and how to add expansion revenue. </format>

You are a tools engineer who helps freelancers price their time correctly. <context> I need a calculator that turns a target take-home income into the hourly rate I must charge, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. USD, $] - Target annual take-home income: [E.G. 90000] - Annual business expenses: [E.G. 12000] - Tax rate to set aside: [E.G. 25%] - Billable hours per week: [E.G. 25] - Weeks worked per year (after vacation): [E.G. 46] </inputs> <task> Build a calculator that grosses up the take-home for taxes, adds expenses, divides by total annual billable hours, and outputs the required hourly rate. Also show the implied day rate, the total billable hours per year, and how the rate changes if billable hours drop to a realistic 60% utilization. Display a clear results card with the headline hourly rate. </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Recalculate live; validate inputs and format currency and percentages. - Accessible labels; results readable enough to set your rate from at a glance. </constraints> <format> Return the full HTML in an artifact, then explain the gross-up math and why you also showed the 60%-utilization rate. </format>

You are a front-end engineer who builds accurate savings-growth calculators. <context> I need a compound interest calculator with regular contributions, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. USD, $] - Starting principal: [E.G. 10000] - Monthly contribution: [E.G. 500] - Annual interest rate: [E.G. 7%] - Compounding frequency: [MONTHLY / ANNUALLY] - Years to grow: [E.G. 20] </inputs> <task> Build a calculator that projects the balance over time using compound interest plus periodic contributions. Show the final balance, total contributed, and total interest earned. Render a year-by-year table or a simple text trajectory of the balance, and clearly separate how much growth came from contributions versus from compounding. </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Recalculate live; validate inputs; format currency; handle the chosen compounding frequency correctly. - Accessible labels and a results layout that reads cleanly on mobile. </constraints> <format> Return the full HTML in an artifact, then state the compounding formula you used and how to add an inflation-adjusted (real) balance line. </format>

You are a retirement-planning engineer who builds clear, honest projection tools. <context> I need a retirement savings calculator that projects whether I am on track, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. USD, $] - Current age and target retirement age: [E.G. 34 AND 65] - Current savings: [E.G. 75000] - Monthly contribution: [E.G. 800] - Expected annual return before retirement: [E.G. 6.5%] - Desired annual income in retirement: [E.G. 50000] </inputs> <task> Build a calculator that grows current savings plus monthly contributions to the retirement age, then estimates how long that nest egg lasts at the desired annual withdrawal (assume a conservative post-retirement return, e.g. 4%). Show projected balance at retirement, years the money is expected to last, and a clear on-track or shortfall verdict with the extra monthly amount needed to close any gap. </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Recalculate live; validate that retirement age exceeds current age; format currency. - Accessible labels and an unambiguous verdict line (green on track, amber shortfall). </constraints> <format> Return the full HTML in an artifact, then explain your withdrawal-depletion logic and the assumptions a user should adjust for their situation. </format>

You are a personal-finance tool builder who helps people plan toward a specific goal. <context> I need a savings-goal calculator that tells me when I will reach a target, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. USD, $] - Savings goal amount: [E.G. 20000] - Amount already saved: [E.G. 4000] - Monthly contribution: [E.G. 600] - Annual interest rate on savings: [E.G. 3%] - Optional hard deadline: [E.G. 24 MONTHS OR NONE] </inputs> <task> Build a calculator that computes how many months it takes to reach the goal given contributions and interest, and the exact date it lands on. If a deadline is set, compute the monthly contribution required to hit the goal by then and show whether the current plan makes it. Display months to goal, the target date, and total interest earned along the way. </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Recalculate live; validate inputs; format currency; handle the case where the goal is already met. - Accessible labels and a clear, encouraging results card. </constraints> <format> Return the full HTML in an artifact, then explain the dual mode (solve-for-time vs solve-for-contribution) and how to add multiple simultaneous goals. </format>

You are a finance engineer who builds investment-performance calculators. <context> I need a calculator that measures an investment's return, including annualized CAGR, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. USD, $] - Initial investment value: [E.G. 10000] - Final value: [E.G. 18500] - Holding period: [E.G. 5 YEARS] - Optional additional contributions during the period: [LIST AMOUNTS AND TIMING OR NONE] </inputs> <task> Build a calculator that computes total return percentage, absolute gain or loss, and the compound annual growth rate (CAGR) over the holding period. If contributions are added, compute a simple money-weighted approximation and label it as an approximation. Show a results card with total return, annualized CAGR, and the absolute gain, with a one-line plain explanation of what CAGR means. </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Recalculate live; validate inputs; format currency and percentages; handle losses (negative returns) gracefully. - Accessible labels and a clear distinction between total return and annualized return. </constraints> <format> Return the full HTML in an artifact, then state the CAGR formula and explain why annualized return differs from total return. </format>

You are a financial-wellness engineer who builds practical budgeting tools. <context> I need an emergency-fund calculator that tells me how much cushion to hold and how long to build it, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Currency and symbol: [E.G. USD, $] - Essential monthly expenses (rent, food, utilities, insurance, minimum debt): [LIST OR TOTAL] - Months of cushion desired: [E.G. 6] - Amount already saved for emergencies: [E.G. 3000] - Monthly amount you can set aside: [E.G. 500] </inputs> <task> Build a calculator that sums essential expenses, multiplies by the desired months to get the target fund, subtracts what is already saved to get the remaining gap, and computes how many months of saving it takes to close the gap. Show the target fund, the gap, the months to fully funded, and a short readout of what the fund covers (e.g. "this covers 6 months if income stops"). </task> <constraints> - One self-contained, responsive HTML file; vanilla JS only. - Recalculate live; allow either a single expense total or itemized rows; format currency. - Accessible labels and a reassuring, clear results card. </constraints> <format> Return the full HTML in an artifact, then explain why you anchored on essential rather than total expenses and how to adjust months by job stability. </format>