Adım Adım Todo Uygulaması Örneği — HTML, CSS ve JavaScript İ

Giriş

Bu rehber bir todo uygulaması örneği üzerinden HTML, CSS ve JavaScript becerilerinizi pekiştirmenizi sağlar. Amacımız bir MVP (Minimum Viable Product) yaklaşımıyla önce temel işlevselliği çalışır hale getirmek; ardından isteğe bağlı iyileştirmeler eklemektir. Proje tabanlı öğrenme, kavramların uygulamalı olarak öğrenilmesini destekler ve gerçek dünya senaryolarıyla beceriyi güçlendirir. Daha fazla bilgi için proje tabanlı öğrenmenin eğitimdeki faydalarını inceleyen bir çalışma okuyabilirsiniz: Educational Technology Journal.

MVP: Hangi özelliklerle başlamalıyız?

İlk sürüm için karmaşık özelliklere değil, şu temel işlevlere odaklanın:

Yeni görev ekleme
Görevi tamamlandı/aktif olarak işaretleme
Görevi silme
Tarayıcıda verileri saklama (localStorage ile)

Bu dört özellik, popüler todo uygulamalarında da görülen temel işlevleri yansıtır ve hızlı bir MVP oluşturmanızı sağlar (örnek özellik karşılaştırmaları için: TechReview).

Adım 1 — Basit HTML yapısı

Önce uygulamanın temel HTML iskeletini oluşturun. Basit, erişilebilir bir yapı hedefleyin. Temel HTML bilgileri için MDN'in rehberine bakabilirsiniz: MDN Web Docs — HTML basics.

<div class="todo-app">
<h1>Todo Uygulaması</h1>
<div class="new-todo">
<label for="new-todo-input">Yeni görev:</label>
<input id="new-todo-input" type="text" placeholder="Yeni görev..." />
<button id="add-btn">Ekle</button>
</div>
<ul id="todo-list"></ul>
</div>

Label kullanımı erişilebilirlik (accessibility) açısından önemlidir; ekran okuyucular ve klavye kullanıcıları için fayda sağlar.

Adım 2 — Basit CSS (hızlı stil)

Uygulamanın kullanılabilir görünmesini sağlamak için birkaç satır CSS yeterli:

