ToDo Uygulaması Yaparak Öğrenme: HTML, CSS ve JavaScript ile

ToDo Uygulaması Yaparak Öğrenme: HTML, CSS ve JS ile Tam Proje

Projeyle öğrenme yaklaşımı, kodu doğrudan uygulamada kullanarak kavramları pekiştirmenizi sağlar. Basit bir ToDo (yapılacaklar) uygulaması; HTML ile yapı, CSS ile görünüm ve JavaScript ile etkileşim öğelerini bir arada çalıştırmak için ideal bir başlangıç projesidir. Aşağıda adım adım ilerleyerek hem öğrenebilir hem de portföyünüzde sergileyebileceğiniz bir proje tamamlayabilirsiniz.

Neden projeyle öğrenme?

Teorik dersler temel kavramları verirken, gerçek dünya becerileri pratik yaparak gelişir. Proje tabanlı kurs ve içerikler bu yaklaşımı destekler; örneğin uygulamalı web proje kursları, her bir tekniği gerçek bir ürün içinde kullanmanıza olanak tanır. Bu yazıda izlenecek adımlar, HTML/CSS/JS üçlüsünü bağlam içinde çalıştırmayı hedefler ve kullanıcı arayüzü tasarımı ile etkileşim eklemeye odaklanır (kaynak: proje tabanlı kurs örneği).

Bu proje size ne öğretecek?

HTML ile temiz, semantik bir iskelet oluşturma.
CSS ile düzen, renk ve görsel iyileştirme (responsive temel adımlar).
JavaScript ile DOM manipülasyonu: görev ekleme, tamamlama, silme.
Tarayıcıda veri saklama için localStorage kullanımı.
Küçük UX iyileştirmeleri: doğrulama, erişilebilirlik ve filtreleme.

Hazırlık: Neye ihtiyacınız var?

Basit bir kod editörü (VS Code, Sublime Text veya benzeri).
Güncel bir web tarayıcısı (Chrome/Firefox/Safari).
Proje için üç dosya: index.html, style.css, script.js.
Temel HTML/CSS/JS bilgisi — yoksa adım adım ilerlerken öğrenebilirsiniz.

Adım 1 — HTML iskeleti

Basit ve erişilebilir bir yapı oluşturun. Örnek iskelet (gösterim amaçlı, işaretleri HTML entity ile kaçırılmıştır):

<!DOCTYPE html>
<html lang="tr">
<head><meta charset="utf-8"><title>ToDo</title><link rel="stylesheet" href="style.css"></head>
<body>
<div class="container">
  <h1>Yapılacaklar</h1>
  <form id="taskForm">
    <label for="taskInput">Yeni görev</label>
    <input type="text" id="taskInput" placeholder="Bir görev yazın">
    <button type="submit">Ekle</button>
  </form>
  <ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>

Bu yapıda dikkat edilmesi gerekenler: form kullanımı (enter ile gönderim için), input'a ilişkili label (erişilebilirlik için), ve görevleri listeleyeceğiniz boş bir ul elemanı.

Adım 2 — CSS ile temel stil ve düzen

Görünümü temiz ve okunabilir kılmak ilk amaç olmalı. Basit öneriler:

Konteyner genişliğini sınırlayın (örn. max-width: 700px) ve ortalayın.
Form elemanlarına yeterli iç boşluk (padding) verin; butonları belirgin yapın.
Liste elemanları için tamamlandı durumuna özel bir sınıf (örn. .done) tanımlayın ve çizgiyle veya opaklıkla gösterebilirsiniz.
Mobil için küçültülmüş düzen ve dokunmatik hedef büyüklüklerini düşünün (responsive).

Daha modern bir görünüm ve küçük animasyonlar eklemek isterseniz, kontrast ve geçişlere dikkat ederek adım adım ilerleyin. Bu konuda tasarım önerileri ve örnek stiller için iyi bir referans olarak bir ToDo tasarım çalışması incelenebilir (görsel ve stil örnekleri).

Adım 3 — JavaScript ile etkileşim (temel akış)

