5 Dakikalık JS Mini Proje: Basit Yapılacaklar Listesi (localStorage ile)

Bu kısa rehberde, yalnızca HTML, biraz CSS ve JavaScript kullanarak localStorage ile kalıcı bir yapılacaklar (to-do) listesi nasıl oluşturulur adım adım gösterilecektir. Hedef: yaklaşık 5 dakika içinde çalışan bir mini proje elde etmek. Bu proje, Mini JS Projeleri arayışındaki başlangıç seviyesindeki geliştiriciler için uygundur ve localStorage kullanımını pratik olarak gösterir.

Gereksinimler

  • Temel HTML, CSS ve JavaScript bilgisi
  • Herhangi bir metin editörü (VS Code, Notepad++ vb.)
  • Modern bir tarayıcı (localStorage destekleyen)

Ne yapacağız?

Kısa özet: basit bir arayüzde görev ekleyeceğiz, görevleri listede göstereceğiz, görevleri tamamlandı olarak işaretleyebilecek ve silebileceğiz. Tüm görevler tarayıcının localStorage alanına kaydedilecek; sayfa yenilense bile görevler korunacak. localStorage hakkında temel bilgiler ve örnekler için W3Schools'taki JavaScript To-Do List Projesi rehberine bakabilirsiniz.

Hızlı adımlar

  1. Basit bir HTML iskeleti oluşturun.
  2. Minimal stil (CSS) ekleyin — görünüm opsiyoneldir.
  3. JavaScript ile görev ekleme, silme, tamamlama ve render fonksiyonlarını yazın.
  4. tasks dizisini localStorage'a kaydedin ve sayfa yüklenince geri yükleyin.
  5. Tarayıcıda test edin: görev ekleyin, sayfayı yenileyin, görevlerin korunup korunmadığını kontrol edin.

Adım 1 — HTML (ilk iskelet)

Aşağıdaki minimal HTML yapısını kullanın (burada gerçek <html> ya da <body> etiketleri sayfaya eklenmelidir; aşağıdaki sadece içerik iskeletini gösterir):

<div id="todo-app">
<h1>Yapılacaklar</h1>
<input id="taskInput" placeholder="Yeni görev...">
<button id="addBtn">Ekle</button>
<ul id="taskList"></ul>
</div>

Adım 2 — Basit stil

Görünüm için kısa bir CSS eklemek isterseniz örnek:

<style>
body { font-family: Arial, sans-serif; padding: 20px; }
#taskList li { margin: 8px 0; list-style: none; }
#taskList li.done { text-decoration: line-through; color: #888; }
#taskList button { margin-left: 10px; }
</style>

Adım 3 — JavaScript (localStorage ile)

Aşağıdaki JavaScript kodu, görevleri localStorage kullanarak saklar ve sayfa yenilense bile görevler korunur. localStorage yalnızca string saklayabildiği için dizi/nesneleri JSON.stringify ile kaydedip, JSON.parse ile geri alıyoruz (ayrıntılar için kaynak: W3Schools To-Do Project).

<script>
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');

// localStorage'dan yükle veya boş dizi
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

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

function renderTasks() {
taskList.innerHTML = '';
tasks.forEach((t, i) => {
const li = document.createElement('li');
li.textContent = t.text;
if (t.done) li.classList.add('done');
// tıklayınca tamamla/geri al
li.addEventListener('click', () => {
tasks[i].done = !tasks[i].done;
saveTasks();
renderTasks();
});
// silme butonu
const del = document.createElement('button');
del.textContent = 'Sil';
del.addEventListener('click', (e) => {
e.stopPropagation();
tasks.splice(i, 1);
saveTasks();
renderTasks();
});
li.appendChild(del);
taskList.appendChild(li);
});
}

addBtn.addEventListener('click', () => {
const text = taskInput.value.trim();
if (!text) return; // boşsa ekleme
tasks.push({ text, done: false });
saveTasks();
renderTasks();
taskInput.value = '';
});

// sayfa yüklenince listeyi göster
renderTasks();
</script>

Kodun kısa açıklaması

  • tasks dizisi görevleri tutar; her görev { text, done } formatındadır.
  • saveTasks() fonksiyonu tasks dizisini JSON olarak localStorage'a kaydeder.
  • renderTasks() DOM üzerinde görevleri çizer; tamamlanma ve silme için olay dinleyicileri ekler.
  • Sayfa her yüklendiğinde localStorage'dan görevler alınır ve ekrana yazdırılır.

Hızlı test checklist

  • Sayfayı açın, bir görev ekleyin.
  • Görevi tıklayarak tamamlandığını/geri alındığını kontrol edin.
  • Sil düğmesiyle görevi kaldırın.
  • Tarayıcıda sayfayı yenileyin — görevlerin kalıcı olduğunu doğrulayın.
  • Gelişmiş: Tarayıcınızın geliştirici araçlarında (Application > Local Storage) 'tasks' anahtarını kontrol edin.

Geliştirme fikirleri (biraz daha ileri)

  • Görev düzenleme (edit): görev üzerine çift tıklayınca metni düzenleyin.
  • Filtreler: tüm, tamamlanan, tamamlanmayan şeklinde gösterim.
  • Clear completed: tamamlananları tek seferde temizleme düğmesi.
  • Sunucu senkronizasyonu: kullanıcı hesabı varsa görevleri bir sunucuya gönderip cihazlar arasında eşitleme.
  • Drag & drop ile sıralama (HTML5 Drag & Drop veya bir kütüphane kullanarak).

İpuçları ve sınırlamalar

  • localStorage tarayıcı başına çalışır; farklı cihazlarda otomatik olarak senkronize edilmez.
  • localStorage yalnızca string saklar; bu nedenle nesneleri JSON.stringify ile kaydedip JSON.parse ile alıyoruz.
  • Hassas veri (şifre, kişisel bilgiler) localStorage'da saklanmamalıdır; bu alanda güvenlik ihtiyaçları varsa sunucu tarafı çözümler düşünün.
  • Daha fazla bilgi ve örnekler için W3Schools'taki proje rehberine bakabilirsiniz: https://www.w3schools.com/js/js_project_todo.asp.

Bu mini proje, JavaScript ve localStorage kullanımını öğrenmek için hızlı ve pratiktir. Aşağıdaki SSS bölümünde sık sorulan kısa sorulara yanıtlar bulabilirsiniz.