How Much Do I Need?
Free practical calculators for estimating how much material, space, or quantity you need.
Live site: https://how-much-do-i-need.freewebtoolss.workers.dev
Each calculator asks for a few measurements and shows three things: the exact calculated quantity, a sensible amount to buy (with an adjustable allowance for waste, rounded up to real product sizes), and the working behind both.
Features on every calculator
- US or metric units, with a unit menu on every measurement. Values convert when you switch, and the choice is remembered on your device.
- Several areas added together: split L-shaped or irregular spaces into rectangles with Add another area (area-based calculators).
- Optional price per box, bag, gallon and so on, for an estimated total cost.
- Copy link to this result: the link carries every input, so a partner or contractor opens the same calculation.
- Print shopping list: a printable checklist of what to buy, the cost, and the inputs it was based on.
How it works
- Static site. No backend, database, accounts or analytics. Every calculation runs in the browser and keeps working offline once a page has loaded. The only third-party code is the ads, which run in sandboxed frames (see below).
- No dependencies. The build is a small Node script. Wrangler is fetched by
npx only to deploy.
- Pre-rendered. Each calculator page is generated with its form and its default result already in the HTML, so it reads well to search engines and works before JavaScript runs. The browser then recalculates live as values change.
- One source of truth. The same calculator modules run in the build, in the browser and in the tests.
src/
calculators/ one file per calculator + index.mjs registry
_shared.mjs field factories and display helpers
lib/
units.mjs exact unit definitions, rounding, number formatting
validate.mjs input validation (pure), run() helper
render.mjs form and result HTML (build + browser)
engine.mjs browser runtime: live results, US/Metric switch, reset
search.mjs calculator search/filter on the home and list pages
pages/templates.mjs page layouts (home, all calculators, calculator, about, privacy, 404)
static/ CSS, icons, social image, _headers (security headers)
site.config.mjs site URL, name, ad slot settings
scripts/
build.mjs generates dist/ (pages, sitemap.xml, robots.txt, browser JS)
serve.mjs local server that mimics Cloudflare's URL handling
make-images.mjs re-renders the PNG icons and og-image.png with headless Chrome
test/
*.test.mjs unit + build tests (node --test)
e2e/run.mjs browser tests in headless Chrome over the DevTools protocol
Commands
Requires Node 20 or newer (Node 22+ for the browser tests).
npm run build # generate dist/
npm test # formula, validation and build tests
npm run test:e2e # build, then test every page in headless Chrome
npm run serve # build, then serve dist/ at http://localhost:8788
npx wrangler deploy # build, then deploy dist/ to Cloudflare
The browser tests look for Chrome in the usual places; set CHROME_PATH to use another Chromium-based browser. To test the live site instead of a local build: BASE_URL=https://how-much-do-i-need.freewebtoolss.workers.dev node test/e2e/run.mjs.
Deployment
wrangler.jsonc configures an assets-only Cloudflare Worker (no Worker script). Wrangler runs node scripts/build.mjs first (the build.command), then uploads dist/, which is the folder the build writes the finished static site into. html_handling: "auto-trailing-slash" gives clean URLs such as /paint-calculator/, and not_found_handling: "404-page" serves dist/404.html with a 404 status.
If the site moves to a custom domain, change SITE.url in src/site.config.mjs and redeploy. Canonical links, Open Graph URLs, robots.txt and sitemap.xml all come from it.
Adding a calculator
- Create
src/calculators/<name>.mjs exporting a definition: id, slug, name, question, category, keywords, title, description, summary, intro, groups, inputs, compute(values), present(result, ctx) and content (explanatory sections, including how it works and the rounding rules). Copy an existing one as a starting point.
- Import it in
src/calculators/index.mjs and add it to CALCULATORS.
- Add known-answer tests to
test/calculators.test.mjs, then run npm test and npm run test:e2e.
The build creates the page, the links, the search entry and the sitemap entry. It fails if a title or description is missing, duplicated or too long, or if the default inputs don't produce a result.
compute() receives every measurement in SI base units (metres, m², m³, m² per litre, kg/m³, bytes), so it never has to deal with unit conversion. present() turns the result into the display model: a headline, an "Estimated amount to buy" section, a "Calculated quantity" section, the step-by-step working and notes.
Advertising
Ads are Adsterra banners, configured in ADS in src/site.config.mjs. Nothing ad-related is built until at least one unit there has a key and a src (the invoke.js URL from Adsterra's Get code). Then:
- Two small slots per calculator page: a 468×60 banner below the result (320×50 on phones, none below 352 px wide), and a 300×250 box at the bottom of the desktop sidebar. Nothing between the form and the result, no pop-ups. Slots load only when they scroll near the screen.
- Sandboxed. Each ad is an iframe pointing at
/ads/<unit>.html, a tiny page the build generates. The iframe has sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox" (no same-origin, no top navigation), so ad code can't read the calculator, the site's storage, or redirect the page. /ads/* gets its own Content-Security-Policy in src/static/_headers; every other page keeps the strict one and loads no third-party code.
- Consent.
src/lib/ads.mjs asks first when the browser's time zone is in the EU/EEA, UK or Switzerland. Ad choices in the footer lets anyone change their choice; it's stored in localStorage as hmdin-ad-consent.
- Privacy, About and home pages switch to wording that describes the ads. Update
ADS.privacyUpdated when ads go live or change.
npm run test:e2e includes test/e2e/ads.mjs, which builds with stub units (test/fixtures/stub-ads.mjs) and checks consent, unit sizes, sandboxing and print in headless Chrome. scripts/serve.mjs applies _headers the way Cloudflare does, so local tests run under the real security headers.
Accuracy
Unit conversions use exact definitions (1 in = 2.54 cm, 1 ft = 0.3048 m, 1 US gal = 3.785411784 L, 1 lb = 0.45359237 kg). Results are estimates. The pages explain what can change them and why the waste allowances exist. Found a mistake? Please open an issue.
License
MIT
