Proje: Yapılacaklar uygulaması

5 derslik DOM tabanlı to-do projesine genel bakış: arayüz, olaylar ve localStorage.

Proje: Yapılacaklar uygulaması

Bu 5 derslik projede bir yapılacaklar uygulaması geliştireceğiz. Kullanıcı görev ekleyecek, tek tıklamayla tamamlandı olarak işaretleyecek, çift tıklamayla silecek. Tüm etkileşim DOM API'si ile olacak.

Şu kavramları birleştireceğiz:

getElementById ile kapsayıcı seçmek
createElement ile öğe oluşturmak
appendChild ile eklemek
addEventListener ile olay dinlemek
classList ile sınıf yönetmek

Her ders önceki dersin çözümünden devam eder.

Uygulamanın iskeleti

Uygulamanın iskeleti sade: #app kapsayıcısı içine başlık, giriş alanı, ekle düğmesi ve görev listesi yerleşecek. HTML sabit kalsın; tüm dinamik içeriği JavaScript ile oluşturacağız.

Bu ilk dersin sonunda #app kapsayıcısını seçip içine bir h1 başlığı ekleyeceğiz. Sonraki derslerde bu iskeletin üzerine giriş alanını, düğmeyi ve listeyi ekleyeceğiz.

Kodumuz app referansını bir değişkende tutacak; tüm eklemeler bu referans üzerinden yapılacak.

Uygulama Başlığı kapsayıcıya ekle

Bu ilk adımda #app kapsayıcısını seç, bir h1 öğesi oluştur, metnini "Yapılacaklar" yap ve kapsayıcıya ekle.

Örnek çözümü göster

Önce getElementById ile kapsayıcıyı seç, sonra createElement ile h1 yap, textContent ata ve appendChild ile ekle.

Örnek çözüm:
// Yapılacaklar uygulaması
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Yapılacaklar";
app.appendChild(title);

Kendini test et

Görevleri listeye eklemek için hangi metot kullanılır?
- console.log()
- appendChild()
- JSON.parse()
- Number()
Cevabı göster

appendChild() — Doğru! appendChild yeni öğeyi bir ebeveyne bağlar.

h1 öğesi oluştur

const title = document.____;

Cevabı göster

const title = document.createElement("h1");

Metot ve görevini eşleştir

getElementById

ID ile öğe seç
createElement

Yeni öğe oluştur
appendChild

Öğeyi ebeveyne ekle
textContent

Metin içeriğini ayarla

Sıradaki ders: Arayüz iskeleti

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler