JavaScript'e Dalış: Hex2RGB Color Converter Nasıl Oluşturulur

Fotoğraf Fotis Fotopoulos Unsplash'ta

Bu yazıda, Onaltılık ve RGB arasında renk kodlarını dönüştüren bir web uygulaması oluşturacağız.

Burada bir demo ve kaynak kodunu burada bulabilirsiniz.

Proje Yapısı:

Proje yapısı oldukça basittir.

  1. index.html: Uygulamanın yapısını içerir.
  2. style.css: Sayfayı stillendirir.
  3. app.js: Projeyi çalıştırmak için gereken tüm kodu içerir.

Fikir:

İşte bu uygulamanın gerçekleştirmesini istediğim şeylerin listesi:

  1. Onaltılık metin alanına bir şey yazıldığında, uygulamanın rengin geçerli olup olmadığını kontrol etmesi gerekir. Öyleyse, onu RGB'ye dönüştürün, arka plan olarak ayarlayın ve sonra RGB değerini RGB metin alanına koyun ve bunun tersi de geçerlidir.
  2. Metin alanına kısa bir altıgen renk kodu girilirse, metin alanı odağını kaybettiğinde genişletin (kullanıcı metin alanının dışına tıklar).
  3. ‘#’ Sembolünü otomatik olarak hex girişine hazırlayın.

Hadi başlayalım!

index.html

Sırasıyla "hex" ve "rgb" kimlikleri olan iki metin alanı oluşturdum. Her birinin yanında, varsayılan olarak gizli bir sınıfı olan hatanın bir svg simgesi vardır.

style.css

İşaretlemenin biraz daha iyi görünmesini sağlayan temel bir düzen. Burada iki sınıf tanımlıyorum, .hidden ve .dark. Bunlardan ilki, SVG ikonu hatasını gizlemek / göstermek ve arka plan rengini temel alarak metin rengini değiştirmek için kullanılır. Varsayılan olarak, metni koyu bir renge ayarladım (parlak arka planlar için).

app.js

İşte sihirli kısım. Kodu parçalara ayıracağım:

İlk olarak, girişleri ‘hex’ ve ‘rgb’ ile hedefleyen değişkenler tanımlıyoruz. Daha sonra, Hex / RGB girişinin geçerli olup olmadığını kontrol etmek için fonksiyonlarımız var. Temel bir regex kurulumu kullanıyorlar ve bir boolean döndürüyorlar. Onlardan korkarsanız, bu RegexTutorial'ı denemenizi tavsiye ederim.

Burada, hex parametresinin 4 karakter uzunluğunda olup olmadığını kontrol eden changeHex adında bir ayrıştırma işlevi yaptım; yani, ‘#’ içerir ve stenodir (örneğin, # 333) ve ‘#’ yi boş bir karakterle değiştirir. Sonra uzunluğu şimdi 3 olup olmadığını kontrol eder ve onu 6 karakter uzunluğunda genişletir (örneğin, # 123 = # 112233).

Şimdi hex 'yi rgb' ye dönüştürebilecek iki fonksiyon tanımlıyoruz. İşte hexToRgb için adım adım dökümü (Bu kod işlemin nasıl çalıştığını daha iyi açıklamak için genişletilmiştir):

  1. Sonucu saklamak için boş bir dizi tanımlayın.
  2. Varsa, ‘#’ sembolünü değiştirin ve uzunluk 6’ya eşit değilse (kısa yollu sürüm ise), yukarıdaki configureHex işlevini çağırın ve genişletin.
  3. Çok basit bir şekilde, hex'den rgb'ye, hex kodunu (16 tabanındaki) rgb koduna (10 tabanındaki) dönüştürerek çalışır. Onaltılı koddaki her iki karakter, rgb renk kodundaki bir değeri temsil eder. #Aabbcc'deki Örnek için, kırmızı (aa ila 10 taban), yeşil (bb ila 10 taban) ve mavi (9 ila cc taban 10). Böylece, fonksiyonda, hex değerini kesiyoruz, parseInt kullanarak taban 10'a dönüştürüyoruz ve ardından tanımlanmış dizide saklıyoruz.
  4. Sonunda çıktı dizisini döndürüyoruz.

RgbToHex işlevi için (bu daha kısa mantıkla yazılmıştır):

  1. Parantez içindeki parçaları çıkarmak için doğrudan bir regex kullanıyoruz - yani, rgb (123,21,24), 123,21,24 döndürür.
  2. Ardından, sayıyı 16 tabanına dönüştüren yeni bir dizi döndürmek için bir harita işlevi kullanıyoruz, ardından değeri dolduruyoruz.

