Καταδύσεις σε JavaScript: Πώς να δημιουργήσετε μετατροπέα χρωμάτων Hex2RGB

Φωτογραφία του Φώτη Φωτόπουλου στο Unsplash

Σε αυτό το άρθρο, θα δημιουργήσουμε μια εφαρμογή ιστού που θα μετατρέπει τους κωδικούς χρώματος μεταξύ δεκαεξαδικού και RGB.

Μπορείτε να βρείτε ένα demo εδώ και τον πηγαίο κώδικα εδώ.

Δομή έργου:

Η διάρθρωση του έργου είναι πολύ απλή.

  1. index.html: Περιέχει τη δομή της εφαρμογής.
  2. style.css: Στυλ της σελίδας.
  3. app.js: Περιέχει όλο τον κώδικα που απαιτείται για την εκτέλεση του έργου.

Ιδέα:

Ακολουθεί η λίστα με τα πράγματα που ήθελα να εκτελέσει αυτή η εφαρμογή:

  1. Κάθε φορά που πληκτρολογείται κάτι σε ένα πεδίο κειμένου για hex, η εφαρμογή θα πρέπει να ελέγξει εάν το χρώμα είναι έγκυρο. Αν είναι, μετατρέψτε το σε RGB, ορίστε το ως φόντο και στη συνέχεια τοποθετήστε την τιμή RGB στο πεδίο κειμένου RGB και αντίστροφα.
  2. Αν πληκτρολογήσετε ένα σύντομο δεκαεξαδικό κωδικό χρώματος στο πεδίο κειμένου, επεκτείνετε το όταν το πεδίο κειμένου χάνει την εστίαση (ο χρήστης κάνει κλικ εκτός της περιοχής κειμένου).
  3. Προετοιμάστε αυτόματα το σύμβολο '#' στην είσοδο hex.

Ας ξεκινήσουμε!

index.html

Έχω δημιουργήσει δύο πεδία κειμένου με IDs του 'hex' και 'rgb' αντίστοιχα. Εκτός από το καθένα είναι ένα svg εικονίδιο για σφάλμα, το οποίο έχει μια κατηγορία κρυφών, από προεπιλογή.

style.css

Εδώ είναι μια βασική διάταξη για να κάνει το markup να φαίνεται λίγο καλύτερα. Ορίζω δύο κατηγορίες εδώ, .hidden και .dark. Το πρώτο χρησιμοποιείται για την απόκρυψη / εμφάνιση του εικονιδίου λάθους SVG και το τελευταίο για την αλλαγή του χρώματος κειμένου με βάση το χρώμα φόντου. Από προεπιλογή, έχω ρυθμίσει το κείμενο σε σκούρο χρώμα (για φωτεινά φόντα).

app.js

Εδώ είναι το μαγικό μέρος. Θα καταστρέψω τον κώδικα σε κομμάτια:

Πρώτον, ορίζουμε μεταβλητές που στοχεύουν τις εισόδους με id 'hex' και 'rgb'. Έπειτα, έχουμε λειτουργίες για να ελέγξουμε εάν η είσοδος Hex / RGB είναι έγκυρη ή όχι. Χρησιμοποιούν μια βασική ρύθμιση regex και επιστρέφουν ένα boolean. Αν τους προκαλέσετε εκφοβισμό, σας συνιστώ να δοκιμάσετε αυτό το RegexTutorial.

