Understanding Percentage Calculations: The Math Behind a Simple Online Calculator

Percentage calculations look simple, but they appear in a surprising number of places in software and everyday computing.

From calculating discounts and tax to displaying progress, analyzing statistics, calculating exam scores, and processing business data, developers frequently encounter percentages.

The underlying mathematics is straightforward:

percentage = (part / whole) × 100

But depending on what you're trying to calculate, the formula needs to be rearranged.

The basic percentage calculation

Suppose we want to find 25% of 400.

First convert the percentage into a decimal:

25 / 100 = 0.25

Then multiply it by the number:

0.25 × 400 = 100

Therefore:

25% of 400 = 100

In JavaScript, the same calculation can be implemented very simply:

function percentageOf(percent, number) {
return (percent / 100) * number;
}

console.log(percentageOf(25, 400));
// 100

This is essentially the core mathematical operation behind a basic percentage calculator.

Finding what percentage one number is of another

A different problem is:

«75 is what percentage of 300?»

Here, we don't want a percentage of a number. We want to determine the relationship between two numbers.

The formula becomes:

(part / whole) × 100

So:

(75 / 300) × 100 = 25%

In JavaScript:

function calculatePercentage(part, whole) {
if (whole === 0) {
throw new Error("Whole cannot be zero");
}

return (part / whole) * 100;
}

console.log(calculatePercentage(75, 300));
// 25

The zero check is important. Dividing by zero would produce an invalid mathematical result.

Calculating percentage increase

Percentage change is another common requirement in applications.

Suppose a value changes from 200 to 250.

First calculate the difference:

250 - 200 = 50

Then compare that difference with the original value:

(50 / 200) × 100 = 25%

So the value increased by 25%.

The general formula is:

((newValue - oldValue) / oldValue) × 100

A JavaScript implementation could look like this:

function percentageChange(oldValue, newValue) {
if (oldValue === 0) {
throw new Error("Original value cannot be zero");
}

return ((newValue - oldValue) / oldValue) * 100;
}

console.log(percentageChange(200, 250));
// 25

If the result is negative, it represents a decrease rather than an increase.

Why percentages greater than 100% are valid

A common misunderstanding is that percentages must always be between 0% and 100%.

That's not true.

For example:

115% of 12

can be calculated as:

(115 / 100) × 12
= 1.15 × 12
= 13.8

A value of 200% simply means twice the original amount.

This matters when building calculators because restricting the percentage input to values between 0 and 100 would unnecessarily prevent valid calculations.

Floating-point numbers and JavaScript

There is another issue developers need to consider when implementing percentage calculations: floating-point arithmetic.

For example:

console.log(0.1 + 0.2);

may produce:

0.30000000000000004

This is not a percentage-specific problem. It comes from how JavaScript represents floating-point numbers.

For a user-facing calculator, you may therefore want to control the displayed precision.

For example:

function roundResult(value, decimals = 2) {
return Number(value.toFixed(decimals));
}

Then:

const result = (18 / 100) * 18;

console.log(roundResult(result, 2));
// 3.24

The important distinction is between calculation precision and display precision. You generally don't want to round intermediate calculations unnecessarily; it is usually better to perform the calculation and round the final displayed result.

Building a simple percentage calculator

A minimal browser implementation doesn't require a framework.

You could have two inputs:

Calculate

And the JavaScript:

function calculate() {
const percent = Number(document.getElementById("percent").value);
const number = Number(document.getElementById("number").value);

const result = (percent / 100) * number;

document.getElementById("result").textContent = result;
}

Of course, a production calculator should include validation, empty-input handling, appropriate formatting, accessible labels, and a clear explanation of what the calculation represents.

Why a dedicated percentage calculator can still be useful

For a developer, writing the formula takes only a few seconds. For a normal user, however, the problem is often not knowing how to implement the formula but knowing which percentage formula to use.

That's why dedicated calculators can be useful.

For example, a user may be trying to answer:

• What is 18% of 18?
• 64 is what percentage of 328?
• What is a 15% increase on $200?
• What is the discount amount?
• What percentage change occurred between two values?

These questions look similar but require different operations.

I've been working on Monkza's Percentage Calculator with this practical use case in mind. Instead of presenting users with a general-purpose calculator full of unrelated mathematical functions, the tool focuses specifically on percentage calculations.

It can be useful as a quick way to verify calculations while working with numbers, especially when the values are awkward enough that doing the arithmetic manually becomes inconvenient.

The bigger lesson for developers

Percentage calculations are a good example of something that looks trivial mathematically but still requires thoughtful implementation.

A useful calculator needs more than the formula itself.

You need to think about:

• Input validation
• Division by zero
• Negative values
• Percentages above 100%
• Decimal precision
• Rounding
• User-friendly output
• Clear explanations
• Accessibility

The mathematical formula may fit on one line, but the quality of the user experience depends on everything surrounding that line.

For anyone who wants to test percentage calculations quickly, Monkza's Percentage Calculator provides a simple online option without requiring you to build the calculation yourself.

The fundamental formula remains simple:

Percentage of a number = (percentage / 100) × number

Once that relationship is understood, most percentage calculations become variations of the same idea—and implementing them in JavaScript is surprisingly straightforward.