Hücreleri Farklı Renklere Boyama
Bir sonraki mantıklı adım, hücrelerimizi rastgele renklere boyamak olacaktır. Problem koşuluna göre sınırlı bir renk setimiz var, diyelim ki üç tane: kırmızı, yeşil, mavi.
Düşünürsek, bu renkleri CSS sınıfları olarak yapmak uygundur. Bu sınıfları tablomuzun hücrelerine vereceğiz. Onları oluşturalım:
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
JavaScript kodunda sınıflarımızı bir dizide toplamak uygundur:
let colors = ['red', 'green', 'blue'];
Böyle bir diziye sahip olarak, görevimizi çözebiliriz: bir hücre oluşturulduğu anda, dizimizden rastgele seçerek ona bir CSS atayacağız.
Bunun için, parametre olarak bir dizi alan ve onun rastgele bir elemanını döndüren yardımcı bir fonksiyon yapmak daha iyidir.
Açıklanan fonksiyonu uygulayın. Çalışmasını test edin.
Oluşturduğunuz fonksiyonu kullanarak, tablo oluşturulurken hücrelerin rastgele renklere boyanmasını sağlayın.