Mini proje — Etkileşimli yapılacaklar listesi
Önce buy tea ekle, sonra bitmiş işaretle, en sonda listeden çıkar. Açık satır buy tea yazar. Bitmiş satır done: buy tea yazar. Bu kısa listeyi bu sayfada sen kurarsın.
Önceki sayfa yalnız adları saydı
Orada liste yoktu, becerilerin adı vardı. Bu sayfa listenin kendisidir. Elindeki araçlar bir dizi, bir form, textContent ve bir tıklamadır. Eklemek sayfayı yeniden yüklememelidir.
Her iş bir nesnedir
tasks nesnelerden kurulu bir dizidir. Her nesnede text ve done vardır. Yeni öğe done değeri false ile başlar. addTask sözcükleri trim ile kırpar. Geriye bir şey kalmazsa push olmaz ve öğe saklanmaz.
const tasks = [];
function addTask(text) {
const clean = text.trim();
if (!clean) {
return;
}
tasks.push({ text: clean, done: false });
}
addTask("buy tea");
console.log(tasks[0].text);
console.log(tasks[0].done);
İki kayıt sırayla buy tea, sonra false olur. addTask(" ") trim sonrası boş kalır, hiçbir şey saklamaz, uzunluk 0’da durur.
Göndermek belgeyi yeniden yükler
Formu göndermek belgeyi yeniden yükler. Dizi yalnızca bellektedir, bu yüzden yeniden yükleme onu düşürür ve liste boş görünür. event.preventDefault() o yeniden yüklemeyi durdurur. Ardından metni alırsın, alanı temizlersin ve yeniden çizersin.
const form = document.querySelector("#add-form");
const input = document.querySelector("#task-text");
form.addEventListener("submit", (event) => {
event.preventDefault();
addTask(input.value);
input.value = "";
render();
});
Belge durur. Alan boştur. render çalışır. Yalnızca boşluklardan oluşan bir alan satır eklemez.
İki düğme formu göndermesin
render önce #tasks öğesini boşaltır, sonra her öğe için bir li kurar. Açık öğe text gösterir. Bitmiş öğe done: ve ardından metni gösterir. Her satırda iki düğme vardır, ikisi de type="button" taşır, yoksa tıklama formu gönderir. Done mantıksal değeri çevirir. Silmek splice kullanır. İkisi de yeniden çizer, çünkü eski indeksler yanlış öğeyi gösterirdi.
function toggleTask(index) {
tasks[index].done = !tasks[index].done;
}
function removeTask(index) {
tasks.splice(index, 1);
}
function render() {
const list = document.querySelector("#tasks");
list.textContent = "";
tasks.forEach((task, index) => {
const item = document.createElement("li");
item.textContent = task.done ? "done: " + task.text : task.text;
const doneButton = document.createElement("button");
doneButton.type = "button";
doneButton.textContent = "Done";
doneButton.addEventListener("click", () => {
toggleTask(index);
render();
});
const removeButton = document.createElement("button");
removeButton.type = "button";
removeButton.textContent = "Remove";
removeButton.addEventListener("click", () => {
removeTask(index);
render();
});
item.append(doneButton, removeButton);
list.append(item);
});
}
Sıra addTask("buy tea"), toggleTask(0), render şeklindedir. Satır done: buy tea olur. Bir çevirme daha onu yine buy tea yapar. removeTask(0) uzunluğu 0 bırakır ve sonraki çizimde satır yoktur. Alanın sözlerini textContent ile koy. Onları sayfaya HTML diye yapıştırma.
İndeks o turun indeksidir
forEach o turdaki indeksi yakalar. splice sonrasında eski numaralar yanlış işi gösterir. Yeniden çizmek eski düğmeleri atar ve yenilerini kurar. O ikinci çizim olmazsa Remove yanlış satırı siler.
Üç iş bölümü
Form ekler. Liste çizer. Done ve Remove yalnızca tasks değiştirir, sonra yeniden çizer.
<!DOCTYPE html>
<html>
<body>
<form id="add-form">
<input id="task-text" type="text">
<button type="submit">Add</button>
</form>
<ul id="tasks"></ul>
<script>
const tasks = [];
function addTask(text) {
const clean = text.trim();
if (!clean) return;
tasks.push({ text: clean, done: false });
}
function toggleTask(index) {
tasks[index].done = !tasks[index].done;
}
function removeTask(index) {
tasks.splice(index, 1);
}
function render() {
const list = document.querySelector("#tasks");
list.textContent = "";
tasks.forEach((task, index) => {
const item = document.createElement("li");
item.textContent = task.done ? "done: " + task.text : task.text;
const doneButton = document.createElement("button");
doneButton.type = "button";
doneButton.textContent = "Done";
doneButton.addEventListener("click", () => {
toggleTask(index);
render();
});
const removeButton = document.createElement("button");
removeButton.type = "button";
removeButton.textContent = "Remove";
removeButton.addEventListener("click", () => {
removeTask(index);
render();
});
item.append(doneButton, removeButton);
list.append(item);
});
}
document.querySelector("#add-form").addEventListener("submit", (event) => {
event.preventDefault();
addTask(document.querySelector("#task-text").value);
document.querySelector("#task-text").value = "";
render();
});
</script>
</body>
</html>
buy tea yaz ve Add düğmesine bas. Satır buy tea olur, alan temizlenir. Done düğmesine basınca satır done: buy tea olur. Remove düğmesine basınca liste boştur. Boş alanda Add hiçbir şey eklemez.
Masada beş adım
- addTask("buy tea") çağır. İlk text buy tea olur, done false kalır.
- Formu gönder. Sayfa yeniden yüklenmez, satır belirir.
- Done düğmesine bas. Satır done: buy tea gösterir.
- Remove düğmesine bas. tasks.length 0 olur.
- Yalnızca boşluk gönder. Liste büyümez.
Gerçekten yapılan yanlışlar
- preventDefault atlanırsa dizi gönderimde ölür
- boş bir dizgeye push yapılır
- Done veya Remove üzerine type="submit" konur
- satır ekrandan silinir ama splice unutulur, sonraki çizim onu geri getirir
- splice sonrası render atlanır
- alan sayfaya HTML olarak yazılır
Yanında kalsın
- Bir iş { text, done } biçimindedir ve done false ile başlar
- addTask("buy tea") buy tea saklar, boş alan hiçbir şey saklamaz
- preventDefault sayfayı tutar, render satırları çizer
- Done done: buy tea gösterir, Remove uzunluğu 0 bırakır
- Her değişiklikten sonra yeniden çiz
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek