JavaScript
Arayüz iskeleti
createElement ve appendChild ile görev listesi arayüzünü oluşturursun.
Arayüz bileşenleri
Yapılacaklar uygulamasının arayüzü üç temel bileşenden oluşur: giriş alanı (yeni görevi yazmak için), ekle düğmesi (görevi listeye eklemek için) ve görev listesi (eklenen görevleri göstermek için).
Bunları DOM ile oluşturacağız: createElement("input"), createElement("button") ve createElement("ul"). Her birini appendChild ile app kapsayıcısına ekleyeceğiz.
Giriş alanına ipucu metni için placeholder özniteliği, düğmeye etiket için textContent kullanacağız.
İskeleti DOM ile kurmak
Üç bileşeni sırayla oluşturup app kapsayıcısına ekleyeceğiz. Önce input öğesini yapıp placeholder ile ipucu metni vereceğiz. Sonra button öğesini yapıp textContent ile "Ekle" yazacağız. Son olarak ul öğesini yapacağız.
Her birini oluşturduktan sonra app.appendChild(...) ile kapsayıcıya bağlayacağız. Böylece kullanıcı görsel olarak giriş alanını, düğmeyi ve boş listeyi görür.
Sıralama önemli: giriş ve düğme üstte, liste altta olacak.
Uygulama Arayüz iskeletini oluştur
Önceki dersin çözümünün üzerine devam et. Üç bileşeni oluştur: input (placeholder "Yeni görev"), button (textContent "Ekle") ve ul. Hepsini app kapsayıcısına ekle.
Örnek çözümü göster
Üç bileşeni de document.createElement ile oluştur, placeholder ve textContent ile özelliklerini ayarla, sonra app.appendChild ile kapsayıcıya 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);
Kendini test et
-
Görev listesi için hangi HTML öğesi uygun?
Cevabı göster
<ul> — Doğru! ul (sırasız liste) görev listesi için uygundur.
-
input öğesine placeholder ata
const input = document.createElement("input");
input.____ = "Yeni görev";
Cevabı göster
const input = document.createElement("input");
input.placeholder = "Yeni görev";
-
Bileşen ve amacını eşleştir
- input
- Görev metni girişi
- button
- Görevi ekleme tetiği
- ul
- Görev listesi kapsayıcı
Sıradaki ders: Görev ekleme
