Building a Zero-Dependency Interactive T-Shirt Size Calculator (S-5XL) in Vanilla JavaScript

One of the highest-friction moments in online apparel e-commerce is the size selector. Most stores still rely on a static table of numbers that leaves shoppers guessing whether they should measure their body or an existing shirt — and whether a unisex Medium will still fit after its first trip through the dryer.

While building the sizing tooling for Tshirts I Want (Wear what you're really into. — an online store for original graphic apparel printed on demand in the USA), we wanted a fast, zero-dependency, client-side tool that solves both individual fit questions and bulk group orders (family reunions, charity 5Ks, school drama casts, and company teams).

You can try the live tool here:
Live Demo: Interactive T-Shirt Size Calculator (S-5XL)

1. The Domain Problem: Garment Width vs. Body Chest Circumference

When shoppers read a size chart, two completely different measurements often get confused:

Flat-Lay Half-Chest Width (Armpit-to-Armpit): Measured across a shirt lying flat on a table, 1 inch below the armholes.
Full Body Chest Circumference: Measured around the fullest part of the wearer's chest with a flexible tape.

A classic adult unisex crewneck (sizes S through 5XL) needs 2 to 4 inches of ease over body chest circumference for a standard everyday fit, less ease for a tailored silhouette, and more ease for a relaxed streetwear drape.

To document the underlying garment specifications clearly, we paired the calculator with four reference guides:

2. Modeling the S-5XL Garment Measurement Matrix in Vanilla JS

Rather than loading a heavy third-party sizing widget that blocks main-thread rendering or requires external API calls, we modeled the S-5XL size chart as a deterministic lookup table in vanilla JavaScript:

const UNISEX_SIZE_MATRIX = [
  { size: "S",   flatWidthIn: 18.0, lengthIn: 28.0, chestMinIn: 34, chestMaxIn: 37 },
  { size: "M",   flatWidthIn: 20.0, lengthIn: 29.0, chestMinIn: 38, chestMaxIn: 41 },
  { size: "L",   flatWidthIn: 22.0, lengthIn: 30.0, chestMinIn: 42, chestMaxIn: 45 },
  { size: "XL",  flatWidthIn: 24.0, lengthIn: 31.0, chestMinIn: 46, chestMaxIn: 49 },
  { size: "2XL", flatWidthIn: 26.0, lengthIn: 32.0, chestMinIn: 50, chestMaxIn: 53 },
  { size: "3XL", flatWidthIn: 28.0, lengthIn: 33.0, chestMinIn: 54, chestMaxIn: 57 },
  { size: "4XL", flatWidthIn: 30.0, lengthIn: 34.0, chestMinIn: 58, chestMaxIn: 61 },
  { size: "5XL", flatWidthIn: 32.0, lengthIn: 35.0, chestMinIn: 62, chestMaxIn: 65 }
];

function recommendByFlatShirt(flatWidthInches, lengthInches, fitOffset = 0) {
  const targetWidth = flatWidthInches + fitOffset;
  for (const row of UNISEX_SIZE_MATRIX) {
    if (row.flatWidthIn >= targetWidth - 0.5 && row.lengthIn >= lengthInches - 1.0) {
      return row;
    }
  }
  return UNISEX_SIZE_MATRIX[UNISEX_SIZE_MATRIX.length - 1];
}

Handling Fit Preference & Cotton Shrinkage Buffers

As detailed in our Does Cotton Shrink? laundering study, 100% ringspun and heavy cotton tees typically shrink 3% to 5% when tumble-dried on medium-to-high heat. When a shopper lands on the boundary between two sizes (for example, a 41-inch chest sitting right between M and L) and plans to machine-dry their shirts, the calculator surfaces a boundary recommendation so they can size up confidently.

3. Zero-Latency UX & Accessibility Details

Instant Unit Conversion (in to cm): Every input and table cell converts dynamically using 1 in = 2.54 cm without page reloads.
Dual Input Modes: Users can switch between Compare My Favorite Shirt (Flat-Lay) and Body Chest + Height + Fit Preference depending on whether they have a measuring tape or an existing tee handy.
Shareable URL for Group Orders: Event organizers collecting shirt sizes for a reunion, club, or race can link directly to https://tshirtsiwant.com/tools/size-calculator/ inside Google Forms or registration pages.