Eintauchen in JavaScript: So erstellen Sie einen Hex2RGB-Farbkonverter

Foto von Fotis Fotopoulos auf Unsplash

In diesem Artikel erstellen wir eine Web-App, die Farbcodes zwischen Hexadezimal und RGB konvertiert.

Eine Demo und den Quellcode finden Sie hier.

Projektstruktur:

Die Projektstruktur ist ziemlich einfach.

  1. index.html: Enthält die Struktur der App.
  2. style.css: Formatiert die Seite.
  3. app.js: Enthält den gesamten Code, der zum Ausführen des Projekts erforderlich ist.

Idee:

Hier ist die Liste der Dinge, die diese App ausführen soll:

  1. Wann immer etwas in ein Textfeld für hex eingegeben wird, sollte die App prüfen, ob die Farbe gültig ist. Wenn dies der Fall ist, konvertieren Sie es in RGB, legen Sie es als Hintergrund fest und geben Sie den RGB-Wert in das RGB-Textfeld ein und umgekehrt.
  2. Wenn ein kurzer hexadezimaler Farbcode in das Textfeld eingegeben wird, erweitern Sie ihn, wenn das Textfeld den Fokus verliert (Benutzer klickt außerhalb des Textbereichs).
  3. Stellen Sie dem Hex-Eingang automatisch das Symbol "#" voran.

Lass uns anfangen!

index.html

Ich habe zwei Textfelder mit den IDs "hex" und "rgb" erstellt. Daneben gibt es jeweils ein SVG-Symbol für Fehler, das standardmäßig eine Klasse von versteckten hat.

style.css

Hier ist ein grundlegendes Layout, mit dem das Markup ein bisschen besser aussehen soll. Ich definiere hier zwei Klassen, .hidden und .dark. Das erste dient zum Ausblenden / Anzeigen des Fehler-SVG-Symbols und das zweite zum Ändern der Textfarbe basierend auf der Hintergrundfarbe. Standardmäßig habe ich den Text auf eine dunkle Farbe eingestellt (für helle Hintergründe).

app.js

Hier ist der magische Teil. Ich werde den Code in Teile zerlegen:

Zunächst definieren wir Variablen, die auf die Eingaben mit der ID "hex" und "rgb" abzielen. Als nächstes haben wir Funktionen, um zu überprüfen, ob der Eingang Hex / RGB gültig ist oder nicht. Sie verwenden ein grundlegendes Regex-Setup und geben einen Booleschen Wert zurück. Wenn Sie sich von ihnen einschüchtern lassen, empfehle ich Ihnen, dieses RegexTutorial auszuprobieren.

