Skip to main content
The Unit Converter provides an intuitive interface for converting between different units across multiple categories. This guide walks you through all the features of the application.

​
Interface Overview

The application is organized into several key areas:

Category Tabs

Switch between Temperature, Length, Weight, and Velocity conversions

Result Display

Large, prominent screen showing your conversion result

Input Fields

Enter values and select source/target units

History Panel

View and reload your recent conversions

​
Performing a Conversion

1

Select a Category

Click one of the four category tabs at the top:
  • Temp (Temperature)
  • Long (Length)
  • Peso (Weight)
  • Vel (Velocity)
The active tab is highlighted with an accent color.
2

Enter a Value

Type a numeric value in the Valor (Value) field. You can enter:
  • Whole numbers: 100
  • Decimals: 98.6
  • Negative numbers: -40
The conversion happens automatically as you type! No need to click the Convert button for most operations.
3

Select Source Unit

Choose your starting unit from the De (From) dropdown:
  • °C (Celsius)
  • °F (Fahrenheit)
  • K (Kelvin)
4

Select Target Unit

Choose your destination unit from the Hacia (To) dropdown using the same units listed above.
5

View the Result

The result appears automatically in the large display screen above the input fields. The result includes:
  • The converted numeric value (formatted to 6 decimal places maximum)
  • The target unit label
If you see ”…” in the result screen, the conversion is processing. This typically happens instantly.

​
Real-Time Conversion

The app features automatic conversion that triggers when you:
  • Type or modify the value in the input field
  • Change the source unit dropdown
  • Change the target unit dropdown
// From app.js:213-223
document.getElementById("valor").addEventListener("input", () => {
    if (document.getElementById("valor").value) doConvert();
});

document.getElementById("desde").addEventListener("change", () => {
    if (document.getElementById("valor").value) doConvert();
});

document.getElementById("hasta").addEventListener("change", () => {
    if (document.getElementById("valor").value) doConvert();
});
You can also press Enter while focused on the value field or click the Convertir button to manually trigger a conversion.

​
Swapping Units

The swap button (↔) between the input fields lets you instantly reverse the conversion direction:
1

Click the Swap Button

Click the circular button with the left-right arrow icon located between the “Valor” and “De” fields.
2

Units Are Exchanged

The source and target units switch places. If you have a value entered, the conversion recalculates automatically.
Example:
  • Before swap: 100 km → mi
  • After swap: [result value] mi → km
// From app.js:205-210
document.getElementById("swap-btn").addEventListener("click", () => {
    const desdeEl = document.getElementById("desde");
    const hastaEl = document.getElementById("hasta");
    [desdeEl.value, hastaEl.value] = [hastaEl.value, desdeEl.value];
    if (document.getElementById("valor").value) doConvert();
});

​
Using the Conversion History

The app tracks your last 5 conversions in the History panel at the bottom:

​
Viewing History

Each history item shows:
  • The original value and unit (left side)
  • The converted result and unit (right side, in accent color)
History items are stored in memory only and will be lost when you refresh the page.

​
Reloading a Conversion

Click any history item to instantly reload that conversion:
1

Click a History Item

Click on any of the conversion entries in the “Recientes” (Recent) section.
2

Settings Are Restored

The app automatically:
  • Switches to the correct category tab
  • Loads the original value
  • Sets the source and target units
  • Recalculates the conversion
// From app.js:169-180
function loadHistory(i) {
    const h = history[i];
    document.querySelectorAll(".tab").forEach(t =>
        t.classList.toggle("active", t.dataset.cat === h.cat)
    );
    currentCat = h.cat;
    populateSelects(h.cat);
    document.getElementById("valor").value = h.val;
    document.getElementById("desde").value = h.desde;
    document.getElementById("hasta").value = h.hasta;
    doConvert();
}

​
Status Indicator

The pulsing dot in the top-right corner indicates the app is running and connected:
  • Pulsing accent color: App is active and ready (yellow-green in dark mode, blue in light mode)
  • The status dot uses the accent color defined by your current theme
If you see “Error (sin conexión)” in the result display, the backend server may be unavailable. Check that the Flask server is running on the expected port.

​
Keyboard Shortcuts

KeyAction
TabNavigate between input fields
EnterTrigger conversion (when focused on value field)
Arrow Up/DownNavigate dropdown options

​
Error Handling

The app provides clear feedback for common issues:
Cause: You tried to convert without entering a numeric value.Solution: Enter a number in the Valor field before converting.
Cause: The backend server is not responding.Solution: Ensure the Flask server is running and the ICE backend is available on port 10000.
Cause: No conversion has been performed yet, or the category was changed.Solution: This is normal. Enter a value and the result will appear.

​
Tips for Best Experience

Decimal Precision

Results are automatically rounded to 6 decimal places and trailing zeros are removed for clean display.

Category Switching

When you switch categories, the value field clears automatically to prevent confusion between different unit types.

Same Unit Conversions

Converting between identical units (e.g., kg → kg) returns the original value without making a server request.

Responsive Design

The interface adapts to your screen size with optimized layouts for mobile, tablet, and desktop devices.

Build docs developers (and LLMs) love

Get started for freeTalk to us