Zaronite u JavaScript: Kako stvoriti Hex2RGB Converter u boji

Fotografiju Fotisa Fotopoulosa na Unsplash-u

U ovom ćemo članku izraditi web-aplikaciju koja pretvara kodove boja u heksadecimalni i RGB.

Demo možete pronaći ovdje, a izvorni kod ovdje.

Struktura projekta:

Struktura projekta prilično je jednostavna.

  1. index.html: Sadrži strukturu aplikacije.
  2. style.css: Stilizira stranicu.
  3. app.js: Sadrži sav kôd potreban za pokretanje projekta.

Ideja:

Evo popisa koji sam želio da ova aplikacija izvede:

  1. Kad god se nešto upiše u tekstno polje za hex, aplikacija treba provjeriti je li boja valjana. Ako jest, pretvorite ga u RGB, postavite ga kao pozadinu, a zatim stavite RGB vrijednost u tekstualno polje RGB i obrnuto.
  2. Ako se u polje teksta unese kratki šesterokutni kod boje, proširite ga kada tekstualno polje izgubi fokus (korisnik klikne izvan područja teksta).
  3. Automatski dodaj simbol "#" na šesterokutni ulaz.

Započnimo!

index.html

Napravio sam dva tekstualna polja s ID-jevima 'hex' i 'rgb'. Pored svake je SVG ikona za grešku koja prema zadanom ima klasu skrivene.

style.css

Slijedi osnovni izgled kako bi oznaka izgledala malo bolje. Ovdje definiram dvije klase, .hidden i .dark. Prva se koristi za skrivanje / prikazivanje SVG ikone za pogrešku, a druga za promjenu boje teksta na temelju boje pozadine. Po zadanom sam tekst postavio u tamnu boju (za svijetle pozadine).

app.js

Evo magičnog dijela. Raščlanit ću kôd na komade:

Prvo definiramo varijable koje ciljaju ulaze s id 'hex' i 'rgb'. Dalje, imamo funkcije za provjeru je li ulazni Hex / RGB valjan ili ne. Koriste osnovnu postavku regularnih izraza i vraćaju logičku vezu. Ako vas oni zastraše, preporučujem vam da isprobate ovaj RegexTutorial.

