Build a Calculator App

A business calculator is one of the best things you can build with Claude Code.

It is fast to build, immediately valuable to a specific person, and one of the highest-converting lead tools you can put on a landing page. This lesson gives you a complete ready-to-use prompt for a Freelance Rate Calculator, the most universally useful calculator for this community. You can adapt it for any calculator type.

Why calculators work so well

When someone fills in a calculator and sees a specific number, their number, they feel understood. That feeling is more powerful than any headline or testimonial.

A great calculator solves a specific problem, produces a specific output rather than a range, is free which removes friction for the first interaction, and associates that value with you as the person who provided it.

Used as a lead magnet on a landing page, a good calculator can convert at 30 to 50 percent, far higher than a PDF guide.

Complete example: Freelance Rate Calculator

This is a production-ready prompt. Fill in your design details and send it.

Build me a complete Freelance Rate Calculator web app.

Follow all design rules in @CLAUDE.md.

WHAT THIS APP DOES:

A calculator that helps freelancers set the right hourly and daily rate

based on their income goal, working schedule, and business expenses.

Target user: freelancers and consultants who are unsure what to charge.

INPUTS:

• Annual income goal: number field — label "Annual Take-Home Goal ($)" — required, minimum $1
• Working weeks per year: number field — label "Working Weeks Per Year" — required, range 1-52
• Hours worked per week: number field — label "Billable Hours Per Week" — required, range 1-60
• Annual expenses: number field — label "Annual Business Expenses ($)" — required, minimum $0

OUTPUTS:

• Recommended hourly rate (currency, rounded to 2 decimal places)
• Recommended day rate based on 8-hour day (currency, rounded to 2 decimal places)
• Annual income at this rate (currency, rounded to 0 decimal places)
• Total billable hours per year (number)

FORMULA — implement this exactly:

1. Total annual target = Annual income goal + Annual expenses
2. Total billable hours per year = Working weeks multiplied by Hours per week
3. Required hourly rate = Total annual target divided by Total billable hours per year
4. Day rate = Required hourly rate multiplied by 8
5. Annual income at this rate = Required hourly rate multiplied by Total billable hours

APP BEHAVIOR:

Step 1: On page load show the four input fields, the Calculate button, and a hidden results section.

Step 2: User fills in all four fields.

Step 3: User clicks "Calculate My Rate":

• Validate that all fields are filled in and are positive numbers
• If any field is invalid show an inline error message below that field and do not calculate
• If all fields are valid run the formula above

Step 4: After calculation reveal the results section below the form. Show:

• Heading: "Your Recommended Rates"
• Hourly Rate card: large number display with label "Per Hour"
• Day Rate card: large number display with label "Per Day (8hr)"
• Sub-line: "Based on [total billable hours] billable hours per year"

Step 5: Reset — clicking "Recalculate" clears the results and scrolls back to the form.

DESIGN:

Follow all rules in @CLAUDE.md

App container: max 600px wide and centred

Input layout: full-width fields with clear labels above each field and consistent spacing

Results display: two cards side by side on desktop and stacked vertically on mobile

Result numbers: large, bold, and in the accent colour

Results section: slightly different background to visually separate it from the form

CTA button: full width, accent colour, 50px height, labelled "Calculate My Rate"

Add a subtle motivational line below the result cards such as "Ready to charge what you are worth."

ERROR HANDLING:

• Empty field: show "This field is required"
• Value less than 1 for hours or weeks: show "Please enter a number between 1 and [MAX]"
• Income goal of zero: must be at least 1 — expenses of zero are allowed
• Division by zero is prevented by the validation rules above

TECHNICAL:

Files: index.html, style.css, and app.js

All JavaScript in app.js and none inside the HTML file

All CSS in style.css with no inline styles

Currency formatted with toLocaleString for the appropriate currency

No localStorage needed for this app

Mobile responsive at 375px minimum width

No external JavaScript libraries

SELF-CHECK WHEN DONE:

• Test with these exact values: Income $60,000, Weeks 48, Hours 30, Expenses $5,000
• Expected hourly rate: (60,000 + 5,000) divided by (48 multiplied by 30) equals 65,000 divided
• by 1,440 which equals $45.14

Expected day rate: $45.14 multiplied by 8 equals $361.11

Verify these exact numbers appear correctly before reporting complete.

How to adapt this for any calculator

Replace the inputs, formula, and outputs with your specific calculator. Here are the key substitutions.

For an ROI Calculator: inputs are investment amount, revenue generated, and time period. Formula is ROI equals revenue minus investment divided by investment multiplied by 100. Outputs are ROI percentage, net profit, and breakeven point.

For a Pricing Calculator with margin: inputs are cost of goods and desired profit margin percentage. Formula is selling price equals cost divided by 1 minus margin divided by 100. Outputs are selling price, profit per unit, and markup percentage.

For an Ad Spend ROI Calculator: inputs are ad spend, clicks, conversion rate percentage, and revenue per sale. Formula is leads equals clicks multiplied by conversion rate divided by 100, revenue equals leads multiplied by revenue per sale, and ROI equals revenue minus ad spend divided by ad spend multiplied by 100. Outputs are number of leads, total revenue, ROI percentage, and cost per lead.

For a Content Value Calculator: inputs are hours saved per week using AI and hourly rate. Formula is weekly value equals hours saved multiplied by rate, and annual value equals weekly value multiplied by 52. Outputs are weekly value saved, annual value saved, and a line about what the user could do with that time.

Your action right now

Either adapt the Freelance Rate Calculator prompt above for your specific calculator, or fill in the master prompt from the previous lesson for a different calculator type.

Send it to Claude. Once it builds, test the calculation with a specific example. Calculate the expected answer by hand first and then check that the app produces the same number. If the numbers do not match, the calculation logic needs fixing before you share the app with anyone.