Calculator for your website
The small one that belongs on any page where a reader has a sum to do. Four operators, percent, square root and memory, with keyboard input and proper order of operations.
Accent colour
The real widget, running here with your settings.
What it does
Add, subtract, multiply, divide, percent, square root, sign change and the four memory keys. That is the whole of it, and for most pages it is the right amount. A reader working out a discount, a split bill or a quantity does not want a wall of trigonometry.
Order of operations, which most pocket calculators get wrong
Type 2 + 3 x 4 into a cheap desk calculator and it answers 20, because it works strictly left to right and multiplies 5 by 4. This one answers 14, because multiplication settles before addition. The pending part of the sum shows in small type above the answer, so a half-finished calculation is visible rather than hidden inside the machine.
Small things that get used
A backspace on the display, because a mistyped digit should not mean starting again. Keyboard input, so anyone who would rather type can, without stealing keystrokes from the rest of your page. A memory indicator, so a stored number is never a surprise. And errors in plain words: dividing by zero says so, rather than showing NaN.
For trigonometry, logarithms and powers, use the scientific calculator widget instead. The full version of this one is the basic calculator on this site.
How to install it
Copy the code above and paste it into your page where you want the calculator to show. It is ordinary HTML, so it goes wherever HTML goes.
WordPress
In the block editor, add a Custom HTML block and paste the code into it. In the classic editor, switch from Visual to Text first. For a sidebar, use a Custom HTML widget under Appearance, then Widgets. Some managed hosts strip script tags from posts written by non-administrator accounts, in which case paste it while signed in as an administrator.
Wix, Squarespace and Shopify
Wix: add an Embed HTML element and paste the code into the code panel. Squarespace: add a Code block and turn off Display Source. Shopify: paste it into a section or page written in the code editor rather than the rich text field, which removes scripts.
Plain HTML
Paste both lines into the body of the page. The script tag can sit next to the div or at the end of the document, and it only needs to appear once even if the page holds several calculators.
Settings you can change
Every option is a data attribute on the div, so the script itself never needs editing.
| Attribute | What it does | Example |
|---|---|---|
data-theme | Light or dark surface | dark |
data-accent | Colour of the equals key and link | #15803d |
data-title | Heading text, or empty for none | Quick maths |
The widget renders inside a shadow root with its own stylesheet, so your site's CSS cannot reach in and break it, and your own rules are equally safe from ours. It caps itself at 300px wide and shrinks to fit anything narrower. To control where it sits, wrap the div in a container of your own.
Terms of use
By using this code you agree:
- The materials are provided as is, without warranty of any kind.
- Not to alter the calculation logic in the script.
- Not to remove the "powered by Calculator Castle" credit link.
- That copyright in the code belongs to calculatorcastle.com.
- Not to remove these terms from the standalone version.
Results are estimates for planning and carry no warranty. Neither you nor your visitors should treat the output as professional advice.
Common questions
Questions about the widget
Is the widget free?
Yes, on any site, including commercial ones. No fee, no account and no usage limit. The one condition is that the "powered by Calculator Castle" link stays visible.
Does it follow the order of operations?
Yes. Typing 2 + 3 x 4 gives 14, because multiplication is settled before addition. Many pocket calculators give 20 instead, working strictly left to right. The pending part of the sum is shown in small type above the answer, so you can see what the calculator is holding.
Can visitors use their keyboard?
Yes, once they click the calculator. Digits, the four operators and the decimal point all work, Enter is equals, Backspace deletes a digit and Escape clears. The keys are captured only while the widget has focus, so typing elsewhere on your page is unaffected.
Why a percent key instead of EXP?
Because on a basic calculator percent gets used and EXP does not. Anyone who needs exponent notation is reaching for a scientific calculator, and there is a widget for that. The backspace key sits on the display rather than taking a place in the keypad.
What happens on an impossible calculation?
It says what is wrong in words. Dividing by zero and taking the square root of a negative number each get their own message rather than showing NaN or Error, and typing a new number clears it.
How big is it?
13 KB, around 4.6 KB compressed over the wire, loaded with the async attribute so it never blocks your page. No libraries, no fonts, no images and no network requests once loaded.
Will it clash with my site styles?
No. It renders inside a shadow root with its own stylesheet, so your CSS cannot reach into it and its CSS cannot leak out. We test that against a page that sets width, colour and font on every button with !important.
Does it track my visitors?
No. It sets no cookies, stores nothing and sends nothing back to us. Everything happens in the browser of the person using it, so it needs no cookie banner of its own.