Make software by describing it
BBuilt with Prompts

Make software by describing it

Build a Tip Calculator With AI in 20 Minutes

Yes, you can build a working tip calculator with an AI assistant without writing code yourself. You describe what you want, the assistant produces a single HTML file, and you open that file in your browser. For a tool this small, the first version often takes about twenty minutes, including the time you spend reading what you got back.

A tip calculator is a good first project because the rules are familiar. You already know what the answer should be, so you can tell right away whether the tool is correct.

What you need before you start

You need three things: a free account with an AI assistant such as ChatGPT, Claude or Gemini, a plain text editor that comes with your computer, and a web browser. That is all. No installation, no command line.

Create a new folder on your desktop called tip-calculator. Everything you make will go in there, which keeps the project easy to find and easy to back up later.

Write the first prompt

The quality of the first result depends mostly on how clearly you describe the finished tool. Vague requests produce generic output. Specific requests produce something close to what you pictured.

Here is a prompt you can paste in and adjust:

Build a tip calculator as one HTML file with the CSS and JavaScript inside it.
Inputs: bill amount, tip percentage (buttons for 10, 15, 18, 20, plus a custom field), and number of people.
Outputs: tip amount, total, and amount per person, shown in dollars with two decimals.
Update the results as the user types. If the bill is empty or negative, show nothing instead of an error.
Keep the design plain: one centered card, large readable numbers, works on a phone screen.
After the code, explain in three short sentences how to save and open the file.

Notice the pieces. It names the format (one file), lists inputs and outputs, covers an edge case (empty or negative bill), and says what the design should feel like. Each line removes a decision the assistant would otherwise guess.

Save the file and open it

The assistant will reply with a block of code. Copy the whole block, open your text editor, and paste it in. Save the file inside your folder as index.html. Make sure the editor did not add .txt to the end of the name.

Now double-click the file. It should open in your browser and show a card with the inputs you asked for. If you see a page full of code text instead, the file probably saved as plain text; rename it and try again.

Check the math yourself

This step matters more than any other. Do not trust the numbers because they look tidy. Try a few cases where you know the answer:

If any of these fail, copy the exact input you used and the wrong output, then paste both into the chat. Something like: “With a bill of 47.50 and 18%, I get 8.5 instead of 8.55. Fix the rounding.” Concrete evidence gets a better repair than “the numbers look off.”

Make small changes, one at a time

Once the basics work, change one thing per request. Good second requests are small and easy to verify:

  1. “Add a button that resets all fields.”
  2. “Round the per-person amount up to the next cent so the group never underpays.”
  3. “Remember the last tip percentage I used.”

After each change, reload the page and test again. If you ask for five changes at once and something breaks, you will not know which change caused it. One change per message also keeps the conversation short, which helps the assistant stay accurate.

Before you request each change, save a copy of the working file under a new name, such as index-v1.html. If a later edit goes wrong, you can go back in seconds. This habit costs almost nothing and saves a lot of frustration.

What to do when something looks wrong

Most problems in a project this size fall into three groups. The page is blank, a button does nothing, or a number is wrong.

For a blank page or a dead button, open your browser’s developer tools (right-click the page, choose Inspect, then open the Console tab). Red text there is an error message. Copy it and paste it to the assistant along with the file’s current contents. For a wrong number, describe the input, what you expected, and what you got.

Resist the urge to ask the assistant to “just rewrite everything.” A full rewrite often fixes one thing and quietly breaks another. A targeted request, such as “the custom tip field is ignored when I type in it,” usually produces a smaller and safer change.

Next steps

Your tool works on your own computer, which is already a real result. Here is what to do next, in order:

  1. Test it on your phone by emailing the file to yourself or using a free host (see our guide to hosting a static site for free).
  2. Ask the assistant to add a dark mode, or to match your favorite color, to practice making visual changes.
  3. Write two or three lines in a notes file: what you asked for, what worked, and what you had to fix. That small log will help on your next build.

Then pick a second project of similar size, such as a unit converter or a simple timer. Repeating the same loop of describing, running, checking and adjusting is how the skill builds.