01. Konwerter jednostek

This content is not available in your language yet.

Cel projektu

Zbudujesz aplikację do przeliczania jednostek — długości, masy, temperatury, objętości i prędkości. Użytkownik wybiera kategorię, wpisuje wartość i widzi wynik we wszystkich jednostkach tej kategorii.

Czego się nauczysz?

Praca z formułami matematycznymi w JavaScript
Zarządzanie wieloma stanami (wartość wejściowa, wybrana kategoria, jednostka źródłowa)
Dynamiczne renderowanie na podstawie wybranej kategorii
Formatowanie liczb (dziesiętne, notacja naukowa)

Co ma robić aplikacja?

Główne funkcjonalności

Wybór kategorii — długość, masa, temperatura, objętość, prędkość (minimum 3)
Wpisanie wartości — pole numeryczne z wyborem jednostki źródłowej
Wynik — wartości we wszystkich jednostkach tej kategorii jednocześnie
Historia konwersji — ostatnie N przeliczeń (localStorage)

Przykładowe dane kategorii

export const units = {
  length: {
    label: 'Długość',
    units: [
      { id: 'mm', label: 'Milimetry (mm)', toBase: (v) => v / 1000 },
      { id: 'cm', label: 'Centymetry (cm)', toBase: (v) => v / 100 },
      { id: 'm',  label: 'Metry (m)',        toBase: (v) => v },
      { id: 'km', label: 'Kilometry (km)',   toBase: (v) => v * 1000 },
      { id: 'in', label: 'Cale (in)',        toBase: (v) => v * 0.0254 },
      { id: 'ft', label: 'Stopy (ft)',       toBase: (v) => v * 0.3048 },
      { id: 'mi', label: 'Mile (mi)',        toBase: (v) => v * 1609.344 },
    ],
    fromBase: {
      mm: (v) => v * 1000,
      cm: (v) => v * 100,
      m:  (v) => v,
      km: (v) => v / 1000,
      in: (v) => v / 0.0254,
      ft: (v) => v / 0.3048,
      mi: (v) => v / 1609.344,
    },
  },
  temperature: {
    label: 'Temperatura',
    units: [
      { id: 'C', label: 'Celsjusz (°C)', toBase: (v) => v },
      { id: 'F', label: 'Fahrenheit (°F)', toBase: (v) => (v - 32) * 5/9 },
      { id: 'K', label: 'Kelvin (K)', toBase: (v) => v - 273.15 },
    ],
    fromBase: {
      C: (v) => v,
      F: (v) => v * 9/5 + 32,
      K: (v) => v + 273.15,
    },
  },
};

export function convert(value, fromUnit, category) {
  const cat = units[category];
  const fromDef = cat.units.find((u) => u.id === fromUnit);
  const baseValue = fromDef.toBase(value);
  return cat.units.map((u) => ({
    ...u,
    result: cat.fromBase[u.id](baseValue),
  }));
}

Warianty realizacji

Minimum 3 kategorie (długość, masa, temperatura)
Przeliczanie wartości we wszystkich jednostkach jednocześnie
Wybór jednostki źródłowej (dropdown)
Czytelne wyświetlenie wyników
Formatowanie liczb (.toFixed(4))

Ocena: 3.0

Wszystko z Wariantu B
Custom hook useConverter z logiką konwersji
Tryb “porównaj dwie wartości” (np. 100 km vs 100 mil — co więcej?)
Ulubione konwersje (zapisane jednostki)
Notacja naukowa dla bardzo małych/dużych liczb

Ocena: 5.0-6.0

Wskazówki implementacyjne

// src/App.jsx — uproszczony flow
function App() {
  const [category, setCategory] = useState('length');
  const [value, setValue] = useState('');
  const [fromUnit, setFromUnit] = useState('m');

  const results = useMemo(() => {
    const numValue = parseFloat(value);
    if (isNaN(numValue)) return [];
    return convert(numValue, fromUnit, category);
  }, [value, fromUnit, category]);

  return (
    <div>
      <select value={category} onChange={(e) => setCategory(e.target.value)}>
        {Object.entries(units).map(([key, cat]) => (
          <option key={key} value={key}>{cat.label}</option>
        ))}
      </select>
      <input
        type="number"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <select value={fromUnit} onChange={(e) => setFromUnit(e.target.value)}>
        {units[category].units.map((u) => (
          <option key={u.id} value={u.id}>{u.label}</option>
        ))}
      </select>
      <ul>
        {results.map((r) => (
          <li key={r.id}>{r.label}: {r.result.toFixed(6)}</li>
        ))}
      </ul>
    </div>
  );
}

Do dzieła!

Powodzenia!

Konwerter jednostek to projekt, w którym matematyka i React muszą ze sobą współpracować. Najtrudniejsze to temperatura — nie ma liniowej zależności jak przy długości (trzeba osobno liczyć do i z bazy). Zacznij od kategorii prostych (długość, masa) i przetestuj dokładnie każdą formułę!