I built a roof calculator that does all the math in your browser — no server, no signup, no lead form

Nearly every "roofing calculator" on the internet is a contractor lead form in disguise. You type in your measurements, hit calculate, and the answer is locked until you hand over your phone number. The math was never the product — your contact info was.

I'm a developer, not a roofer, but I wanted to see what happens if you build the opposite: PitchCalc, five roof-math calculators where the answer shows up in about ten seconds, all computation happens locally in your browser, and there is no backend to store anything.

The actual math is one triangle

Everything in residential roofing reduces to one right triangle: rise over run. The whole engine is a handful of lines:

const ratio = rise / run;

const pitch = `${rise}/12`;                        // X:12 notation (run is usually 12")
const degrees = Math.atan(ratio) * 180 / Math.PI;  // 6/12 → 26.6°
const slopePercent = ratio * 100;                  // 6/12 → 50%
const multiplier = Math.sqrt(1 + ratio * ratio);   // 6/12 → 1.118
const rafterLength = Math.sqrt(run ** 2 + rise ** 2);

From there it's just unit conventions:

• Sloped roof area = footprint × multiplier
• Roofing squares = area ÷ 100 (a "square" is 100 sq ft, the unit shingles are sold in)
• Shingle bundles = ceil(squares × 3 × (1 + waste)) — three bundles per square, typically 10% waste

Five pages, one shared engine: roof pitch, roofing (area/squares/bundles), roof area, rafter, and shingles.

Local-first as a feature, not a limitation

The page says "Measurements stay in this browser" and means it literally: there is no database, no account system, no analytics event carrying your inputs anywhere. Results recompute on every keystroke, so there's no submit button at all.

One detail I like: the input state lives in the URL hash, so a calculation is shareable as a plain link — pitchcalc.com/#rise=6&run=12 opens with a 6/12 pitch preloaded. No encoding endpoint, no shortened URLs, just location.hash.

Trust through visible formulas

Every result panel prints the formula next to the number — √(1 + (rise ÷ run)²) right beside the multiplier value. If you don't trust the output you can check it with a pencil. That's also why the copy button produces something that reads like a takeoff sheet: the audience is a homeowner about to talk to a contractor, or an estimator checking numbers from a truck. The output had to survive being read aloud.

Stack notes

• Next.js, fully static — the whole site is pre-rendered pages plus a small client-side engine
• No form libraries or state management; controlled inputs and derived values
• Print stylesheet treats the result panel as the document, not the page chrome

What I'd add next

Waste factors per roof complexity, valleys/hips geometry, metric units. If you do roof math by hand for something else, tell me in the comments — genuinely collecting the backlog.

Try it: pitchcalc.com — free, no signup, and it will never ask for your phone number.