DEV Community

dayu2333-jinyul
dayu2333-jinyul

Posted on

Building a Fabric Calculator: Technical Deep Dive

#javascript #webdev #tutorial

I am a frontend developer who happens to sew, and a few months ago I noticed something: every fabric calculator on the web was either buried in ads, required signup for basic features, or gave wrong results because the formulas were clearly ported from a spreadsheet without unit handling.

So I built one. Here is what I learned.

The Core Problem

At first glance, a fabric calculator sounds trivial. Take width, height, divide by 36, done. The reality is messier because every project type has its own constraints.

For drapes, you need a fullness factor (typically 2x or 2.5x the rod width), pleat type adjustment, header allowance, double-hem allowance, and pattern repeat matching. For upholstery, there is welt cord length, boxing strip width, cushion depth factored in three dimensions, and pattern matching across every visible face.

Quantities that are integers in one unit become messy decimals in another, and floating-point rounding can give you a yardage result that is 0.02 yards off — which is enough that someone buys slightly more than they need.

Architecture Decisions

I settled on a model where each project type is a separate calculation module with its own input schema and output formatter. A drapery module takes:

{
  rodWidth: number (inches),
  finishedLength: number (inches),
  headerStyle: 'pinchPleat' | 'grommet' | 'rodPocket' | 'goblet',
  fullness: number (default 2.5 for pinch pleat),
  fabricWidth: number (default 54),
  patternRepeat: number | null,
  lined: boolean,
  unit: 'in' | 'cm'
}
Enter fullscreen mode Exit fullscreen mode

Each module returns a standardized result:

{
  fabricYards: number,
  liningYards: number | null,
  panelCount: number,
  cutLength: number,
  wastageEstimate: number
}
Enter fullscreen mode Exit fullscreen mode

Unit Conversions and Precision

The unit handling is the sneaky hard part. Users enter measurements in inches or centimeters, wide fabric is sold by the inch or centimeter, but fabric is priced and cut by the yard or meter. I normalize everything to inches internally, run the math at full precision, then convert to yards at the very end and round up to the nearest eighth-yard since that is what most stores will cut.

function toYards(inches: number): number {
  return Math.ceil(inches / 4.5) * 0.125; // round up to 1/8 yard
}
Enter fullscreen mode Exit fullscreen mode

Why Vanilla

I built this in plain JavaScript with no framework. The DOM surface is small — a handful of inputs, a results panel, and a project type selector. Adding React or Vue would be heavier than the actual calculator logic. The whole thing loads in under 200ms on a cold cache.

The site is live at yardage-calc.com if you want to see how it turned out. The full source is not open-source yet, but I am happy to answer questions about the calculation logic if anyone is building something similar. The sewing world could use better tools, and the bar is not high right now.

Things I Would Do Differently

  • Add a printable cut list that tells you exactly how many pieces of each length to cut from each fabric width
  • Visual fabric layout preview using canvas — showing how pattern pieces nest on the bolt
  • Offline PWAs for use in fabric stores with bad reception
  • Better mobile input UX — number fields with plus/minus steppers for in-store use with one hand

If you are a dev who sews, build something in this space. The existing tools are sparse and the audience is underserved. If you are a sewer who needs a calculator immediately, go use mine.

Top comments (0)