How to create a web calculator with ChatGPT

Generative AI is a powerful tool for any marketer, and can do much more than write content. It can also provide short code snippets for your work.

I have been using ChatGPT to write formulas for Google Spreadsheet, html code for FAQ Schemas, and the most challenging of all, small functional calculators for this website!

Here is the example I will show you to create, a CPC Calculator:

Cost

Add the budget you plan to spend on advertising.

$0.1$1,000,000

Clicks

Add the amount of clicks you are expecting to get.

11,000,000

CPC

This is your Cost per Click based on the expected cost and clicks.



What You Should Know

Know some programming basics

Knowing HTML, CSS, and JavaScript is not required, but understanding the code is important, as you will need to do some edits.

The guide is based on GPT4

The example shown here is based on a simple code for calculating CPC and using GPT4. Most times for complex calculators, ChatGPT provides a bad result that is not working well. It’s great to calculate a few variables based on inputs, but gets “confused” with too much.

Test, test, and Test

This prompt took me about an hour of experimentation. Creating your own calculator will also take some time until you get the correct results.

Always test the results for correctness.

Step-by-Step Guide to Creating a Web Calculator with AI

Prompt engineering is a big part of ChatGPT. You need to learn how to “ask” it to deliver, in order to have a good result. In this step by step guide, I will be giving you the prompt to create a nicely designed Cost Per Click Calculator.

Use these steps and do edits along the way to change the calculator to a different formula.

The Prompt

Craft the prompt.

Here are some thoughts on how I built my prompt:

  • One of my requirements is to have an easy plug-and-play code without the need to edit the <head> of the website. This is why I have asked it to avoid writing code for the body.
  • Then, I have some requirements for design to make the calculator more user friendly and beautiful.
  • I like to give the option to have a slider, you can skip that part or change it as you like.

Idea: You can ask ChatGPT to have colours for the text and background as well.

Use this prompt as a base, and change it as you want to create the calculator you want:

Create a web calculator on html that calculates the Cost per Click (CPC). All the functional code has to be written in html, css, and javascript for the <body></body> and no code should be needed in the head. 

Use this formulas to calculate CPC:
CPC = Cost / Clicks

The text-box for CPC does not accept input from the user, only shows the result based on the formula.
The user can input the Cost and Clicks using the slider or text-box. Every time a user gives a new value, calculate the results again.

Design:

The text boxes must have rounded edges.
Inside the text boxes for CPC and Cost, the numbers should start with $.
Titles have to be H2, and have space for a subtitle below them a light grey text. Start each subtitle with “Lorem ipsum” then add the title of the heading.
The calculator should have a max-width of 300px.
Give 10px of space between elements.

Sliders:

The sliders must have minimum and maximum prices.
The minimum price should be on the left and the maximum on the right.
Do not add a slider for CPC.

Use these prices:
Clicks, minimum = 1, maximum = 1,000,000
Cost = minimum = $0.1, maximum = $1,000,000
Show the minimum value at the left end of the slider.

Show the maximum value at the right end of the slider.
The slider has to be below the text box.
Start the values at the minimum price.

The text boxes must not be limited by the slider but accept higher and lower prices as well.

Continue the Code

For more complex queries, ChatGPT might need more tokens to write. Right now, it has a limit of 4096 tokens. A token is not exactly a word or a character, so I cannot give you an exact character count for when it will stop.

If it stops, simply give it a command like “Continue the code where you left it”.

It will continue to produce the rest of the code.

If you use two prompts to create a calculator, it should give you the correct result, but remember that ChatGPT does not have very good memory and starts “forgetting” the previous requests and queries.

Test the Calculator

Take the code and create a new draft blog post or page on your website. Save it as a draft and test the code.

Test a few different cases.

See if it works correctly or not.

How to Iterate: Improve or Change the Code

Chances are, you will get some mistakes or design flaws.

For mistakes, simply go back to your original prompt and click “edit” on the top right. Make some changes, and then “Save & Submit”.

MS7 a3upi1iC ieC kd8LOdHuQ6PKRQt7wqNNi

If the code works find, but you want to improve the design, positions, or other small fixes, you can feed the code back to ChatGPT and ask it to add, remove, or change it to fit your needs.

For example, use the prompt “rewrite this code” and add your request “to make the text red and add grey backgrounds”.

Test & Repeat

Test each iteration and repeat until you get the desired result.

When to hire a Dev or buy a Tool

ChatGPT is not great with code, and especially more complex, bigger codes. Creating a simple calculator for a page of your business or blog should be okay.

But, if you are a bigger business and need to have a well-designed, complex tool, better consider purchasing a plugin or tool to produce your calculator, or hire a web-dev to make it for you.

Make Your Own Calculator with Generative AI

This is a quick guide! Have fun playing around and testing this exciting new technology, and, try out my own experiments:

CPC Calculator

CPM Calculator

ROAS Calculator


Do you want more cool tricks on AI and marketing knowledge snippets? Let’s connect on LinkedIn!