Calculators are one of the few tools that have become just as useful online as they are off. Perhaps even more so, when you consider that we now have apps that can calculate more than just hard numbers.
Online calculators do everything from help us manage our diet, figure out a loan payment to telling us the distance between two points. Whatever the equation, there’s likely a niche tool out there to provide answers.
The Web Designer Toolbox
Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!
Covering the Basics
Let’s start with the calculator we’re all familiar with. This snippet, built with React, is not unlike the pocket model many of us carried around in school. And it’s still useful. You don’t want to solve those equations on your own, right?
See the Pen React Calculator by Michael Jackson
The Other VW
At first glance, the letters “VW” might make you think of the popular German cars. But in the web design space, VW stands for “Viewport Width”. It’s the percentage of the full width of a browser window. This calculator provides an easy way to find your VW. Enter the width of your design element and that of the viewport and see the result.
See the Pen
What’s Your BMI?
Here’s a simple way to calculate your body mass index (BMI). This is a combined measure of your height and weight. This calculation is then used to determine whether or not you are within a healthy range. This snippet takes your height (in inches) and weight (in pounds) and calculates BMI using Angular.
See the Pen Angular BMI Calculator by Peter Girnus
Can You Afford It?
See the Pen Daily UI #04: Auto loan calculator using Vue JS by Bryan King (@brykng)
Maintain the Right Ratio
When performing tasks such as cropping images, keeping the correct aspect ratio is important. Failure to do so can lead to some unpleasant distortion. This simple calculator takes the original size of an element on the top line. Then, as you enter the desired new width on the second line, it will automatically determine the correct height – thus keeping your ratio intact.
See the Pen jQuery | Aspect Ratio Calculator by Tobias Bogliolo
Pixels to REM
It’s pretty common practice these days to use the CSS REM unit for sizing text. REMs are relevant to the size of the root element. So, if your base font size is 16px, that is equal to 1rem. But calculations beyond that can be tricky. This handy converter will help you size things just right. Plus, it generates a snippet to that you can copy and paste into your stylesheet.
See the Pen Pixel to REM calculator by Andy Bell
See the Pen From Integer Variable To Content: A basic pure CSS calculator by seto89
Your Mileage May Vary
For those looking to buy an electric vehicle, one of the biggest concerns is the driving range. This calculator will show how many miles you can drive various Tesla models on a single charge. It uses criteria such as speed, outside temperature, wheel size and whether or not the air conditioning system is in use.
See the Pen Tesla Range per Charge Calculator in React / Redux by DELAN
Calculate All the Things
What’s really amazing is that we’re only scratching the surface when it comes to the types of calculators being built. To see even more examples, check out our CodePen collection.