Ovdje sam napravio funkciju raščlanjivanja nazvanu modifyHex koja provjerava je li ulazna heksa duljina 4 znaka; to jest, sadrži "#" i kratica je (na primjer, # 333) i zamijeni znak "#" s praznim znakom. Zatim provjerava je li duljina sada 3 i proširuje je na 6 znakova (na primjer, # 123 = # 112233).

Sada definiramo dvije funkcije koje mogu pretvarati hex u rgb i obrnuto. Evo korak po korak za hexToRgb (ovaj se kôd proširuje radi boljeg objašnjenja procesa):

  1. Odredite prazan niz za pohranjivanje rezultata.
  2. Zamijenite simbol "#", ako postoji, a ako duljina nije jednaka 6 (to jest, skraćena verzija), nazovite gornju funkciju izmijeniHex i proširite je.
  3. Na vrlo osnovni način, hex u rgb djeluje pretvaranjem hex koda (u bazi 16) u rgb kod (u bazi 10). Svaka dva znaka u heks kôdu predstavljaju vrijednost u rgb kodu boja. Na primjer, u #aabbcc, crvena je (aa do baza 10), zelena je (bb do baze 10), a plava je (cc prema bazi 10). Dakle, u funkciji režemo heks-vrijednost, pretvaramo je u bazu 10 pomoću parseInt-a i pohranjujemo je u definirani niz.
  4. Napokon vraćamo izlazni niz.

Za funkciju rgbToHex (ovo je napisano kraćom logikom):

  1. Regex izravno koristimo za izvlačenje dijelova unutar zagrade - to jest, rgb (123,21,24) će vratiti 123,21,24.
  2. Zatim koristimo funkciju karte da vratimo novi niz koji pretvara broj u bazu 16, a zatim podnosi vrijednost.

Dopustite mi da objasnim ovaj dio. Kad pomoću regexa odgovaramo dijelovima unutar zagrada, vraćamo podatke tipa "string". Da bismo ga pretvorili u bazu 16, moramo koristiti toString metodu, s parametrom "16".

Sada je metoda toString primjenjiva samo na numeričke tipove podataka, pa koristimo parseInt da prvo pretvorimo svaki element matrice u broj, a zatim ga pomoću toString (16) pretvorimo u šesnaestorski oblik, a zatim na kraju dodamo padding da ga napravimo točno 2 znakova dugo. Padding je neophodan, a ako imate nešto poput "14", koje želite pretvoriti u heksadecimalno, vratit će se "e". Ali šesterokutni kôd boje treba dva znaka za svaki dio, tako da je potrebno oblaganje, što znači da je "0e".

Napomena: padStart je značajka ES8 koja možda nije podržana u svakom pregledniku. Da bi ovaj vodič bio jednostavan, nisam ga pretočio u ES5.

3. Na kraju, dobiveni niz vraćamo pridružujući ga i pretvarajući ga u velika slova.

Ova se funkcija koristi za dodavanje te male oznake pogreške na desnoj strani unosa, u slučaju da unesena vrsta unosa nije u redu.

Jednostavno pokreće sadržaj unosa (hex.value i rgb.value) kroz njihove odgovarajuće funkcije provjere i koristi vraćeni boolean za dodavanje / uklanjanje .hidden klase.

Sada definiramo funkciju koja uzima boju pozadine i zatim određuje je li tamna ili svijetla (ovaj sam kod dobio od StackOverflow). Umnožava pojedinačne vrijednosti boje s nekim izračunatim brojevima i vraća 'crnu' ili 'bijelu'. Zatim koristim drugu funkciju za promjenu boje teksta dodavanjem / uklanjanjem .dark klase.

Dodavanje slušatelja događaja:

Napokon, koristit ćemo sve gore navedene funkcije dodavanjem Slušatelja događaja.

Prvo, mi dodamo događaj tipkovnice hex ulazu. Ovaj se događaj pokreće svaki put kada se izda ključ. Evo što funkcija radi:

  1. Provjeravamo je li ulazni kôd važeći i proširujemo ga ako je skraćenica.
  2. Postavljamo boju pozadine tijela na ulaznu vrijednost.
  3. Provjeravamo je li boja svijetla / tamna i u skladu s tim mijenjamo boju teksta.
  4. Konačno, zovemo funkciju pretvorbe i zatim stavljamo pretvorenu boju u RGB ulaz.

Drugi slušatelj događaja kojeg smo koristili je zamagljivanje. Aktivira se svaki put kada ulaz izgubi fokus, ili, laički rečeno, svaki put kada kliknete / dodirnete izvan ulaznog elementa, aktivira se zamućenje. Tako da je dobro izmijeniti ulazni hex!

Provjeravamo je li šesterokutna boja valjana ili ne, zatim je proširujemo ako je kratka i na kraju dodajemo znak "#" ako ne postoji. Imajte na umu da provjeravamo sadrži li indeks 0 i 1 "#". To je učinjeno tako da funkcija ne bude "#" dvaput.

Sada u rgb ulaz dodamo istog slušatelja događaja tipkovnice i on također slijedi isti niz koraka kao i hex slušatelj događaja.

Konačno, cijelom dokumentu dodajemo tipkovnu slušateljicu događaja, odnosno aktivirat će se za bilo koji od dva ulazna elementa. Unutar njega zovemo funkciju errorMark koja dodaje ikonu pogreške, u slučaju da postoji greška ili je uklanja ako je sve točno.

Evo konačnog koda za app.js:

Zaključak

Eno ga! Znam da kôd nije savršen i da ga mogu obnoviti, ali hej, ovo je tek početak. Ako želite poboljšati ovaj kôd, nastavite i otvorite PR na mom github repo-u.

Sretno kodiranje!