Projeyle Öğrenme: 2 Saatte Basit Todo Uygulaması (JS + LocalStorage)

Bu makalede, projeyle öğrenme (project-based learning) yaklaşımını kullanarak kısa sürede çalışır bir todo uygulaması geliştiriyoruz. Hedef, temel JavaScript kavramlarını (DOM, olaylar, dizi yönetimi) ve tarayıcı tarafı veri kalıcılığını (LocalStorage) pratiğe dökmektir. Proje adımlarında referans olarak MDN JavaScript Guide ve MDN LocalStorage dokümantasyonu kullanılabilir.

Neden bir todo uygulaması?

Basit bir todo uygulaması, kullanıcı girdisi alma, DOM'u güncelleme, liste yönetimi ve kalıcılık gibi temel kavramları barındırır. Bu nedenle başlangıç seviyesindeki öğrenenler için ideal bir küçük proje olarak kabul edilir; benzer yaklaşımlar için bakınız freeCodeCamp rehberi.

Gereksinimler (önkoşullar)

• Temel HTML ve CSS bilgisi
• JavaScript'te değişken, fonksiyon ve DOM manipülasyonu hakkında temel anlayış
• Basit bir metin editörü (VS Code, Sublime, vb.) ve modern bir tarayıcı

2 Saatlik Yol Haritası (öneri)

• 10–20 dk: Proje kurulumu ve HTML iskeletinin oluşturulması.
• 30–50 dk: JavaScript ile ekleme, listeleme ve silme işlevleri.
• 20–30 dk: LocalStorage entegrasyonu ve veri kalıcılığı testleri.
• 20–30 dk: Hata ayıklama, küçük iyileştirmeler ve ek özellikler (işaretleme, filtreleme).

Adım 1 — HTML iskeleti

Aşağıdaki HTML, uygulamanın minimal iskeletini gösterir. (Açıktaki köşeli parantezler HTML etiketleri olarak gösterilmiştir.)

<div class="todo-app">
<h1>Todo</h1>
<input id="todo-input" placeholder="Yeni görev..." />
<button id="add-btn">Ekle</button>
<ul id="todo-list"></ul>
</div>

Adım 2 — Basit stil (isteğe bağlı)

Görünüm için birkaç satır CSS ekleyebilirsiniz. Bu kısım öğrenme amaçlıdır ve uygulamanın işlevselliğini etkilemez.

Adım 3 — JavaScript: temel mantık ve localStorage entegrasyonu

Aşağıda uygulamanın temel JavaScript mantığını gösteren örnek kod satırları bulunur. Bu kodu ayrı bir dosyaya (app.js) koyup HTML dosyanızda <script> ile dahil edebilirsiniz.

const todoInput = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');

let todos = []; // { id: number, text: string, completed: boolean }

function saveTodos() {
localStorage.setItem('todos', JSON.stringify(todos));
}

function loadTodos() {
const stored = localStorage.getItem('todos');
todos = stored ? JSON.parse(stored) : [];
renderTodos();
}

function renderTodos() {
todoList.innerHTML = '';
todos.forEach(todo => {
const li = document.createElement('li');
li.textContent = todo.text;
if (todo.completed) li.style.textDecoration = 'line-through';

const toggleBtn = document.createElement('button');
toggleBtn.textContent = todo.completed ? 'Geri al' : 'Tamam';
toggleBtn.addEventListener('click', () => {
todo.completed = !todo.completed;
saveTodos();
renderTodos();
});

const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Sil';
deleteBtn.addEventListener('click', () => {
todos = todos.filter(t => t.id !== todo.id);
saveTodos();
renderTodos();
});

li.appendChild(toggleBtn);
li.appendChild(deleteBtn);
todoList.appendChild(li);
});
}

addBtn.addEventListener('click', () => {
const text = todoInput.value.trim();
if (!text) return;
const todo = { id: Date.now(), text, completed: false };
todos.push(todo);
saveTodos();
renderTodos();
todoInput.value = '';
});

window.addEventListener('DOMContentLoaded', loadTodos);

Neden JSON.stringify/parse?

localStorage anahtar-değer şeklinde string tutar. Bu nedenle JavaScript dizilerini veya nesnelerini saklamak için JSON.stringify ile string'e çevirip, geri almak için JSON.parse kullanırız. Detaylar için MDN'in LocalStorage sayfasına bakabilirsiniz: Window.localStorage - MDN.

Uygulamayı test etme ve doğrulama

• Yeni görev ekleyin, sayfayı yenileyin; görevlerin kalıcı olduğunu doğrulayın.
• Silme ve tamam/geri al düğmelerini deneyin.
• Tarayıcı geliştirici araçlarındaki Application/Storage bölümünden todos anahtarını inceleyin.

Önemli notlar ve sınırlamalar

• localStorage verileri tarayıcı ve origin (alan) bazlıdır; farklı tarayıcılarda veya gizli tarayıcı modlarında görünmez olabilir.
• localStorage büyük miktarda veriye uygun değildir ve boyut sınırları tarayıcıya göre değişir; hassas verileri saklamayın. (Kaynak: MDN)
• Bu örnek küçük öğrenme projeleri içindir; gerçek bir üretim uygulaması için sunucu tarafı doğrulama ve senkronizasyon gerekebilir.

Geliştirme ve özelleştirme fikirleri (ilerleme adımları)

• Görevleri düzenleme (edit) özelliği ekleyin.
• Filtreleme: tüm/görevli/tamamlanan gibi görünüm filtreleri ekleyin.
• Due date (bitiş tarihi) ve öncelik seviyeleri ekleyin; tarih sıralaması yapın.
• LocalStorage yerine bir API kullanarak sunucu taraflı depolamaya geçin (kullanıcı oturumu gerektirir).

Kısa kontrol listesi (2 saat içinde bitirmek için)

• HTML iskeletini oluşturun ve tarayıcıda açın.
• JavaScript ile ekleme ve listeleme fonksiyonlarını çalışır hale getirin.
• localStorage ile veriyi kaydedin ve yükleyin.
• Silme ve tamam/geri al işlevlerini ekleyin.
• Basit testleri yapın ve küçük iyileştirmeler ekleyin.

Kaynaklar ve ileri okumalar

• JavaScript Guide — MDN Web Docs (temel JS kavramları).
• Window.localStorage — MDN (localStorage kullanımı ve uyarılar).
• JavaScript Todo App Tutorial — freeCodeCamp (benzer uygulama rehberi).
• Project-Based Learning — Edutopia (projeyle öğrenme etkileri üzerine yazı).

Kısa, uygulamalı bir proje ile öğrenmek genellikle kavramların daha kalıcı olmasına yardımcı olur. Bu rehberde verdiğimiz adımları takip ederek kendi todo uygulamanızı oluşturup, üzerine küçük özellikler ekleyerek becerilerinizi geliştirebilirsiniz.