Make software by describing it
BBuilt with Prompts

Make software by describing it

Make a Unit Converter With ChatGPT and One HTML File

You can build a working unit converter by asking ChatGPT for one HTML file, saving it, and opening it in your browser. The whole thing fits in a few dozen lines of code, needs no software to install, and gives you a clear way to check the result, because conversion factors are well known.

This guide uses length, weight and temperature as the starting set. You can swap in whatever you convert most often, such as cooking measures or fuel economy.

Decide what the converter should do

Before you write anything, list the conversions you actually need. A converter that tries to handle every unit in the world gets cluttered. A short list is easier to build and easier to verify.

Write down:

Keeping the list in front of you also helps later, when you test each pair.

The first prompt

Give the assistant the full picture in one message:

Create a unit converter as a single HTML file with CSS and JavaScript inside.
Categories: Length (miles, kilometers, feet, meters), Weight (pounds, kilograms, ounces), Temperature (Fahrenheit, Celsius).
Layout: a category dropdown; an input number field with a "from" unit dropdown; a "to" unit dropdown; the result shown in large text.
The result should update as the user types and show up to 4 decimal places, with trailing zeros removed.
Handle empty input by showing nothing. Allow negative numbers for temperature only.
Use a clean, minimal design that works on a phone.
Add a short comment above each conversion factor so I can check it.

The last line is worth copying. Comments next to each factor let you compare them with a trusted source without having to understand the rest of the code.

Verify the conversion factors

AI assistants usually get common conversions right, but a small slip in one factor would affect every result. You can check them in minutes.

Compare the factors in the comments with a reference such as the National Institute of Standards and Technology (NIST), which publishes official conversion tables. Then run a few spot tests:

Temperature deserves extra attention because it is not a simple multiplication. Fahrenheit to Celsius involves subtracting 32 first. If your Celsius result for 50 Fahrenheit is not 10, tell the assistant exactly that and ask it to correct the temperature formula.

Add more units safely

A good way to extend the tool is to ask for units in groups, not one by one. Say: “Add centimeters, inches and yards to Length. Keep the existing units unchanged. Show me only the part of the code that changes.” Asking for only the changed portion makes it easier to see what moved.

After adding a group, retest an old conversion, such as miles to kilometers. Edits sometimes disturb things that were working. This is called a regression, and checking for it takes ten seconds.

If the assistant offers to rewrite the whole file, you can accept, but save a copy of the current version first. Name it with a number, such as converter-v1.html, so you can restore it.

Improve the experience

Once the conversions are right, look at how the tool feels to use. Useful tweaks to request, each as its own message:

  1. A button that swaps the “from” and “to” units.
  2. A “copy result” button.
  3. Remembering the last category you used, so the page opens where you left off.
  4. Larger touch targets for phone use.

Each of these is small and visible, which keeps checking simple. If one change breaks something, ask the assistant to undo only that change and describe what you saw.

Common problems

The result shows a long string of decimals. Ask for rounding to a fixed number of places and trimming trailing zeros.

Typing a decimal point behaves oddly. This happens when the code tries to reformat the field while you type. Ask the assistant to leave the input field alone and format only the result.

Nothing happens when you change a dropdown. Open the browser console (right-click, Inspect, Console) and look for red text. Paste it into the chat along with your file.

It works on your computer but looks cramped on a phone. Ask the assistant to add a viewport setting and to use larger spacing on narrow screens.

Ask for a code summary

Because this tool is small, it is a good place to learn how a converter thinks. Ask: “Explain in plain words how the conversion works. What is the base unit, and how does each unit connect to it?”

Many converters pick one base unit per category, such as meters for length, and convert everything through it. That design makes adding a new unit easy: you only need one new factor instead of a connection to every other unit. If your assistant used a different approach, such as a separate formula for every pair, you may want to ask it to restructure the code around a base unit before adding many more units. Do it early, while the file is still short, and retest every pair afterward.

Once you understand this structure, you can add units yourself by copying a line and changing a name and a number, then checking the result against a reference.

Share it

A single HTML file is easy to share. You can email it, drop it into a free static host, or keep it in a folder on your computer. If you publish it, put a short note on the page naming the source of your conversion factors, so visitors know where the numbers come from.

Next steps

Build the version in this guide, then run the four spot tests above. Fix anything that fails with a message that includes the input and the wrong output. When all conversions pass, write down the date and the list of units in a notes file, then choose one improvement from the list and try it. If you want a second project afterward, a tip calculator or a simple timer uses the same loop and is a natural follow-up.