Proje sonu - Todo DOM
To-do uygulamasını tamamlayıp arayüzü ve etkileşimleri çalışır hale getirirsin.
Proje sonu: son özellik
Uygulama artık görev ekliyor, tamamlıyor ve siliyor. Son özellik olarak bir "Tümünü tamamla" düğmesi ekleyeceğiz: tıklandığında tüm görevleri done sınıfı ile işaretleyecek.
Yeni bir button oluşturup app kapsayıcısına ekleyeceğiz. Tıklama dinleyicisinde for...of döngüsüyle list.children üzerinde dolaşıp her öğeye classList.add("done") uygulayacağız.
list.children canlı bir koleksiyondur; listeye eklenen her görev otomatik olarak burada görünür.
for...of ile dolaşmak
list.children bir HTMLCollection döndürür; for...of döngüsüyle her çocuğu sırayla alırız. for (const item of list.children) yazınca item her döngüde bir sonraki li olur.
Her item için item.classList.add("done") çağrısı yaparız. add, toggle'tan farklı olarak sınıf yoksa ekler, varsa hiçbir şey yapmaz.
Bu düğmeyi addButton'dan ayrı bir completeAllButton olarak tanımlayacağız.
Uygulama Tümünü tamamla düğmesini ekle
Önceki dersin çözümünün üzerine devam et. Yeni bir button oluştur, textContent'ini "Tümünü tamamla" yap ve app'e ekle. Tıklama dinleyicisinde for (const item of list.children) ile dolaş ve her item için item.classList.add("done") çağır.
Örnek çözümü göster
const completeAllButton = document.createElement('button') yaz, textContent ata, app.appendChild ile ekle. Sonra completeAllButton.addEventListener('click', function() { for (const item of list.children) { item.classList.add('done'); } }) ekle.
Örnek çözüm:
// Yapılacaklar uygulaması
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Yapılacaklar";
app.appendChild(title);
const input = document.createElement("input");
input.placeholder = "Yeni görev";
const addButton = document.createElement("button");
addButton.textContent = "Ekle";
const list = document.createElement("ul");
app.appendChild(input);
app.appendChild(addButton);
app.appendChild(list);
function addTask() {
const text = input.value;
if (text === "") return;
const item = document.createElement("li");
item.textContent = text;
list.appendChild(item);
input.value = "";
}
addButton.addEventListener("click", addTask);
list.addEventListener("click", function(event) {
const target = event.target;
if (target.tagName === "LI") {
target.classList.toggle("done");
}
});
list.addEventListener("dblclick", function(event) {
const target = event.target;
if (target.tagName === "LI") {
list.removeChild(target);
}
});
const completeAllButton = document.createElement("button");
completeAllButton.textContent = "Tümünü tamamla";
app.appendChild(completeAllButton);
completeAllButton.addEventListener("click", function() {
for (const item of list.children) {
item.classList.add("done");
}
});Kendini test et
-
Tüm görevleri tamamlamak için ne kullanırız?
for (const item of list.children) { item.classList.add("done"); }- forEach ile list üzerinde
- for...of ile list.children üzerinde
- while ile list.firstChild üzerinde
- map ile list.children üzerinde
Cevabı göster
for...of ile list.children üzerinde — Doğru! for...of ile canlı children koleksiyonunda dolaşırız.
-
for...of döngüsünü tamamla
for (const item ____) { item.classList.add("done"); }Cevabı göster
for (const item of list.children) { item.classList.add("done"); } -
Ders ve özelliğini eşleştir
- 1. ders
- Başlık iskeleti
- 2. ders
- Giriş, düğme, liste
- 3. ders
- Görev ekleme
- 4. ders
- Tamamlama ve silme
- 5. ders
- Tümünü tamamla