Skip to content
Pinoy AI WorksPinoy AI Works

Build a simple webpage or tool with ChatGPT

ChatGPT · Coding for beginners

You do not need to be a software engineer

Section titled “You do not need to be a software engineer”

You do not need to memorize code to build a simple digital tool. ChatGPT can write complete, working code for everyday tools—like a sari-sari store profit calculator, a countdown timer, or a personal profile page—that you can run on your computer for free.

What you need

Section titled “What you need”
  • A computer with any web browser (Google Chrome, Edge, Safari, or Firefox).
  • A free ChatGPT account.
  • Notepad (Windows) or TextEdit (Mac).

Try this: Build a simple calculator

Section titled “Try this: Build a simple calculator”
  1. Open a new chat in ChatGPT.
  2. Copy and paste this prompt:
Write a complete, single-file HTML page for a simple "Daily Budget & Expense Calculator".
Include HTML, CSS styles, and JavaScript all inside one file.
Make it work offline with clean, modern dark colors.
Do not use complicated external libraries.
Show me how to save and open the file.
  1. ChatGPT will generate a code block starting with <!DOCTYPE html> and ending with </html>.
  2. Click the Copy code button at the top right of the code block.

How to open and use your tool

Section titled “How to open and use your tool”
  1. Open Notepad on your computer.
  2. Paste the code into the empty Notepad window.
  3. Click File → Save As…
  4. Set the Save as type to All Files (.).
  5. Name the file calculator.html and click Save.
  6. Find the file in your folder and double-click it. It will instantly open in your web browser and work like a real app!

If you want to change something

Section titled “If you want to change something”

You do not need to edit the code yourself. Go back to the same ChatGPT conversation and describe what you want changed:

Change the currency sign to Philippine Peso (₱).
Add a button that clears all the numbers.
Make the buttons larger so they are easier to click.

ChatGPT will give you an updated version. Copy it, paste it into Notepad, save, and refresh your browser page.

Good beginner projects to try

Section titled “Good beginner projects to try”
  • Sari-Sari Store Mark-up Calculator: Enter the wholesale cost and desired profit percentage to get the retail price.
  • Event Countdown Timer: Enter a date (like Christmas or a birthday) and watch the days, hours, and minutes count down.
  • Recipe Serving Scaler: Enter ingredients for 4 servings, and scale them up for 20 party guests.

Before you rely on it

Section titled “Before you rely on it”
  • Test the math with simple numbers (like 10 + 10) to make sure the calculator computes accurately.
  • Never paste sensitive database passwords or private API keys into a public chat.

Next: Start with ChatGPT · Claude Artifacts · Everyday AI