Εδώ, έχω κάνει μια συνάρτηση αναλύσεων που ονομάζεται modifyHex που ελέγχει αν το hex εισόδου έχει μήκος 4 χαρακτήρες. δηλαδή, περιέχει '#' και είναι συντομογραφία (για παράδειγμα, # 333) και αντικαθιστά το '#' με έναν κενό χαρακτήρα. Στη συνέχεια, ελέγχει αν το μήκος είναι τώρα 3 και το επεκτείνει σε 6 χαρακτήρες (για παράδειγμα # 123 = # 112233).

Τώρα ορίζουμε δύο λειτουργίες που μπορούν να μετατρέψουν το hex σε rgb και αντίστροφα. Ακολουθεί η βήμα προς βήμα ανάλυση για το hexToRgb (Ο κώδικας αυτός διευρύνεται για να εξηγήσει καλύτερα πώς λειτουργεί η διαδικασία):

  1. Ορίστε έναν κενό πίνακα για να αποθηκεύσετε το αποτέλεσμα.
  2. Αντικαταστήστε το σύμβολο "#", αν υπάρχει και εάν το μήκος δεν είναι ίσο με 6 (δηλαδή, την έκδοση στενογραφίας), καλέστε την παραπάνω λειτουργία modifyHex και αναπτύξτε την.
  3. Με έναν πολύ βασικό τρόπο, το hex to rgb λειτουργεί με τη μετατροπή του hex code (στη βάση 16) στον rgb κώδικα (στη βάση 10). Κάθε δύο χαρακτήρες στον δεκαεξαδικό κώδικα αντιπροσωπεύουν μια τιμή στον κωδικό χρώματος rgb. Για παράδειγμα στο # aabbcc, το κόκκινο είναι (aa στη βάση 10), το πράσινο είναι (bb στη βάση 10) και το μπλε είναι (cc στη βάση 10). Έτσι στη συνάρτηση, τεμαχίζουμε την hex τιμή, μετατρέπουμε την στη βάση 10 χρησιμοποιώντας parseInt, και στη συνέχεια την αποθηκεύουμε στον καθορισμένο πίνακα.
  4. Τέλος, επιστρέφουμε τη συμβολοσειρά εξόδου.

Για τη λειτουργία rgbToHex (αυτό γράφεται με βραχύτερη λογική):

  1. Χρησιμοποιούμε απευθείας ένα regex για να εξαγάγουμε τα τμήματα μέσα στην παρένθεση - δηλαδή, το rgb (123,21,24) θα επιστρέψει 123,21,24.
  2. Στη συνέχεια, χρησιμοποιούμε μια λειτουργία χάρτη για να επιστρέψουμε μια νέα συστοιχία, η οποία μετατρέπει τον αριθμό στη βάση 16, στη συνέχεια τοποθετεί την τιμή.

Επιτρέψτε μου να εξηγήσω αυτό το μέρος. Όταν χρησιμοποιούμε το regex για να ταιριάζει με τα τμήματα μέσα στις παρενθέσεις, επιστρέφουμε δεδομένα τύπου 'string'. Για να το μετατρέψουμε στη βάση 16, πρέπει να χρησιμοποιήσουμε τη μέθοδο toString, με μια παράμετρο '16'.

Τώρα, η μέθοδος toString εφαρμόζεται μόνο σε αριθμητικούς τύπους δεδομένων, οπότε χρησιμοποιούμε το parseInt για να μετατρέψουμε πρώτα κάθε στοιχείο του πίνακα σε έναν αριθμό, στη συνέχεια χρησιμοποιήστε το toString (16) για να το μετατρέψετε σε δεκαεξαδική μορφή και στη συνέχεια να προσθέσετε τελικά το padding για να το κάνετε ακριβώς 2 χαρακτήρες μακρύ. Το Padding είναι απαραίτητο, αν έχετε κάτι σαν '14', το οποίο θέλετε να μετατρέψετε σε δεκαεξαδικό, θα επιστρέψει 'e'. Αλλά ο κώδικας hex κώδικας χρειάζεται 2 χαρακτήρες για κάθε κομμάτι, οπότε απαιτείται συμπλήρωση, πράγμα που το κάνει '0e'.

Σημείωση: Το padStart είναι μια λειτουργία ES8, η οποία ενδέχεται να μην υποστηρίζεται σε κάθε πρόγραμμα περιήγησης. Για να διατηρήσω αυτό το σεμινάριο απλό, δεν το έχω μεταγλωττίσει στο ES5.

3. Τέλος, επιστρέφουμε την προκύπτουσα συστοιχία συνδέοντας την και μετατρέποντάς την σε κεφαλαία.

Αυτή η λειτουργία χρησιμοποιείται για την προσθήκη αυτού του μικρού σημείου σφάλματος στη δεξιά πλευρά της εισόδου, σε περίπτωση που ο εισαγόμενος τύπος εισόδου είναι λάθος.

Απλώς τρέχει τα περιεχόμενα της εισόδου (hex.value και rgb.value) μέσω των αντίστοιχων λειτουργιών ελέγχου και χρησιμοποιεί το return boolean για να προσθέσει / αφαιρέσει την κλάση .hidden.

Τώρα ορίζουμε μια συνάρτηση που παίρνει το χρώμα του φόντου και κατόπιν καθορίζει εάν είναι σκοτεινό ή φωτεινό (πήρα αυτόν τον κώδικα από το StackOverflow). Πολλαπλασιάζει τις μεμονωμένες τιμές χρώματος με ορισμένους υπολογιζόμενους αριθμούς και επιστρέφει «μαύρο» ή «λευκό». Στη συνέχεια, χρησιμοποιώ άλλη λειτουργία για να αλλάξω το χρώμα κειμένου προσθέτοντας / αφαιρώντας την κλάση .dark.

Προσθήκη ακροατών συμβάντων:

Τέλος, θα χρησιμοποιήσουμε όλες τις παραπάνω λειτουργίες προσθέτοντας ακροατές.

Πρώτον, προσθέτουμε ένα συμβάν keyup στην είσοδο hex. Αυτό το συμβάν ενεργοποιείται κάθε φορά που απελευθερώνεται ένα κλειδί. Ακολουθεί η λειτουργία:

  1. Ελέγουμε αν ο κωδικός εισόδου είναι έγκυρος και επεκτείνεται αν είναι στενογραφικό.
  2. Ρυθμίζουμε το χρώμα φόντου του σώματος στην τιμή εισαγωγής.
  3. Ελέγουμε εάν το χρώμα είναι φωτεινό / σκοτεινό και αλλάζει ανάλογα το χρώμα κειμένου.
  4. Τέλος, καλούμε τη συνάρτηση μετατροπής και στη συνέχεια βάζουμε το μετατρεπόμενο χρώμα στην είσοδο RGB.

Ο άλλος ακροατής που χρησιμοποιήσαμε είναι θολός. Αυτός ενεργοποιείται κάθε φορά που η είσοδος χάνει την εστίαση, ή σε απλούς όρους, κάθε φορά που κάνετε κλικ / χτυπήστε έξω από το στοιχείο εισόδου, ενεργοποιείται η θόλωση. Γι 'αυτό είναι καλό να τροποποιήσετε το hex εισόδου!

Επομένως, ελέγξαμε εάν το hex χρώμα είναι έγκυρο ή όχι, τότε το επεκτείνουμε αν είναι σύντομο και τελικά προσθέτουμε ένα '#' εάν δεν υπάρχει. Σημειώστε ότι ελέγχουμε αν το δείκτη 0 και 1 περιέχουν '#'. Αυτό γίνεται έτσι ώστε η λειτουργία να μην προετοιμάζει το '#' δύο φορές.

Τώρα προσθέτουμε τον ίδιο ακροατή συμβάντων πληκτρολογίου στην είσοδο rgb και ακολουθεί επίσης την ίδια σειρά βημάτων με τον ακροατή ακρόασης hex.

Τέλος, προσθέτουμε ένα πλήκτρο ακρόασης συμβάντος σε ολόκληρο το έγγραφο, δηλαδή θα ενεργοποιείται για οποιοδήποτε από τα δύο στοιχεία εισόδου. Μέσα σε αυτό, καλούμε τη λειτουργία errorMark, η οποία προσθέτει το εικονίδιο σφάλματος, σε περίπτωση που υπάρχει κάποιο σφάλμα ή την καταργεί αν όλα είναι έγκυρα.

Εδώ είναι ο τελικός κώδικας για app.js:

συμπέρασμα

Εκεί το έχετε! Ξέρω ότι ο κώδικας δεν είναι τέλειος και μπορεί να επαναπροσδιοριστεί, αλλά hey, αυτό είναι μόνο η αρχή. Εάν θέλετε να βελτιώσετε αυτόν τον κώδικα, μπορείτε να προχωρήσετε και να ανοίξετε ένα PR στο github repo μου.

Happy Coding!