Scientific calculator for your website
Free to put on any site. Trigonometry, logarithms, powers, roots, factorial and memory, with proper order of operations and keyboard input. Pick a colour and theme, copy the snippet, done.
Accent colour
The real widget, running here with your settings.
What it does
The keypad covers what a scientific calculator is expected to cover: sine, cosine and tangent with their inverses, natural and base-10 logarithms, powers and roots including the yth root, the reciprocal, percentage, factorial, and the four memory keys.
Three things separate it from most embeddable calculators. It applies real operator precedence, so multiplication binds tighter than addition and the calculator holds the pending part of the expression rather than evaluating left to right. It shows that pending expression in small type above the answer, which is the part people get wrong when a calculator only shows one number. And it accepts keyboard input, so anyone who would rather type than click can.
Angles are handled exactly at the quarter turns. Ask most calculators for the cosine of 90 degrees and floating point answers 0.00000000000000006; this one answers 0, and the tangent of 90 degrees says it is undefined instead of returning an enormous number.
The full version, with more functions and the working shown step by step, is the scientific 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 | #7c3aed |
data-title | Heading text, or empty for none | Work it out |
data-angle | Whether trig starts in degrees or radians | rad |
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 340px 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.
Can visitors type on their keyboard?
Yes, once they click the calculator. Digits, the four operators, brackets and the decimal point all work, Enter is equals, Backspace deletes a digit and Escape clears. The keys are only captured while the widget has focus, so it never steals typing from the rest of your page.
Does it follow the order of operations?
Yes. 2 + 3 x 4 gives 14, not 20, and the pending part of the expression is shown in small type above the answer so nobody has to guess what the calculator is holding. Powers are right-associative, so 2 ^ 3 ^ 2 gives 512.
Does it work in degrees or radians?
Both. The Deg and Rad buttons switch at any time, and data-angle sets which one it starts in. Angles are handled exactly at the quarter turns, so cos(90 degrees) returns 0 rather than the 0.00000000000000006 that raw floating point gives.
What happens on an impossible calculation?
It says what went wrong in words rather than showing NaN. Dividing by zero, the square root of a negative number, the log of zero, the tangent of 90 degrees and a factorial of anything but a whole number each produce their own message.
Will it clash with my site styles?
No. The widget renders inside a shadow root with its own stylesheet, so your CSS cannot reach into it and its CSS cannot leak out. It was tested against a page that sets width and font on every input with !important, which breaks most embedded widgets.
How big is it?
20 KB, around 6.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 at all once it has loaded.
Does it track my visitors?
No. It sets no cookies, stores nothing and sends nothing back to us. Every calculation happens in the browser of the person using it, so it needs no cookie banner of its own.
Want a different one? See all embeddable calculators.