Bu yazımda yeni bir Javascript RGB Color Picker uygulaması yapacağız. Yapacağımız uygulamanın temel mantıkını anlatmak gerekirse bildiğiniz üzere RGB ile renk tanımlarken ne kadar kırmızı, ne kadar yeşil ve ne kadar mavi renklerinin karıştırıldığını 0 ile 255 arasında belirliyoruz.

Tasarımımız da 3 adet range tipinde input olucak bunlar kırmızı, yeşil ve mavi renklerinin ne kadar yoğun olduklarını temsil edicekler. Bunlar oynatıldıkça rengin değişimini göreceğiz. Yapıcağımız uygulamanın nasıl göründüğünden bahsetmek gerekirse

Tasarımsal kısımların nasıl yapılacağı size kalmış bu yüzden sadece Javascript kısmından bahsedeceğim.

Javascript kısmında bazı kısımların anlaşılması için yaptığım tasarımla ilgili şu bilgileri vermem gerekiyor.

range tipli inputların idleri red, green ve blue ve en altta elde ettiğimiz rengi gösteren alanının id si display’dir.

Javascript

var input = document.querySelectorAll(“input”);

for(var i=0;i<input.length;i++){

input[i].addEventListener(“input”,function(){

var red = document.getElementById(“red”).value;

var green = document.getElementById(“green”).value;

var blue = document.getElementById(“blue”).value;

});

var display = document.getElementById(“display”);

display.style.background = “rgb(“+ red +”, “+ green +”, “+ blue +”)”;

}

Şimdi bu kodların teker teker ne işe yaradıklarından bahsedeyim.

var input = document.querySelectorAll(“input”);

querySelectorAll fonksiyonu içinde belirttiğimiz elementten kaç tane varsa hepsini bir bize dizi olarak döndürecektir. querySelectorAll ile ilgili daha detaylı bilgi almak için Javascript DOM Element İşlemleri yazısına gidebilirsiniz.

for(var i=0; i<input.length; i++){

//kodlar

}

Bu döngü querySelectorAll ile döndürmüş olduğumuz dizinin tüm elemanlara ulaşmamızı sağlayacak.

input[i].addEventListener(“input”,function(){

var red = document.getElementById(“red”).value;

var green = document.getElementById(“green”).value;

var blue = document.getElementById(“blue”).value;

var display = document.getElementById(“display”);

display.style.background = “rgb(“+ red +”, “+ green +”, “+ blue +”)”;

});

Şimdi burada öncelikle idsi red, green ve blue olan inputların değerlerini aldık daha sonra display adında bir değişken oluşturarak bize id’si display olan elementi döndürüyor.

display.style.background = “rgba(“+ red +”,”+ green +”,”+ blue +”)”;

Bu kod ise display değişkeni ile seçtiğimiz elementin stil özelliklerinden background özelliğini red, green ve blue inputlarının değerlerine eşitliyoruz ve bize o anda seçilen renkleri veriyor.

Düşüncede karmaşık bir uygulama olarak gözükse bile aslında sadece bir rengin nasıl rgb olarak yazıldığını bilmemiz yetiyor.

Bu yazımda RGB Color Picker uygulaması yaptık ve yazdığımız kodların ne işe yaradıklarını açıkladım. Bu yazımı beğendiyseniz ve Javascript hakkında yazmış olduğum yazıları merak ediyorsanız buraya tıklayabilirsiniz.