Bu adım uygulamanın kalbidir. Temel akış şu şekilde işler:

Form gönderimini yakalayın: form 'submit' olayını dinleyin ve eğer form gönderiliyorsa e.preventDefault() ile sayfa yenilenmesini engelleyip addTask() fonksiyonunu çağırın.
Görev ekleme: input değerini alın, boşsa işlem yapmayın. Yeni bir li oluşturun ve buna görev metnini koyun. Yeni öğeye silme ve tamamlama için buton veya click eventi ekleyin.
Görev tamamlama: görev öğesine tıklandığında veya tamamla butonuna basıldığında ilgili öğeye .done sınıfını ekleyip/çıkarın.
Görev silme: silme butonuna basıldığında öğeyi listeden kaldırın.
Persist (kalıcı saklama): görevler bir dizi içinde tutulur; her ekleme/silme/toggle işleminden sonra localStorage.setItem('tasks', JSON.stringify(tasks)) ile kaydedin. Sayfa yüklenirken localStorage'dan veriyi okuyup (JSON.parse) listeyi oluşturun.

Örnek iş akışı açıklaması (kod gösterimi yerine kısa açıklama): addTask() fonksiyonu input değerini alır, tasks dizisine yeni bir nesne ekler (ör. { text: 'Görev', done: false }), DOM'a uygun bir li öğesi ekler ve saveTasks() ile localStorage'a yazar. loadTasks() sayfa açıldığında çağrılarak kaydedilmiş görevleri DOM'a yükler.

LocalStorage kullanımı örneği: localStorage.setItem('tasks', JSON.stringify(tasks)); ve geri alma: tasks = JSON.parse(localStorage.getItem('tasks') || '[]');

Test etme ve hata ayıklama

Her fonksiyonu ayrı ayrı test edin: görev ekleme, tamamlama, silme ve sayfa yenilendiğinde verinin gelmesi. Tarayıcının geliştirici araçlarındaki Console ve Network panelleri, hataları bulmak için yeterli olacaktır. Gözden kaçan durumlar için kullanıcı girişi doğrulaması ekleyin (ör. sadece boş olmayan metin kabul etme).

İleri adımlar ve iyileştirmeler

Düzenleme (edit) özelliği ekleyin: mevcut görevi düzenlemeye izin verin.
Filtreler: tüm/görevli/tamamlanan bazında filtreleme yapın.
Veri senkronizasyonu: kullanıcı hesabı ve sunucuya kaydetme için basit bir REST API’ye taşıyın.
Erişilebilirlik: klavye ile navigasyon, uygun aria-label kullanımı ve kontrast kontrolü yapın.
Testler: önemli fonksiyonlar için birimler (unit tests) yazın, bu projenin profesyonelleşmesine yardımcı olur.

Portföy ve yayına alma

Projenizi GitHub’a yükleyip GitHub Pages veya başka bir statik hosting ile yayınlayabilirsiniz. Küçük bir README dosyası hazırlayın; proje amacı, nasıl çalıştırılacağı ve hangi teknolojilerin kullanıldığı açık olsun. Projenin ekran görüntülerini veya kısa bir demo videosunu eklemek işe yaraır.

Kontrol listesi (hızlı)

HTML iskeleti hazır mı? (form, input, ul)
CSS ile temel stil uygulandı mı? (responsive kontrolü yapıldı mı?)
Görev ekleme/tamamlama/silme çalışıyor mu?
localStorage ile veri kaydı ve yüklemesi sorunsuz mu?
Basit erişilebilirlik ve kullanıcı doğrulamaları eklendi mi?

Not: Bu rehber örnek bir yol haritası sunar. Uygulamadaki stil ve detayları kendi öğrenme hedeflerinize göre genişletebilirsiniz. Tasarım ve CSS örnekleri için ayrıca bakabileceğiniz bir örnek çalışma: HTML ve CSS ile To-Do List Yapımı. Proje tabanlı eğitim yaklaşımı hakkında örnek kurslar ise bu tür kurslarda görülebilir.