Web · 9-A 35 dk · 7 adım

Piksel Sanat Tuvali

16×16 karelik bir tuval: tıkladığın kare seçili renge boyanıyor. Döngüyle 256 kutu üretmek, olay dinlemek ve CSS grid tek uygulamada.

yapanlar: 9-A, birlikte

Canlı Kod'da aç 0% · 0/7 adım

adımlar yaptıkça işaretle · işaret bu tarayıcıda kalır

1 Başlangıçta boş bir #tuval ve altında 6 renkli .renk kutusu var; CSS grid 16 sütun olarak hazır.

2 JS'te for döngüsüyle 256 tane div üret, hepsine "kare" sınıfı ver ve tuvale ekle:

adım 2 js

1for (let i = 0; i < 256; i++) {2  const k = document.createElement("div");3  k.className = "kare";4  tuval.appendChild(k);5}

3 Döngü sınırını 255 ve 257 yaparak dene: bir kare eksik ya da fazla — off-by-one işte bu.
4 let secili = "#22d3ee" tut; renk kutularına tıklanınca secili o kutunun data-renk değeri olsun.
5 Her kareye click olayı bağla: k.style.background = secili.
6 Sağ tık silsin: contextmenu olayında e.preventDefault() ve arka planı boşalt.
7 Bonus: fareyi basılı tutup sürükleyince boyasın (mousedown / mouseover / mouseup).

bitince şunlar çalışmalı

ne öğrendik

İşaret bu tarayıcıda kalır. XP için giriş yap — her uygulama +10 XP.