webdevpuneet.com

Related Snippets

67 in Tools & Calculators category
53–58 of 60

Unit Converter

Timezone Converter

Split Payment Calculator

Calculator

Stopwatch

Pomodoro Timer

Unit Converter — Length, Weight, Temp Converter JS

Unit Converter · Tools · Plain HTML, CSS & JS · Live preview

CategoryTools & Calculators
TagsCSS Grid

Copy & paste

Source Code

<div class="uc-card">
  <h3>Unit converter</h3>
  <div class="uc-cats" id="ucCats"></div>
  <div class="uc-io">
    <div class="uc-field">
      <input type="number" id="ucFrom" value="1" inputmode="decimal">
      <select id="ucFromU"></select>
    </div>
    <button type="button" class="uc-swap" id="ucSwap" aria-label="Swap units">⇅</button>
    <div class="uc-field">
      <input type="number" id="ucTo" readonly>
      <select id="ucToU"></select>
    </div>
  </div>
  <p class="uc-eq" id="ucEq"></p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Base-factor engine
Each unit is one factor to a base unit, so any-to-any needs N factors, not N² formulas.
Four categories
Length, weight, temperature, and volume out of the box, generated from data.
Formula-based temperature
Units can be to/from functions, so affine scales (°F, K) work alongside linear ones.
Live two-way conversion
Typing or changing either dropdown re-converts instantly.
Unit swap
A swap button exchanges from/to units (with a rotate) and re-converts.
Smart rounding
Round-then-trim drops floating-point noise and trailing zeros for clean numbers.
Read-only result
The output field always shows a real conversion, never stray input.
Data-driven & no library
Categories and units live in one CATS object; the UI generates from it — zero dependencies.

About this UI Snippet

Unit Converter — Base-Factor Engine Across Length, Weight, Temperature & Volume

Screenshot of the Unit Converter snippet rendered live

A unit converter looks simple but hides a real design question: how do you convert any unit to any other without writing a formula for every pair? This snippet builds a multi-category converter — length, weight, temperature, and volume — on a clean base-unit engine that needs only one factor per unit, in plain HTML, CSS, and vanilla JavaScript, with no library.

Convert through a base unit, not pair-by-pair

The key idea: instead of defining a conversion for every pair of units (which grows quadratically), each unit is defined by a single factor relative to one base unit per category — metres for length, grams for weight, litres for volume. To convert, you go to the base (value × factor) and back out (base ÷ targetFactor). So any-to-any conversion needs just N factors, not N² formulas, and adding a new unit is one number. This base-unit approach is how every real conversion library is structured.

Temperature is the exception — and it's handled

Temperature can't use a simple multiplier because the scales have different zero points (0°C isn't 0°F). The engine handles this by letting a unit be either a plain factor *or* an object with to/from functions that convert to and from the base (Celsius). Celsius is identity, Fahrenheit uses (°F−32)×5/9, Kelvin subtracts 273.15. Because toBase/fromBase check the unit's type, formula-based and factor-based units coexist in the same engine — the detail that makes a single converter handle both linear and affine units correctly.

Live, two-way, with a swap

Typing a value converts instantly, and changing either dropdown re-converts. A swap button exchanges the from/to units (with a little rotate animation) so you can flip the direction without retyping — and it re-runs the conversion immediately. The result field is read-only so it always reflects a real conversion rather than stray input, and an equation line ("1 Meters = 3.28084 Feet") spells out the conversion in words.

Sensible rounding

Floating-point conversions produce noise like 3.2808398950131235. The output is rounded to six significant decimals and re-parsed to drop trailing zeros, so you get 3.28084 rather than a long tail or a rigid fixed-decimal that shows 5.000000. This "round then trim" gives clean numbers across both tiny (millimetres) and huge (miles) values.

Data-driven and extensible

Categories and their units live in one CATS object, and the UI (category chips, dropdowns) is generated from it — so adding a category (area, speed, data) or a unit is a data change, not new logic. It's a complete, dependency-free reference for the base-factor conversion pattern and for mixing linear and formula-based units in one engine. Note that fillUnits() defaults the "to" dropdown to the second unit in the category (Math.min(1, …)) rather than the first, specifically so picking a category never starts with identical from/to units showing a trivial "1 Meters = 1 Meters" — a small touch that makes the very first conversion shown for any category actually demonstrate the converter doing something.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA unit converter renders with category chips (Length, Weight, Temperature, Volume).
  2. 2
    Pick a categoryClick a chip to load that category's units into both dropdowns.
  3. 3
    Type a valueEnter a number and choose from/to units — the result converts live.
  4. 4
    Swap directionClick ⇅ to exchange the from and to units and re-convert instantly.
  5. 5
    Add units or categoriesEdit the CATS object — add a factor for a unit or a new category; the UI regenerates.
  6. 6
    Read the equationThe line below spells out the conversion (e.g. 1 Meters = 3.28084 Feet).

Real-world uses

Common Use Cases

Utility tool dashboards
Add a handy converter widget next to a currency converter, covering length, weight, temperature and volume.
Cooking and recipe apps
Convert volumes and weights between metric and imperial, with units generated from a data table, not hand-written pairs.
Fitness and health tools
Switch weight and height units beside a BMI calculator, with live two-way conversion when either dropdown changes.
Travel and shipping
Convert distances and parcel weights, and pair with a timezone converter for a complete travel utility panel.
Base-factor pattern teaching
Learn how one factor per unit lets any unit convert to any other, with temperature handled by to and from functions for affine scales.

Got questions?

Frequently Asked Questions

Each unit is defined by a single factor relative to one base unit per category (metres, grams, litres). Conversion goes through the base: value × fromFactor gives the base amount, then ÷ toFactor gives the target. So N units need only N factors, and adding a unit is one number — versus N² formulas if you converted each pair directly. This base-unit design is how conversion libraries are built.

Temperature scales are affine, not linear — they have different zero points (0°C = 32°F), so a single multiplier can't convert them. The engine lets a unit be either a plain factor or an object with to/from functions that map to and from the base (Celsius). toBase/fromBase check the unit's type, so formula-based units like Fahrenheit and Kelvin work in the same engine as factor-based ones like metres.

Raw conversions produce values like 3.2808398950131235. The output is rounded to six decimals with toFixed(6), then parseFloat re-parses it to strip trailing zeros — so you get 3.28084, not a long tail and not a rigid 5.000000. This round-then-trim approach gives clean numbers across both very small and very large magnitudes.

Edit the CATS object. To add a unit, add a key with its factor relative to that category's base (e.g. Yards: 0.9144 under Length). To add a category, add an entry with a base and a units map (use to/from functions if it's an affine scale). The category chips and dropdowns are generated from CATS, so the UI updates automatically — no new conversion logic needed.

Keep the CATS data as a constant and hold the current category, value, and units in state. Derive the result with a computed/useMemo from those, and render chips and options from CATS. In React use useState; in Vue, refs and computed; in Angular, component properties and a getter. The base-factor conversion functions are framework-agnostic and port unchanged.