Percentage calculator — two calculations, one page
The two percentage calculations people need most often, on one page: what percent a part is of a total, and what a percentage of a number is. Every calculation stays in the history below, so you don't have to redo it if you need it again.
What it records
- Part (e.g. 45)
- Total (e.g. 200)
- Percentage (e.g. 20)
- Of (e.g. 150)
How it works
This is a Reactive app: a plain text document that your browser turns into a working app — forms, live data, tables, statistics and even charts, with nothing to install or configure.
- Use it right away. Hit “Use this app”: it opens right in your browser, ready to go, with data saved only on your device.
- Your data stays yours. Everything is stored locally on your device, kept separate for each app: no account, no server, nothing to set up.
- Make it your own. The text below is the entire app: copy it, tweak fields, views and words, and your changes become interactive instantly.
- Share it as a file. An app is a simple file: save it, export it or share it with a link; and with encrypted collaboration several people edit the same data in real time.
The app’s source
# 🧮 Percentage calculator
The two percentage calculations people need most often, on one page: what
percent a part is of a total, and what a percentage of a number is. Every
calculation stays in the history below, so you don't have to redo it if you
need it again.
## What percentage is a part of a total?
::::form{path="calcsA" id="fpa"}
::input{form="fpa" field="part" type="number" placeholder="Part (e.g. 45)" required="true"}
::input{form="fpa" field="total" type="number" placeholder="Total (e.g. 200)" required="true"}
::add-form{form="fpa" path="calcsA" label="Calculate percentage"}
::::
:::table{path="calcsA" headers="Part,Total,Percentage" deletable="true" editform="fpa"}
{part} | {total} | {part/total*100}%
:::
## What is X% of a number?
::::form{path="calcsB" id="fpb"}
::input{form="fpb" field="percent" type="number" placeholder="Percentage (e.g. 20)" required="true"}
::input{form="fpb" field="total2" type="number" placeholder="Of (e.g. 150)" required="true"}
::add-form{form="fpb" path="calcsB" label="Calculate value"}
::::
:::table{path="calcsB" headers="Percentage,Total,Value" deletable="true" editform="fpb"}
{percent}% | {total2} | {percent*total2/100}
:::
Useful for a discount, a raise, a commission, or just to double-check a
mental estimate: type the numbers, get the result instantly, and keep it
around to compare with the next calculation.