Bu kısmı açıklayayım. Parantez içindeki parçaları eşleştirmek için regex kullandığımızda, 'string' türündeki verileri döndürürüz. Base 16'ya dönüştürmek için, toString yöntemini, '16' parametresiyle kullanmalıyız.

Şimdi, toString yöntemi yalnızca sayısal veri türlerine uygulanabilir, bu nedenle ilk önce dizinin her öğesini bir sayıya dönüştürmek için parseInt kullanıyoruz, sonra onu onaltılık forma dönüştürmek için toString (16) işlevini kullanıyoruz ve son olarak da tam olarak 2 yapmak için dolgu ekliyoruz karakter uzunluğu. Doldurma gereklidir, eğer onaltılığa dönüştürmek istediğiniz '14' gibi bir şey varsa, 'e' döndürür. Ancak onaltılık renk kodu her parça için 2 karaktere ihtiyaç duyar, bu nedenle '0e' yapan dolgu malzemesi gereklidir.

Not: padStart, her tarayıcıda desteklenmeyen bir ES8 özelliğidir. Bu dersi basit tutmak için ES5'e aktarmadım.

3. Son olarak, sonuç dizisini birleştirip büyük harfe dönüştürerek döndürüyoruz.

Bu fonksiyon, girilen giriş tipinin yanlış olması durumunda, girişin sağ tarafına küçük bir hata işareti eklemek için kullanılır.

Girişin içeriğini (hex.value ve rgb.value) ilgili kontrol işlevlerinden geçirir ve .hidden sınıfı eklemek / kaldırmak için döndürülen boolean'ı kullanır.

Şimdi arkaplan rengini alan ve karanlık mı yoksa parlak mı olduğunu belirleyen bir fonksiyon tanımlıyoruz (Bu kodu StackOverflow'tan aldım). Renk değerlerini hesaplanan bazı sayılarla çarpar ve “siyah” veya “beyaz” döndürür. Daha sonra .dark sınıfını ekleyerek / kaldırarak metin rengini değiştirmek için başka bir işlev kullanıyorum.

Etkinlik Dinleyicileri Ekleme:

Son olarak, yukarıdaki tüm fonksiyonları Etkinlik Dinleyicileri ekleyerek kullanacağız.

İlk olarak, hex girişine bir keyup olayı ekliyoruz. Bu olay, bir tuşa her basıldığında tetiklenir. İşte fonksiyonun yaptığı:

  1. Giriş kodunun geçerli olup olmadığını kontrol ediyoruz ve kısaltılmışsa genişletiyoruz.
  2. Vücudun arka plan rengini giriş değerine ayarlıyoruz.
  3. Rengin parlak / koyu olup olmadığını kontrol ediyoruz ve metin rengini buna göre değiştiriyoruz.
  4. Son olarak, convert işlevini çağırıyoruz ve ardından dönüştürülmüş rengi RGB girişine yerleştiriyoruz.

Kullandığımız diğer olay dinleyicisi bulanıklık. Giriş “odağı” her kaybettiğinde veya meslekten olmayan terimlerle, giriş öğesinin dışına her tıkladığınızda / tıkladığınızda, bulanıklık tetiklenir. Bu yüzden giriş hex'ini değiştirmek iyi olur!

Bu nedenle, onaltılık rengin geçerli olup olmadığını kontrol ederiz, sonra kısa ise genişleriz ve nihayet yoksa ‘#’ ekleriz. Dizin 0 ve 1'in '#' içerip içermediğini kontrol ettiğimizi unutmayın. Bu, işlevin iki kez "#" yapmaması için yapılır.

Şimdi aynı keyup olay dinleyicisini rgb girişine ekliyoruz ve onaltılık olay dinleyicisiyle aynı adımları izliyor.

Son olarak, tüm belgeye bir olay dinleyicisi anahtarı ekliyoruz, yani bu iki giriş öğesinden herhangi biri için tetiklenir. İçinde, hata olması durumunda hata simgesi ekleyen errorMark işlevini çağırıyoruz veya her şey geçerliyse kaldırıyor.

İşte app.js için son kod:

Sonuç

İşte aldın! Kodun mükemmel olmadığını ve yeniden canlandırılabileceğini biliyorum, ama hey, bu sadece başlangıç. Bu kodu geliştirmek istiyorsanız, devam edip github repo'mda bir PR açabilirsiniz.

Mutlu Kodlama!