Scufundare în JavaScript: Cum să creați un convertor de culori Hex2RGB

Fotografie de Fotis Fotopoulos pe Unsplash

În acest articol, vom crea o aplicație web care transformă codurile de culori între Hexadecimal și RGB.

Puteți găsi o demo aici și codul sursă aici.

Structura proiectului:

Structura proiectului este destul de simplă.

  1. index.html: Conține structura aplicației.
  2. style.css: Stilează pagina.
  3. app.js: Conține tot codul necesar pentru a derula proiectul.

Idee:

Iată lista de lucruri pe care doream să le efectueze această aplicație:

  1. Ori de câte ori este introdus ceva într-un câmp text pentru hex, aplicația ar trebui să verifice dacă culoarea este valabilă. Dacă este, convertiți-o în RGB, setați-o ca fundal și apoi puneți valoarea RGB în câmpul de text RGB și invers.
  2. Dacă un cod de culoare hex scurt este introdus în câmpul de text, extindeți-l când câmpul text pierde focalizarea (utilizatorul face clic în afara zonei de text).
  3. Pregătiți automat simbolul „#” la intrarea hexagonală.

Sa incepem!

index.html

Am creat două câmpuri de text cu ID-uri de „hex” și, respectiv, „rgb”. Pe lângă fiecare, este implicit o pictogramă svg pentru eroare, care are o clasă de ascunse, implicit.

style.css

Iată un aspect de bază pentru ca marcarea să arate puțin mai bine. Definesc aici două clase, .hidden și .dark. Primul este folosit pentru a ascunde / afișa pictograma SVG de eroare, iar cel de-al doilea pentru a schimba culoarea textului pe baza culorii de fundal. În mod implicit, am setat textul pe o culoare închisă (pentru fundaluri luminoase).

app.js

Iată partea magică. Voi descompune codul în bucăți:

În primul rând, definim variabile care vizează intrările cu id „hex” și „rgb”. În continuare, avem funcții de a verifica dacă intrarea Hex / RGB este valabilă sau nu. Utilizează o configurație de bază regex și returnează un boolean. Dacă vă lăsați intimidați, vă recomand să încercați acest RegexTutorial.

Aici, am făcut o funcție de analiză numită modificare, care verifică dacă hex-ul de intrare are o lungime de 4 caractere; adică conține „#” și este shorthand (de exemplu, # 333) și înlocuiește „#” cu un caracter gol. Apoi verifică dacă lungimea este acum 3 și o extinde la 6 caractere lungime (de exemplu, # 123 = # 112233).

Acum definim două funcții care pot converti hex-ul în rgb și invers. Iată defalcarea pas cu pas pentru hexToRgb (Acest cod este extins pentru a explica mai bine cum funcționează procesul):

  1. Definiți un tablou gol pentru a stoca rezultatul.
  2. Înlocuiți simbolul „#”, dacă există, și dacă lungimea nu este egală cu 6 (adică versiunea shorthand), apelați funcția de modificare de mai sus și extindeți-o.
  3. Într-un mod foarte de bază, hex în rgb funcționează transformând codul hex (în baza 16) în cod rgb (în baza 10). Fiecare două caractere din codul hex reprezintă o valoare în codul de culoare rgb. Pentru exemplul din #aabbcc, roșu este (aa până la baza 10), verde este (bb până la baza 10) și albastru este (cc până la baza 10). Așadar, în funcție, tăiem valoarea hexagonală, o transformăm în baza 10 folosind parseInt și apoi o stocăm în tabloul definit.
  4. În cele din urmă, revenim șirul de ieșire.

Pentru funcția rgbToHex (aceasta este scrisă cu logică mai scurtă):

  1. Folosim direct un regex pentru a extrage părțile din paranteză - adică rgb (123,21,24) va returna 123,21,24.
  2. În continuare, utilizăm o funcție de hartă pentru a returna un nou tablou, care convertește numărul în baza 16, apoi umple valoarea.

