Skip to content
Codex13

37. Kalkulator jednostek miar dla programistów

This content is not available in your language yet.

Cel projektu

Dział zatytułowany „Cel projektu”

Narzędzie do przeliczania jednostek CSS i innych używanych w programowaniu — px↔rem, px↔vw, kolory (HEX↔RGB↔HSL), rozmiary plików (bajty↔KB↔MB), reprezentacje liczb (dec↔hex↔bin).

// Przeliczniki CSS
function pxToRem(px, baseFontSize = 16) {
  return px / baseFontSize;
}


function remToPx(rem, baseFontSize = 16) {
  return rem * baseFontSize;
}


function pxToVw(px, viewportWidth) {
  return (px / viewportWidth) * 100;
}


// Przelicznik kolorów HEX -> RGB
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}


// Systemy liczbowe
function decToHex(dec) { return dec.toString(16).toUpperCase(); }
function decToBin(dec) { return dec.toString(2); }
function hexToDec(hex) { return parseInt(hex, 16); }

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Przelicznik px ↔ rem (konfigurowalna base font size)
  • Przelicznik kolorów HEX ↔ RGB
  • Systemy liczbowe: DEC ↔ HEX ↔ BIN
  • Kopiowanie wyniku do schowka
Ocena: 3.0

Do dzieła!

Dział zatytułowany „Do dzieła!”

Powodzenia!

Kalkulator jednostek dla programistów to projekt o wysokiej praktyczności. Przeliczanie HEX↔RGB jest proste (parseInt z podstawą 16), ale HSL↔RGB wymaga więcej matematyki. Zacznij od px↔rem i HEX↔RGB — to najczęściej używane w praktyce CSS!