Meydan okuma - DOM uygulaması
querySelector, createElement ve olaylar ile bir not kartları panosu yazarsın.
Not kartları panosu
Bu meydan okumada bir not kartları panosu yazacaksın. Önce querySelector ile pano öğesini seçersin.
Yeni not eklemek için document.createElement ile bir article oluşturursun ve appendChild ile panoya bağlarsın.
Silme için her karta ayrı dinleyici yerine olay yetkilendirmesi kullanırsın: dinleyici panoda kalır, event.target.closest('article') ile tıklanan kart bulunur. Böylece sonradan eklenen kartlar da otomatik çalışır.
Olay yetkilendirmesi kalıbı
Olay yetkilendirmesi tek dinleyici ile pek çok çocuğu yönetir. Dinleyici board kapsayıcısına eklenir; her kart için ayrı dinleyici kurulmaz.
Tıklama geldiğinde event.target.closest('.note') çağrılır. Bu, tıklanan öğeden başlayıp yukarı doğru arar ve ilk eşleşen .note kartını döndürür. Kart dışında bir yere tıklandıysa null döner.
Boş değilse kartı remove() ile silersin. Bu kalıp sonradan eklenen kartları da otomatik yakalar.
Uygulama addNote fonksiyonunu yaz
addNote(text) fonksiyonunu yaz. querySelector('.board') ile panoyu seç, createElement('article') ile yeni kart oluştur, textContent'e metni ata, kartın sınıfına note ekle ve appendChild ile panoya bağla.
Örnek çözümü göster
addNote(text) aç. İçinde querySelector('.board') ile panoyu seç, createElement('article') ile kart oluştur, textContent'e text ata, classList.add('note') yap, appendChild ile panoya ekle.
Örnek çözüm:
function addNote(text) {
const board = document.querySelector('.board');
const card = document.createElement('article');
card.textContent = text;
card.classList.add('note');
board.appendChild(card);
}Kendini test et
-
Olay yetkilendirmesinde dinleyici nereye eklenir?
- Tüm kartları saran tek kapsayıcıya
- Her ayrı karta ayrı ayrı
- Yalnızca ilk karta
- document.body öğesine
Cevabı göster
Tüm kartları saran tek kapsayıcıya — Doğru. Dinleyici kapsayıcıdadır; closest() ile tıklanan çocuk bulunur.
-
Kart oluştur ve panoya ekle
const card = document.____; card.textContent = text; board.appendChild(card);Cevabı göster
const card = document.createElement('article'); card.textContent = text; board.appendChild(card);