Permiteți-mi să explic această parte. Când folosim regex pentru a potrivi părțile din paranteze, returnăm datele de tip „șir”. Pentru a o transforma în Baza 16, trebuie să utilizăm metoda toString, cu un parametru „16”.

Acum, metoda toString este aplicabilă numai tipurilor de date numerice, așa că folosim parseInt pentru a converti mai întâi fiecare element al tabloului într-un număr, apoi folosiți toString (16) pentru a-l converti în formă hexadecimală, apoi adăugați în cele din urmă căptușirea pentru a face exact 2 personaje lungi. Căptușirea este necesară, dacă aveți ceva de genul „14”, pe care doriți să-l convertiți în hexadecimal, se va întoarce „e”. Însă codul color hex are nevoie de 2 caractere pentru fiecare parte, astfel că este necesară umplerea, ceea ce o face „0e”.

Notă: padStart este o caracteristică ES8, care este posibil să nu fie acceptată în fiecare browser. Pentru a păstra acest tutorial simplu, nu l-am transpilat în ES5.

3. În sfârșit, revenim matricea rezultată prin alăturarea acesteia și transformarea acesteia în majuscule.

Această funcție este folosită pentru a adăuga acel mic semn de eroare pe partea dreaptă a intrării, în cazul în care tipul de intrare introdus este greșit.

Pur și simplu rulează conținutul intrării (hex.value și rgb.value) prin funcțiile lor de verificare respective și folosește booleanul returnat pentru a adăuga / elimina clasa .hidden.

Acum definim o funcție care ia culoarea de fundal și apoi determină dacă este întunecată sau luminoasă (am primit acest cod de la StackOverflow). Înmulțește valorile de culoare individuale cu unele numere calculate și returnează „negru” sau „alb”. Apoi folosesc o altă funcție pentru a schimba culoarea textului adăugând / eliminând clasa .dark.

Adăugarea ascultătorilor de evenimente:

În cele din urmă, vom folosi toate funcțiile de mai sus adăugând ascultători de evenimente.

În primul rând, adăugăm un eveniment de tip keyup la intrarea în hex. Acest eveniment este declanșat de fiecare dată când este eliberată o cheie. Iată ce funcție îndeplinește:

  1. Verificăm dacă codul de intrare este valid și îl extindem dacă este o scurtătură.
  2. Setăm culoarea de fundal a corpului la valoarea de intrare.
  3. Verificăm dacă culoarea este luminoasă / întunecată și schimbăm culoarea textului în consecință.
  4. În cele din urmă, apelăm la funcția de conversie și apoi introducem culoarea convertită în intrarea RGB.

Celălalt ascultător de eveniment pe care l-am folosit este estomparea. Se declanșează de fiecare dată când intrarea pierde „focalizarea” sau, în termeni laici, de fiecare dată când faceți clic / atingeți în afara elementului de intrare, se declanșează încețoșarea. Deci este bine să modificați hex-ul de intrare!

Așadar, verificăm dacă culoarea hexagonală este valabilă sau nu, apoi o extindem dacă este scurtă, iar în final adăugăm un „#” dacă nu există. Rețineți că verificăm dacă indexul 0 și 1 conțin „#”. Acest lucru se face astfel încât funcția să nu preplenească „#” de două ori.

Acum adăugăm același ascultător de evenimente de tip keyup la intrarea rgb și, de asemenea, urmează aceeași serie de pași ca ascultătorul de evenimente hex.

În cele din urmă, adăugăm o cheie pentru ascultătorul de evenimente la întregul document, adică va fi declanșat pentru oricare dintre cele două elemente de intrare. În interiorul acesteia, apelăm la funcția errorMark, care adaugă pictograma de eroare, în cazul în care există o eroare sau o elimină dacă totul este valabil.

Iată codul final pentru app.js:

Concluzie

Acolo o ai! Știu că codul nu este perfect și poate fi refactorat, dar hei, acesta este doar începutul. Dacă doriți să îmbunătățiți acest cod, puteți să mergeți înainte și să deschideți un PR pe github repo.

Codificare fericită!