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

One of the biggest hurdles in online apparel shopping is picking the correct size. Traditional stores use static number charts that leave customers uncertain whether to measure their body or an existing shirt, and whether a unisex Medium will remain fitting after being through a dryer cycle. While developing the sizing tools for Tshirts I Want, a USA-based online store for original printed apparel, the goal was to create a fast, zero-dependency, client-side solution that addresses both individual fit inquiries and bulk group orders.

The interactive T-Shirt Size Calculator (S-5XL) is available here: Live Demo: Interactive T-Shirt Size Calculator (S-5XL)

The primary disparity between garment dimensions and body measurements can cause confusion. Flat-Lay Half-Chest Width, measured across a shirt lying flat on a table 1 inch below the armholes, differs from Full Body Chest Circumference, measured around the wearer's fullest chest with a flexible tape. For an adult unisex crewneck (sizes S through 5XL), a standard everyday fit requires 2 to 4 inches of ease over body chest circumference, less for a tailored silhouette, and more for a relaxed streetwear drape.

Four reference guides are provided to clarify garment specifications: Unisex T-Shirt Size Chart (S-5XL), How Should a T-Shirt Fit?, Men's vs. Women's vs. Unisex T-Shirt Sizing Compared, and Does Cotton Shrink? Ringspun Cotton vs. Heavy Cotton vs. Cotton-Poly Blends.

To create the S-5XL size chart, it was modeled as a deterministic lookup table in vanilla JavaScript instead of loading a resource-heavy third-party sizing widget. The UNISEX_SIZE_MATRIX array holds size-specific data, including flat width in inches, length in inches, minimum and maximum chest measurements in inches. The recommendByFlatShirt function takes flat shirt width in inches, length in inches, and an optional fit offset, then iterates through the UNISEX_SIZE_MATRIX to find the best match based on the target width and length.

If the target measurements fall on a boundary between two sizes, the calculator suggests sizing up to account for potential cotton shrinkage.

Additional features include instant unit conversion (inches to centimeters) without reloading the page, dual input modes for comparing a favorite shirt or measuring body, chest, height, and preferred fit, and a shareable URL for group orders, such as reunions, charity events, school drama casts, and company teams. The live calculator is accessible at tshirtsiwant.com/tools/size-calculator/, and the full range of graphic apparel can be found at tshirtsiwant.com.