Potápanie do JavaScriptu: Ako vytvoriť farebný konvertor Hex2RGB

Foto: Fotis Fotopoulos on Unsplash

V tomto článku vytvoríme webovú aplikáciu, ktorá prevádza farebné kódy medzi hexadecimálnymi a RGB.

Nájdete tu ukážku a zdrojový kód tu.

Štruktúra projektu:

Štruktúra projektu je dosť jednoduchá.

  1. index.html: Obsahuje štruktúru aplikácie.
  2. style.css: Štýly stránky.
  3. app.js: Obsahuje všetok kód potrebný na spustenie projektu.

Nápad:

Tu je zoznam vecí, ktoré som chcel, aby táto aplikácia vykonala:

  1. Vždy, keď sa do textového poľa pre hex zadá niečo, aplikácia skontroluje, či je platná farba. Ak áno, skonvertujte ho na RGB, nastavte ho ako pozadie a potom vložte hodnotu RGB do textového poľa RGB a naopak.
  2. Ak je do textového poľa zadaný krátky hexadecimálny farebný kód, rozbaľte ho, keď stratí zameranie (užívateľ klikne mimo textovej oblasti).
  3. Automaticky pripojte symbol „#“ na hexadecimálny vstup.

Poďme začať!

index.html

Vytvoril som dve textové polia s identifikátormi „hex“ a „rgb“. Vedľa každého je v predvolenom nastavení ikona svg, ktorá má triedu skrytých.

style.css

Toto je základné rozloženie, ktoré vylepšuje vzhľad značky. Definujem tu dve triedy: skryté a. Prvá sa používa na skrytie / zobrazenie chybovej ikony SVG a druhá na zmenu farby textu na základe farby pozadia. V predvolenom nastavení som text nastavil na tmavú farbu (pre svetlé pozadie).

app.js

Tu je kúzelná časť. Rozdelím kód na kúsky:

Najprv definujeme premenné, ktoré zacieľujú vstupy pomocou id 'hex' a 'rgb'. Ďalej máme funkcie na kontrolu, či je vstup Hex / RGB platný alebo nie. Používajú základné nastavenie regulárnych výrazov a vracajú booleovské hodnoty. Ak vás zastrašia, odporúčame vám vyskúšať tento RegexTutorial.

Tu som urobil parsovaciu funkciu s názvom modifikHex, ktorá kontroluje, či je zadaný hex 4 znaky; to znamená, že obsahuje znak „#“ a je skratka (napríklad # 333) a nahrádza znak „#“ prázdnym znakom. Potom skontroluje, či je dĺžka teraz 3, a rozšíri ju na 6 znakov (napríklad # 123 = # 112233).

Teraz definujeme dve funkcie, ktoré dokážu prevádzať hex na rgb a naopak. Toto je podrobné členenie pre hexToRgb (Tento kód je rozšírený, aby lepšie vysvetlil, ako tento proces funguje):

  1. Definujte prázdne pole na uloženie výsledku.
  2. Nahraďte symbol „#“, ak existuje, a ak jeho dĺžka nie je rovná 6 (tj skratková verzia), zavolajte vyššie uvedenú funkciu defineHex a rozviňte ju.
  3. Veľmi jednoduchým spôsobom funguje hex na rgb prevádzaním hexadecimálneho kódu (v základni 16) na rgb kód (v základni 10). Každé dva znaky v hexadecimálnom kóde predstavujú hodnotu v farebnom kóde rgb. Napríklad v #aabbcc je červená (aa do bázy 10), zelená je (bb do bázy 10) a modrá je (cc do bázy 10). Takže vo funkcii krájame hex hodnotu, prevádzame ju na bázu 10 pomocou parseInt a potom ju ukladáme do definovaného poľa.
  4. Nakoniec vraciame výstupný reťazec.

Pre funkciu rgbToHex (je to napísané s kratšou logikou):

  1. Priamo pomocou regónu extrahujeme časti vo vnútri zátvoriek - to znamená, že rgb (123,21,24) vráti 123,21,24.
  2. Ďalej pomocou funkcie mapy vrátime nové pole, ktoré prevádza číslo na základňu 16 a potom vloží hodnotu.

