5 Dakikalık JS Mini Proje: Basit Yapılacaklar Listesi (localStorage ile)
Mini JS Projeleri
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
- Basit bir HTML iskeleti oluşturun.
- Minimal stil (CSS) ekleyin — görünüm opsiyoneldir.
- JavaScript ile görev ekleme, silme, tamamlama ve render fonksiyonlarını yazın.
- tasks dizisini localStorage'a kaydedin ve sayfa yüklenince geri yükleyin.
- 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.
Yorumlar