Build with AI · Practical guide

Build a simple calculator without becoming a developer

Beginner · Published 2026-10-17 · Reviewed 2026-10-05

Tools: Multi-tool
Audience: People getting started with AI
Topic: Build with AI

A hand using a calculator beside printed charts

You’ll finish with: a tested local calculator with stated inputs and edge cases.

A small calculator is a good first build because you can check it with numbers you already understand. Start with one formula. A gradient and a confetti animation can wait until addition works.

Set up

Allow 30–45 minutes. Use an AI tool that can produce code and save an HTML file, plus a desktop browser. You can copy code into a text editor if direct file download is unavailable.

Download this guide’s practice sheet ↓

Try this example

FICTIONAL PRACTICE MATERIAL
Calculator: event catering estimate. Inputs: people, price per person, delivery. Formula: people × price + delivery. Example: 12 × 18 + 15 = AUD 231. Reject negative values and non-whole attendee counts.

Do the task

Describe inputs, formula and validation before asking for code.
Save the single HTML file and open it locally, not only in the AI preview.
Test ordinary values, zero attendees, blank inputs, negative costs and a fractional headcount.

Your reusable prompt

Build a standalone HTML catering calculator with embedded CSS and JavaScript, no external services. Show AUD totals, input labels and clear errors. Do not calculate until required fields are valid. Use the supplied formula and example.

PRACTICE INPUT
Calculator: event catering estimate. Inputs: people, price per person, delivery. Formula: people × price + delivery. Example: 12 × 18 + 15 = AUD 231. Reject negative values and non-whole attendee counts.

Refine your result

For zero attendees, show zero catering cost but retain the entered delivery charge. Explain that assumption on the page. Add no tracking or network requests.

Check the result

The sample must show AUD 231. Zero people with delivery 15 gives AUD 15 under the chosen rule. Negative inputs and a headcount of 2.5 should show an error.

Save and reuse

Save calculator-v1.html and your test results. Keep a working copy before asking for any design changes.

Sources and notes

Writing clear prompts Checked 2026-10-05

The practice input and teaching prompt are original 5HO material. Examples are fictional; they are not screenshots or claims of a completed real-world task.
Official documentation supports the relevant product concepts. Setup availability depends on your account; where a guide offers a fallback, it does not prove the connected capability worked.