Dovoľte mi vysvetliť túto časť. Keď použijeme regulárny výraz na priradenie častí v zátvorkách, vrátime údaje typu „string“. Aby sme ju mohli previesť na Base 16, musíme použiť metódu toString s parametrom 16.

Teraz je metóda toString použiteľná iba pre číselné typy údajov, takže pomocou parseInt najprv skonvertujeme každý prvok poľa na číslo, potom pomocou nástroja toString (16) ho skonvertujte do hexadecimálnej podoby a nakoniec pridajte výplň tak, aby bola presne 2 znaky dlhé. Čalúnenie je potrebné, ak máte niečo ako „14“, ktoré chcete previesť na hexadecimálne, vráti sa „e“. Ale hexadecimálny kód potrebuje pre každú časť 2 znaky, preto je potrebné vyplnenie, čo z neho robí 0e.

Poznámka: padStart je funkcia ES8, ktorá nemusí byť podporovaná v každom prehliadači. Aby som tento tutoriál udržal jednoduchý, nepreložil som ho do ES5.

3. Nakoniec vrátime výsledné pole jeho pripojením a prevedením na veľké písmená.

Táto funkcia sa používa na doplnenie tejto malej chyby na pravej strane vstupu v prípade, že zadaný typ vstupu je nesprávny.

Jednoducho spustí obsah vstupu (hex.value a rgb.value) prostredníctvom svojich príslušných kontrolných funkcií a pomocou vráteného booleanu pridá / odstráni triedu .hidden.

Teraz definujeme funkciu, ktorá vezme farbu pozadia a potom určí, či je tmavá alebo svetlá (tento kód som získal z StackOverflow). Vynásobí jednotlivé hodnoty farieb niektorými vypočítanými číslami a vráti hodnotu „čierna“ alebo „biela“. Potom pomocou inej funkcie zmením farbu textu pridaním / odstránením triedy .dark.

Pridanie poslucháčov udalostí:

Nakoniec budeme využívať všetky vyššie uvedené funkcie pridaním poslucháčov udalostí.

Najprv pridáme udalosť prelomenia na hexadecimálny vstup. Táto udalosť sa spustí pri každom uvoľnení klávesu. Funkcia funguje nasledovne:

  1. Kontrolujeme, či je vstupný kód platný, a ak je to skratka, rozširujeme ho.
  2. Nastavujeme farbu pozadia tela na vstupnú hodnotu.
  3. Kontrolujeme, či je farba svetlá / tmavá a podľa toho meníme farbu textu.
  4. Nakoniec voláme funkciu previesť a potom vložíme prevedenú farbu do vstupu RGB.

Ďalším poslucháčom udalostí, ktorý sme použili, je rozmazanie. Spustí sa vždy, keď vstup stratí „zameranie“, alebo laicky, zakaždým, keď kliknete / klepnete mimo vstupného prvku, spustí sa rozostrenie. Preto je dobré upraviť vstupný hex!

Preto skontrolujeme, či je hex hex platná alebo nie, potom ju rozšírime, ak je krátka, a nakoniec pridáme znak „#“, ak neexistuje. Upozorňujeme, že kontrolujeme, či index 0 a 1 neobsahujú znak #. Deje sa tak tak, aby funkcia nepripojila dvakrát znak #.

Teraz do vstupu rgb pridávame rovnaký poslucháč udalostí kľúčov a tiež sleduje rovnaké série krokov ako poslucháč hex udalostí.

Nakoniec pridávame k poslucháčom poslucháčov udalostí celý dokument, to znamená, že sa spustí pre ktorýkoľvek z týchto dvoch vstupných prvkov. V jeho vnútri voláme funkciu errorMark, ktorá v prípade chyby pridá ikonu chyby, alebo ak je všetko platné, odstráni ju.

Tu je konečný kód pre súbor app.js:

záver

Tam to máte! Viem, že tento kód nie je dokonalý a dá sa obnoviť, ale hej, toto je len začiatok. Ak chcete vylepšiť tento kód, môžete pokračovať a otvoriť PR na mojom repozitári githubu.

Šťastné kódovanie!