This is not a coding tutorial. I don’t know how to code. Well, not really. As a writer and the creator of a popular website for writers, I’ve learned a fair amount of code over the years html and css, a bit of javascript and php, one or two mysql queries, and that’s about it).
But I built a fully functional custom javascript calculator for writers using just AI.
If you’ve ever wanted to build a calculator for a specific niche but you don’t know how to code read on!
My Book Royalties Calculator
Before I tell you why you should think about creating a custom calculator, here’s mine:
Book Royalties Calculator
This calculator is built specifically to help writers figure out how much money they can make on their books. Since the audience of my website, thewritepractice.com, is writers, many of whom are trying to write and publish their first book, I wanted to create a tool to help them understand how important it is to learn book marketing and how the publishing process really works.
Writers have a tendency to put their head in the sand to everything related to the business side of writing, and I wanted to help show them what that part of the publishing industry looks like to help them become a little more prepared.
Nothing like a bit of math to help people get focused, right?
I also created two pages to embed the calculator on—this one for book royalties and this one for kdp royalties—both of which give a little context on different aspects of the traditional publishing and self-publishing worlds.
They’re also target at specific SEO keywords that I knew were popular, so the calculators act as marketing for our information and services, as well.
These calculators are also just cool, right?! But you tell me. Let me know what you think in the comments!
Examples of Custom Calculators
I’ve used my fair share of custom calculators online. You probably have too.
For example, here are a few I can remember using over the last few years:
- Mortgage calculators / “How much home can you afford” calculators
- Currency converters
- Retirement calculators
- Compound Interest/investment calculators
- Tip calculators
- Debt payoff calculators
- Stone Wall Material calculator
- Cement area calculator
- Book page count calculator
And more!
These kinds of calculators are perfect for the business, because they’re a great way to advertise while also providing a helpful service that even your own team can use.
But why should YOU build a custom calculator?
5 Reasons to Build a Custom Online Calculator
There are five main reasons you might build a custom calculator:
- Internal Use and Automation. If you find yourself doing the same calculations over and over and over again, it makes sense to build a tool that could simplify and automate the process, especially if that could be integrated into the rest of your workflow. Automating removes the chances of making mistakes, makes it easier for less skilled team members, and speeds up the process for everyone. (Besides, automating things is fun!)
- SEO and Content Marketing. People search for calculators online all the time, and creating them can be an easy way to score search traffic. For example, for our book royalties calculator, there’s a traffic potential of 1,400 visits per month if you reach the top spot. Not bad! Check your niche for keywords before you make your calculator.
- Lead Generation. While it’s not always recommended, one way to get leads is to collect the user’s email address or contact information in exchange for showing them the answer to their calculation. It adds an extra step that makes the tool less helpful, but for the right calculation, it might be worth it.
- Customer Support and/or Appreciation. Sometimes just doing a nice thing for your customers is worth it, especially if it’s a tool they’ll use frequently and that will simplify and improve their lives. Great way to increase loyalty!
- Sales. If you find your salespeople are constantly making the same calculations, you can move the calculation to the user side to smooth the process. Then, just include an ad for your product and create a follow up process. Easy!
So how about you. Think about your business. How could a calculator tool help you?
5 Steps to Build a Custom Javascript Calculator Tool
So the reality is, these kinds of calculator tools aren’t that hard… if you’re a developer. It would probably take a good web developer only a couple of hours to code, design, and test a simple calculator tool like the ones mentioned in this article.
The problem is, developers are expensive! They’re also hard to find one that has time. It’s often much easier to do things yourself.
That’s where AI comes in.
With an AI tool like Claude or ChatGPT you can create a calculator tool like mine in just a few hours, if that. I know, because I did it! I used Claude Sonnet 3.5 to create a working version of my calculator above in less than half a day. From there, I created a custom WordPress plugin and continued to make improvements to it. I even made another calculator tool later.
Do I know how the calculator works? Not really! But these AI tools do. And with a little gumption and some critical thinking, you can do the same.
Here’s how:
Step 1: Decide What Kind of Calculator You Want to Build
Not sure what kind of calculator you want to build? Here are some tips:
- Ask your team. Ask your team what math they’re doing most frequently, especially your customer support or sales teams.
- Brainstorm calculators in your niche using AI. You don’t have to just use AI to build the tool. It can help you come up with ideas as well! Prompt your favorite AI tool like ChatGPT or Claude to give you ideas for calculators in your niche.
- Research SEO Keywords. After you have some ideas, research your favorite as keywords for SEO. I use Ahrefs for keyword research—which is expensive but very good—but there are plenty of other tools that are free or more affordable. Here’s a list of free SEO Keyword tools.
Let us know what ideas you come up with the in the comments!
Step 2: Create a Claude Account (if you don’t have one) and Set Up a New Project
You can of course use whatever AI tool you prefer, but I’ll share why I like Claude, and specifically Claude Projects a bit further below. In the meantime, here’s how to set up your project to build your calculator tool.
Note that you can create your calculator with a free version of Claude, but to use projects in the way I recommend below, you’ll need to sign up for their paid plan. Don’t have the paid plan? Give it a try without! Should be fine.
First, create your Claude account and sign in.
Once you see the screen above, click the “Claude” logo in the top-left of the screen, and once the sidebar opens, click Projects, then Create Project.
In the following window, describe your project.
Here’s the Custom Instructions Prompt I used: You are a web software developer specializing in php, javascript, html, and css. You’re building a web based calculator for [insert your niche]. Please work through the process step by step and ask questions for clarification if you need more information to complete your task. Thanks for your help!
You can put that as the description but also as the custom instructions in the project knowledge area in the right window.
Feel free to upload any other information you think will be helpful in the project knowledge.
Then, once Claude is set up, move on to the next step!
Why Claude? A Quick Claude Review
While the AI hierarchy is always changing, Claude has become the best tool for software development over the last couple of months.
But even more than that, I really love its Project view, which allows you to create multiple chats that can all use the same source material and instructions. Super helpful when you’re working on a larger project.
Step 3: Prompt Your AI Tool to Create the First Version of Your Calculator
AI prompt engineering can get complicated, but for most tasks, you can get away with simple, clear language, even something like this:
Hey Claude. Can you create a custom javascript calculator for [my niche]. [Describe the goal of your calculator.]
Inputs should include: [insert inputs]
It should output [insert output]
I’m going to use it on my [insert your website platform] so make sure it’s compatible with that.
Please let me know what questions you have in order to complete your task.
Simple, clear prompt!
Your AI tool should output a set of html, php, javascript, and css code that will hopefully be compatible with your website platform.
Step 4: Test Your Code
Once your AI tool has some code for you to test, it’s time to install it. Depending on your website setup, this might be an easy or challenging thing.
Also, any time you install a new, untested bit of code there’s a real possibility it could crash your site, so here are a couple of notes about how to do this safely:
- Don’t do this on a large, high traffic site. It’s always a good idea to install new code on a test environment (but for things like this, I almost never do that). Instead, I use a smaller site to test new things on.
- For WordPress, use a code snippet plugin. For me, since I use WordPress to host my websites, and when I’m installing simple code like this, I use a plugin called Code Snippets. It’s a free plugin that allows you to insert different types of code into your website, which is both really easy, and also a little safer than installing it straight into your website.
- Make sure to run a back up. Also, it’s good to backup your site, database, and files (I use the WordPress plugin Backup Buddy for that).
- If you crash your website, login to FTP or file manager and delete the plugin file. So make sure you have access to that and can log in BEFORE you install the code.
Not sure how to install this on your website platform? Just ask your AI tool! It can help you figure it out!
With all of that in mind, go ahead and try to run your new code and see if it works.
There’s a good chance that it does… sort of!
These AI tools are pretty good coders. That being said, it probably doesn’t run perfectly. So here’s what to do next.
Step 5: Refine Your Code with AI
If your calculator isn’t working perfectly, don’t worry. Your AI tool can help.
Just describe the problem, take a screenshot, upload it to the AI chat, and see what it says.
Try to stick to one problem or adjustment per prompt.
And if you start to run out of messages (or it begins running really slow), ask the AI to generate a prompt for a new chat.
Then, just keep copy-pasting/uploading new versions as you go! =
It might take a couple of hours and 20 prompts and tests, but with a little refining and some patience, you’ll be able to get the AI to create your calculator tool exactly like you want it.
Bonus Step: Use Cursor to Turn Your Code Snippet Calculator Into a WordPress Plugin
A code snippet is fine for code under 200 lines long, but if your calculator starts to become too big, you might want to turn it into a custom plugin (assuming your using WordPress).
For example, here’s the book royalties plugin I created if you want install it on your site!
The best way to take your current code snippet and turn it into a custom WordPress plugin using AI tools is Cursor.
Why Cursor AI?
Cursor is a text editor based on VS Code designed to write and edit code using AI. It automatically includes Claude and ChatGPT, and can even help you upload your plugin to Github for storage and versioning.
Again, I’m not a coder, but this made my process 100x faster.
One of the hardest parts of coding with AI is when it asks you to find and replace sections of your code because it’s too long to output in one prompt.
The amazing thing is that Cursor can autocomplete these updates, making the process extremely smooth and easy.
I’ll do a longer review of Cursor in the future, but it’s so fantastic.
Once you have Cursor installed and set up, just copy and paste your code into a new file and ask it to help you turn your code into a WordPress plugin. It will tell you exactly what files to create and their content, and you’ll have your new WordPress plugin created in no time.
Just make sure to follow the safety tips in step 4 above when you install and activate it for the first time as it can absolutely still break your site!
Get Calculating, Then Share Your Results
I had so much fun creating a calculator that I did it twice! And I’m excited to create more tools and plugins with the help of AI.
If you have an idea and you have the time and experience to figure it out, you can create your own custom calculator too.
So go do it! And when you do, make sure to share the link to your results in the chat. I can’t wait to see what you create!
What custom calculator are you going to create? Let us know in the comments!
And once you build one, please share the link in the comments. We’ll post some of our favorites here as examples!