How I Built 30+ Free Construction Calculators Using Plain HTML and Vanilla JavaScript

John walkar — Tue, 16 Jun 2026 10:32:27 +0000

Most construction workers and homeowners still estimate material quantities using
guesswork or outdated spreadsheets. I wanted to fix that — so I built

Concrete, Gravel & Mulch Calculators | Free Estimators | YardsCalculator

Free construction and material calculators for concrete, gravel, mulch, asphalt, roofing, drywall, and landscaping projects. Estimate material quantities, costs, cubic yards, and coverage instantly.

yardscalculator.com

, a collection of 30+ free
construction and landscaping calculators using nothing but plain HTML and
vanilla JavaScript. No frameworks. No build tools. No npm install.

Here's how the core math works, and how I structured the tools for real-world use.

Why vanilla JS?

The tools needed to:

Load instantly on mobile (job sites have bad signal)
Work without an internet connection after first load
Be maintainable without a build pipeline

React or Vue would've been overkill. A static HTML file with inline JS loads in
under 200ms, works offline, and needs zero maintenance overhead.

The core formula: cubic yards

Almost every construction material in the USA is sold by the cubic yard.
One cubic yard = 27 cubic feet. The universal formula is:

Volume (cubic feet) = Length(ft) × Width(ft) × Depth(ft)

Cubic Yards = Volume ÷ 27

In JavaScript:

function calcCubicYards(lengthFt, widthFt, depthFt) {
  const cubicFeet = lengthFt * widthFt * depthFt;
  return cubicFeet / 27;
}

Simple. But the real challenge is unit conversion — users measure in feet,
inches, yards, meters, and centimeters interchangeably on a job site.

Handling mixed units

The most common real-world pattern: length in feet, depth in inches.
You need to normalize everything to feet before calculating.

function toFeet(value, unit) {
  const conversions = {
    ft: 1,
    in: 1 / 12,
    yd: 3,
    m: 3.28084,
    cm: 0.0328084
  };
  return value * (conversions[unit] || 1);
}

function calcCubicYards(length, lUnit, width, wUnit, depth, dUnit) {
  const l = toFeet(length, lUnit);
  const w = toFeet(width, wUnit);
  const d = toFeet(depth, dUnit);
  return (l * w * d) / 27;
}

This lets users input 12 ft × 10 ft × 4 in without thinking about conversions.

Concrete: bags vs. ready-mix

Once you have cubic yards, the next decision is bags vs. ready-mix truck.

An 80 lb bag of Quikrete yields approximately 0.022 cubic yards.

function bagCount(cubicYards, bagSizeLb) {
  const yieldPerBag = {
    40: 0.011,
    60: 0.017,
    80: 0.022
  };
  return Math.ceil(cubicYards / yieldPerBag[bagSizeLb]);
}

For ready-mix, most plants consider 10 cubic yards a full truck.
Under that, you often pay a short-load fee.

function truckLoads(cubicYards) {
  return (cubicYards / 10).toFixed(1);
}

Gravel: cubic yards to tons

Gravel is sold by the ton, not cubic yard. Density varies by stone type:

Material	lbs per cubic yard
Crushed stone (3/4")	2,400
Pea gravel	2,800
Sand	2,700
Topsoil	1,800

const density = {
  crushedStone: 2400,
  peaGravel: 2800,
  sand: 2700,
  topsoil: 1800
};

function cubicYardsToTons(cubicYards, material) {
  return (cubicYards * density[material]) / 2000;
}

Waste factor — the detail most calculators skip

Every real pour needs a waste factor. Subgrade isn't perfectly flat, forms
flex, and spillage happens. Standard factors:

Slabs: 5–10%
Driveways: 8–12%
Complex footings: 10–15%

function withWaste(cubicYards, wastePct = 0.08) {
  return cubicYards * (1 + wastePct);
}

Without this, homeowners consistently under-order and end up with a short pour
or an expensive second delivery.

Real-time UI without a framework

The UI pattern I use across all 30+ calculators:

html

ft in yd

— yd³ — bags function calculate() { const length = parseFloat(document.getElementById('length').value) || 0; const lUnit = document.getElementById('lUnit').value; // ... same for width, depth const yards = calcCubicYards(length, lUnit, width, wUnit, depth, dUnit); const withW = withWaste(yards); document.getElementById('result-yards').textContent = withW.toFixed(2) + ' yd³'; document.getElementById('result-bags').textContent = bagCount(withW, 80) + ' × 80lb bags'; }

fires on every keystroke — results update instantly with no button press.
Contractors on job sites don't want to tap "Calculate." They want the number to
just appear.

What I learned building 30+ calculators

Edge cases are the real work.** The formula is 3 lines. Handling zeros,
empty inputs, negative values, and unit mismatches is 80% of the code.
Mobile-first is non-negotiable.** These tools are used on phones in direct
sunlight. Font size on inputs must be 16px minimum (below that, iOS auto-zooms
and breaks the layout). High contrast, large tap targets, no hover-dependent UI.
Transparency builds trust.** Show the formula alongside the result.
Contractors don't blindly trust a black box — they want to verify the math.
Showing 12 × 10 × 0.33 ÷ 27 = 1.48 yd³ alongside the result gets more
return users than just showing 1.48.
No signup friction.** Every time I considered adding an email gate or
account requirement, I reminded myself: a contractor on a job site will just
close the tab. Free, instant, no friction.

The full tool

If you want to see all 30+ calculators live — concrete, gravel, mulch, asphalt,
roofing, drywall, topsoil, pavers, and more — they're all free at
yardscalculator.com.

The concrete calculator is at

Concrete, Gravel & Mulch Calculators | Free Estimators | YardsCalculator

Free construction and material calculators for concrete, gravel, mulch, asphalt, roofing, drywall, and landscaping projects. Estimate material quantities, costs, cubic yards, and coverage instantly.

yardscalculator.com

if you want to see the full implementation.

Open questions for the dev.to community

How do you handle unit conversion UX elegantly without overwhelming the user?

Any suggestions for making these tools more accessible (screen readers, keyboard nav)? Would there be interest in a GitHub repo with the core math functions as a standalone JS module?

Happy to answer questions about the implementation in the comments.

DEV Community: John walkar

How I Built 30+ Free Construction Calculators Using Plain HTML and Vanilla JavaScript

Concrete, Gravel & Mulch Calculators | Free Estimators | YardsCalculator

Handling mixed units

Concrete: bags vs. ready-mix

Concrete, Gravel & Mulch Calculators | Free Estimators | YardsCalculator