body { font-family: Arial, sans-serif; padding: 20px; background: #f7f7f7; }
.todo-app { max-width: 600px; margin: 0 auto; background: #fff; padding: 16px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.new-todo { display: flex; gap: 8px; margin-bottom: 12px; }
#todo-list li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eee; }
#todo-list li.completed span { text-decoration: line-through; color: #888; }
button { cursor: pointer; }

Bu noktada tasarımı sade tutmak öğrenme açısından faydalıdır; görünümü ileride kolayca geliştirirsiniz.

Adım 3 — JavaScript: görev ekleme, görüntüleme ve localStorage

Uygulamanın dinamizmini JavaScript ile sağlıyoruz. localStorage, tarayıcıda küçük ve orta ölçekli verileri saklamak için yaygın kullanılan bir yöntemdir; kullanım örnekleri ve sınırlamalar için MDN'in Web Storage API sayfasına bakın: MDN Web Storage API.

Aşağıdaki örnek temel işlevleri (ekle, sil, tamamla, kaydet/yükle) içerir. JavaScript kodu DOM API'si ile güvenli şekilde öğe oluşturur (innerHTML yerine textContent kullanımı XSS riskini azaltır).

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

let todos = [];

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

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

function render() {
list.innerHTML = '';
todos.forEach((t, i) => {
const li = document.createElement('li');
li.dataset.index = i;

const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = t.completed;
checkbox.addEventListener('change', () => {
todos[i].completed = checkbox.checked;
saveTodos();
render();
});

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

const delBtn = document.createElement('button');
delBtn.textContent = 'Sil';
delBtn.addEventListener('click', () => {
todos.splice(i, 1);
saveTodos();
render();
});

if (t.completed) li.classList.add('completed');
li.appendChild(checkbox);
li.appendChild(span);
li.appendChild(delBtn);
list.appendChild(li);
});
}

addBtn.addEventListener('click', () => {
const text = input.value.trim();
if (!text) return;
todos.push({ text, completed: false });
saveTodos();
render();
input.value = '';
});

window.addEventListener('load', () => {
loadTodos();
render();
});

Yukarıdaki örnekte localStorage.setItem ve getItem ile veri saklanır; veriyi JSON.stringify ile dizeye çevirip saklamak ve JSON.parse ile geri almak yaygın bir yaklaşımdır. Daha fazlası için MDN Web Storage API dökümantasyonuna bakabilirsiniz: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API.

localStorage: sınırlamalar ve güvenlik

localStorage kullanımı küçük ve orta ölçekli projeler için uygundur ve tarayıcı seviyesinde kalıcı saklama sağlar. Ancak dikkat edilmesi gereken noktalar:

localStorage verileri şifrelenmiş değildir; hassas kullanıcı verilerini depolamak için kullanılmamalıdır.
Veriler yalnızca aynı cihaz ve tarayıcıda erişilirdir — cihazlar arası senkronizasyon sağlamaz.
Tarayıcı temizlenmesi veya gizli mod gibi durumlarda veriler kaybolabilir.

Güvenlik ve kapasiteyla ilgili ayrıntılar için MDN dökümantasyonuna göz atın: MDN Web Storage API. Eğer kullanıcı verilerini cihazlar arasında senkronize etmek veya hassas veriler saklamak istiyorsanız, sunucu tarafı depolama, kimlik doğrulama ve/veya daha gelişmiş istemci depolama (ör. IndexedDB) seçeneklerini araştırın.

Test etme ve hata ayıklama (debugging)

Tarayıcı konsolunda hata mesajlarına bakın (F12 / DevTools). JavaScript hataları genelde burada görünür.
localStorage içeriğini DevTools > Application > Local Storage'dan kontrol edin.
Edge durumları test edin: boş giriş, uzun metin, hızlı ardışık tıklamalar.

İleriye dönük özellik önerileri (isteğe bağlı)

Görev düzenleme (edit) yeteneği
Filtreleme: tüm/aktif/tamamlanan görevler
Gün ve saat bazlı hatırlatıcılar veya tarihlendirme
Sunucu tabanlı senkronizasyon ve kullanıcı girişi (auth)
PWA (Progressive Web App) yaparak çevrimdışı kullanım ve cihazlar arası kullanım

Proje tabanlı öğrenme ve sonraki adımlar

Bu tür küçük projeler, teoriyi uygulamaya çevirerek kavramların kalıcılığını artırır. Proje tabanlı öğrenmenin yazılım eğitimindeki faydaları üzerine yapılan çalışmalar, öğrenme motivasyonunu ve pratik beceriyi artırdığını göstermektedir (bkz. Educational Technology Journal).

Kontrol listesi (MVP hazır mı?)

Görev ekleme çalışıyor mu?
Görev tamamlama/işaretleme çalışıyor mu?
Silme işlemi durum güncellemesi yapıyor mu?
Tarayıcı yenilendiğinde görevler dönüyor mu (localStorage)?
Basit erişilebilirlik önlemleri alındı mı (label, klavye erişimi)?

Sonuç

Bu rehber, bir todo uygulaması örneği üzerinden HTML, CSS ve JavaScript ile nasıl hızlı bir MVP oluşturabileceğinizi gösterdi. localStorage, küçük projeler için pratik bir kalıcılık sağlar fakat güvenlik ve senkronizasyon sınırlamalarını bilmek önemlidir. İlerleterek kullanıcı kimlik doğrulama, sunucu tarafı depolama veya PWA desteği ekleyebilirsiniz. Başlamak için yukarıdaki adımları uygulayın, hata ayıklayın ve özellikleri sırayla ekleyin.

Kaynaklar:

Adım Adım Todo Uygulaması: HTML, CSS ve JavaScript Projesi