Home› How it works
Under the hood

How the calculator works.

A look at the math, the user interface decisions, and how everything is implemented.

The four formulas

Every percentage calculation reduces to one of four formulas:

ModeQuestionFormula
1What is P% of X?Y = X × P ÷ 100
2Y is what % of X?P = Y ÷ X × 100
3Y is P% of what?X = Y × 100 ÷ P
4X changed by P%Y = X × (1 ± P ÷ 100)

Live calculation

Every input has an input event listener. When you type, the active mode’s formula runs, and the result is rewritten into the DOM along with the formula and the substituted equation.

Step-by-step solutions

Each mode generates an ordered list showing the math step by step:

  1. Convert the percentage to a decimal
  2. Perform the multiplication or division
  3. State the final result in plain English

The numbers in the steps update reactively as you type.

Dark mode

The CSS uses CSS custom properties (variables) for every color. A data-theme="dark" attribute on the <html> element swaps the variable values. The user’s choice is saved to localStorage so it persists across visits.

Share links

The current calculation mode and input values are serialized into URL query parameters. Loading a shared link parses the parameters, populates the fields, switches to the right mode, and runs the calculation. No server involved.

What runs where

  • Server: nothing. The site is fully static HTML/CSS/JS files.
  • Browser: all calculation logic, all DOM updates, theme persistence, share-link parsing.
  • Network: just the initial page load. Calculations don’t require a round trip.

This is why the calculator works offline after the first load, and why your inputs never leave your device.

No frameworks

The whole site is plain HTML, CSS, and JavaScript — no React, no Vue, no build step. About 400 lines of JS total. Pages typically load in under a second on a fast connection.