Mini Proje: To-Do Uygulaması ile Adım Adım Programlama Öğren

Giriş

Bu mini proje rehberi, "adım adım programlama öğrenme" amacıyla HTML, CSS ve JavaScript kullanarak basit bir To-Do (Yapılacaklar) uygulaması oluşturmanızı sağlar. Projeyle öğrenme yaklaşımı, kodu yazarken kavramları uygulamalı olarak öğrenmenize yardımcı olur. Bu tür başlangıç projeleri için adım adım rehber örnekleri GeeksforGeeks ve yerel dilde açıklamalar içeren kaynaklar gibi rehberler faydalıdır (Utku Kahraman, Webdevmonk).

Neleri Öğreneceksiniz?

Basit HTML form ve liste yapısı oluşturma.
CSS ile temel düzen ve görünüm sağlama.
JavaScript ile DOM manipülasyonu, olay dinleme ve veri kalıcılığı (localStorage).
Projeyi genişletme (filtreleme, düzenleme, sıralama, sunucu entegrasyonu) fikirleri.

Gereksinimler

Temel HTML/CSS bilgisi (etiket yapısı ve seçiciler).
Basit JavaScript bilgisi (değişkenler, fonksiyonlar, event listener).
Metin editörü (VS Code, Sublime, Notepad++ vb.) ve modern bir tarayıcı.

Proje Planı (Kısa Öz)

Bu uygulama şunları yapacak:

Yeni görev ekleme.
Görevi tamamlandı olarak işaretleme ve geri alma.
Görevi silme.
Tarayıcı kapatılsa bile görevleri saklamak için localStorage kullanma.
İleri eklemeler: filtreleme, düzenleme, sıralama.

Adım Adım Uygulama

1. Dosya Yapısı

Basit bir proje için üç dosya yeterli: index.html, style.css, app.js. Aşağıda temel HTML gövdesinin örnek bir iskeleti bulunmaktadır (açıktaki köşeli parantezler HTML etiketlerini temsil eder; tarayıcıya koymadan önce doğrudan kullanabilirsiniz):

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>To-Do Uygulaması</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="app">
    <h1>Yapılacaklar</h1>
    <form id="task-form">
      <input type="text" id="task-input" placeholder="Yeni görev ekle..." required>
      <button type="submit">Ekle</button>
    </form>
    <ul id="task-list"></ul>
  </div>
  <script src="app.js"></script>
</body>
</html>

2. Basit Stil (CSS)

Minimal bir görünüm için style.css örneği:

/* style.css */
body { font-family: Arial, sans-serif; background: #f5f7fb; padding: 24px; }
.app { max-width: 640px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
#task-list { list-style: none; padding: 0; margin-top: 12px; }
#task-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee; }
#task-list li.completed span { text-decoration: line-through; color: #888; }

3. Temel JavaScript (app.js)

Aşağıdaki örnek, görev ekleme, listeleme, silme ve tamamlandı bilgisini localStorage'da saklama işlevlerini içerir. Bu kod, doğrudan çalışacak şekilde basit tutulmuştur:

// app.js
const taskForm = document.getElementById('task-form');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');

let tasks = JSON.parse(localStorage.getItem('tasks') || '[]');

function saveTasks() {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

function renderTasks() {
  taskList.innerHTML = '';
  tasks.forEach((task, index) => {
    const li = document.createElement('li');
    li.dataset.index = index;
    if (task.completed) li.classList.add('completed');

    const label = document.createElement('label');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.checked = task.completed;
    checkbox.addEventListener('change', () => {
      tasks[index].completed = checkbox.checked;
      if (tasks[index].completed) li.classList.add('completed'); else li.classList.remove('completed');
      saveTasks();
    });

    const span = document.createElement('span');
    span.textContent = task.text;

    const delBtn = document.createElement('button');
    delBtn.textContent = 'Sil';
    delBtn.addEventListener('click', () => {
      tasks.splice(index, 1);
      saveTasks();
      renderTasks();
    });

    label.appendChild(checkbox);
    label.appendChild(span);
    li.appendChild(label);
    li.appendChild(delBtn);
    taskList.appendChild(li);
  });
}

taskForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = taskInput.value.trim();
  if (!text) return;
  tasks.push({ text, completed: false });
  saveTasks();
  renderTasks();
  taskInput.value = '';
});

renderTasks();

Bu yaklaşım, innerHTML yerine createElement ve textContent kullanarak kullanıcı girdisinden gelen metinleri güvenli şekilde yerleştirir ve temel XSS risklerini azaltır.

4. Test Etme ve Hata Ayıklama

Tarayıcı konsolunu (F12) açın; hata mesajları varsa satır numarası ve hata türüne göre düzeltin.
localStorage içeriğini kontrol etmek için konsolda localStorage.getItem('tasks') komutunu çalıştırın.
Görev eklenmiyorsa form submit tetikleniyor mu kontrol edin (required, preventDefault etkileri).
Silme veya değiştirme çalışmıyorsa index değerlerinin doğru tutulduğundan emin olun; render sonrası indeksler yeniden atanır.

Geliştirme Fikirleri (Ödevler)

Filtreleme: Tüm / Aktif / Tamamlanan öğeleri gösteren basit butonlar ekleyin.
Görev düzenleme: çift tıklama ile bir görevin metnini düzenleme arayüzü oluşturun.
Sıralama: Görevleri sürükle-bırak ile yeniden sıralama (Drag & Drop API).
Sunucu senkronizasyonu: Basit bir REST API ile görevleri sunucuya kaydetme (fetch kullanımı).
Erişilebilirlik ve i18n: Form etiketleri, klavye erişimi ve çoklu dil desteği ekleyin.

Kontrol Listesi (Hızlı)

HTML: Form ve liste elemanları doğru id/özelliklere sahip mi?
JS: Olay dinleyiciler doğru elementlere bağlandı mı?
localStorage: Görevler kaydediliyor mu, sayfa yenilendiğinde geri geliyor mu?
Responsive: Mobil görünüm kontrol edildi mi?

Kaynaklar ve İleri Okuma

Bu rehber hazırlanırken örnek proje adımları ve en iyi uygulamalar için aşağıdaki rehberler bilgilendirici oldu:

GeeksforGeeks - Todo List App Using JavaScript (proje yapısı ve mantık örnekleri).
Utku Kahraman - HTML ve CSS ile To-Do List Yapımı (HTML/CSS gösterimleri).
Webdevmonk - A simple To-Do App (adım adım uygulama örneği).

Not: Buradaki kod örnekleri eğitim amaçlıdır; canlı uygulamalarda ek güvenlik, erişilebilirlik ve hata yönetimi kontrolleri uygulamanız önerilir.

Projeyi tamamladıktan sonra küçük özellikler ekleyerek öğrenmeyi sürdürebilirsiniz. Başarıyla tamamladığınızda, bu mini proje size gerçek dünya web geliştirme iş akışlarının temelini öğretmiş olacaktır.

Mini Proje: To-Do Uygulaması ile Web Geliştirme Rehberi