Hier habe ich eine Analysefunktion namens modifyHex erstellt, die überprüft, ob das eingegebene Hex 4 Zeichen lang ist. Das heißt, enthält "#" und ist eine Abkürzung (z. B. "333") und ersetzt das "#" durch ein leeres Zeichen. Anschließend wird überprüft, ob die Länge jetzt 3 ist, und auf 6 Zeichen erweitert (z. B. # 123 = # 112233).

Jetzt definieren wir zwei Funktionen, die hexadezimal in rgb konvertieren können und umgekehrt. Hier ist die schrittweise Aufschlüsselung für hexToRgb (Dieser Code wurde erweitert, um die Funktionsweise des Prozesses besser zu erläutern):

  1. Definieren Sie ein leeres Array, um das Ergebnis zu speichern.
  2. Ersetzen Sie das '#'-Symbol, falls vorhanden, und wenn die Länge ungleich 6 ist (dh die Kurzversion), rufen Sie die obige modifyHex-Funktion auf und erweitern Sie sie.
  3. In sehr einfacher Weise funktioniert hex in rgb, indem der Hex-Code (in Basis 16) in rgb-Code (in Basis 10) konvertiert wird. Jeweils zwei Zeichen im Hex-Code stehen für einen Wert im RGB-Farbcode. Zum Beispiel ist in #aabbcc Rot (aa bis zur Basis 10), Grün (bb bis zur Basis 10) und Blau (cc bis zur Basis 10). In der Funktion schneiden wir also den Hex-Wert, konvertieren ihn mit parseInt zur Basis 10 und speichern ihn dann im definierten Array.
  4. Schließlich geben wir die Ausgabezeichenfolge zurück.

Für die Funktion rgbToHex (dies wird mit kürzerer Logik geschrieben):

  1. Wir verwenden direkt einen regulären Ausdruck, um die Teile in der Klammer zu extrahieren - das heißt, rgb (123,21,24) gibt 123,21,24 zurück.
  2. Als Nächstes verwenden wir eine Map-Funktion, um ein neues Array zurückzugeben, das die Zahl in Basis 16 umwandelt und dann den Wert auffüllt.

Lassen Sie mich diesen Teil erklären. Wenn wir Regex verwenden, um die Teile in Klammern abzugleichen, geben wir Daten vom Typ "Zeichenfolge" zurück. Um es in Base 16 zu konvertieren, müssen wir die toString-Methode mit dem Parameter "16" verwenden.

Die toString-Methode kann nur auf numerische Datentypen angewendet werden. Daher konvertieren wir mit parseInt zunächst jedes Element des Arrays in eine Zahl. Anschließend konvertieren wir es mit toString (16) in eine hexadezimale Form und fügen schließlich Auffüllungen hinzu, um genau 2 zu erhalten Zeichen lang. Das Auffüllen ist erforderlich, wenn Sie etwas wie "14" haben, das Sie in Hexadezimal umwandeln möchten, wird "e" zurückgegeben. Da der hexadezimale Farbcode jedoch 2 Zeichen für jedes Teil benötigt, ist ein Auffüllen erforderlich, sodass der Wert "0e" lautet.

Hinweis: padStart ist eine ES8-Funktion, die möglicherweise nicht in allen Browsern unterstützt wird. Um dieses Tutorial einfach zu halten, habe ich es nicht auf ES5 übertragen.

3. Schließlich geben wir das resultierende Array zurück, indem wir es verbinden und in Großbuchstaben konvertieren.

Diese Funktion wird verwendet, um diese kleine Fehlermarkierung auf der rechten Seite der Eingabe hinzuzufügen, falls der eingegebene Eingabetyp falsch ist.

Es führt einfach den Inhalt der Eingabe (hex.value und rgb.value) durch die jeweiligen Prüffunktionen und verwendet den zurückgegebenen Booleschen Wert, um die versteckte Klasse hinzuzufügen / zu entfernen.

Jetzt definieren wir eine Funktion, die die Hintergrundfarbe übernimmt und dann feststellt, ob es dunkel oder hell ist (ich habe diesen Code von StackOverflow erhalten). Es multipliziert die einzelnen Farbwerte mit einigen berechneten Zahlen und gibt "Schwarz" oder "Weiß" zurück. Ich benutze dann eine andere Funktion, um die Textfarbe zu ändern, indem ich die .dark-Klasse hinzufüge / entferne.

Hinzufügen von Ereignislistenern:

Zum Schluss werden wir alle oben genannten Funktionen nutzen, indem wir Event Listener hinzufügen.

Zunächst fügen wir der Hex-Eingabe ein Keyup-Ereignis hinzu. Dieses Ereignis wird jedes Mal ausgelöst, wenn eine Taste losgelassen wird. Hier ist, was die Funktion tut:

  1. Wir prüfen, ob der eingegebene Code gültig ist, und erweitern ihn, falls er eine Kurzform ist.
  2. Wir setzen die Hintergrundfarbe des Körpers auf den Eingabewert.
  3. Wir prüfen, ob die Farbe hell / dunkel ist und ändern die Textfarbe entsprechend.
  4. Schließlich rufen wir die Konvertierungsfunktion auf und setzen die konvertierte Farbe in den RGB-Eingang.

Der andere Ereignis-Listener, den wir verwendet haben, ist "Blur". Es wird jedes Mal ausgelöst, wenn die Eingabe den Fokus verliert, oder in Laienform, jedes Mal, wenn Sie außerhalb des Eingabeelements klicken / tippen, wird Unschärfe ausgelöst. Es ist also gut, das Eingabefeld zu ändern!

Wir prüfen also, ob die hexadezimale Farbe gültig ist oder nicht, erweitern sie, wenn sie kurz ist, und fügen schließlich ein "#" hinzu, wenn sie nicht vorhanden ist. Beachten Sie, dass wir prüfen, ob Index 0 und 1 "#" enthalten. Dies geschieht, damit die Funktion nicht zweimal vor "#" steht.

Jetzt fügen wir dem rgb-Eingang denselben Keyup-Ereignis-Listener hinzu, und auch dieser folgt der gleichen Reihe von Schritten wie der Hex-Ereignis-Listener.

Zuletzt fügen wir dem gesamten Dokument ein Ereignis-Listener-Keyup hinzu, das heißt, es wird für eines der beiden Eingabeelemente ausgelöst. Darin rufen wir die errorMark-Funktion auf, die das Fehlersymbol hinzufügt, falls ein Fehler vorliegt, oder es entfernt, wenn alles gültig ist.

Hier ist der endgültige Code für app.js:

Fazit

Hier hast du es! Ich weiß, dass der Code nicht perfekt ist und überarbeitet werden kann, aber hey, das ist erst der Anfang. Wenn Sie diesen Code verbessern möchten, können Sie einen PR auf meinem Github-Repo eröffnen.

Viel Spaß beim Codieren!