✨ Proje Özeti ve Temel Teknolojiler
Bu proje, harici bir kütüphane kullanmadan (**Vanilla JavaScript**) temel **CRUD** operasyonlarının tamamını **Local Storage** üzerinden gerçekleştiren bir yapılacaklar listesi uygulamasıdır. Odak noktası, tarayıcı düzeyinde veri kalıcılığı ve performansı optimize edilmiş **DOM Yönetimi**dir.
Kullanılan Teknolojiler:
- Vanilla JavaScript (Ana Dil)
- Local Storage (Veri Depolama)
- DOM Manipulation (Yönetim)
- HTML/CSS (Arayüz)
- Bootstrap 4 & Font Awesome (Styling)
1. Veri Kalıcılığı ve Local Storage Yönetimi
Uygulamanın en kritik yanı, tarayıcı kapansa dahi verilerin kaybolmamasını sağlayan Local Storage kullanımıdır. Veri tutarlılığını sağlamak için dikkatli JSON formatlama ve ayrıştırma yapılmıştır.
Veri Getirme ve `null` Kontrolü
Local Storage'dan veri çekerken, anahtarın tarayıcıda ilk kez çalıştırıldığında `null` dönme olasılığına karşı kontrol yapılmış ve verinin her zaman boş bir dizi olarak dönmesi sağlanmıştır. Bu, uygulamanın çökmesini engeller.
Diziden Eleman Silme
Silme işleminde, silinecek eleman Local Storage'dan çekilen dizide döngüye alınmış, eşleşen elemanın dizideki konumu bulunmuş ve atomik olarak diziden çıkarılması sağlanmıştır.
2. Etkili Olay Yönetimi (Event Handling) ve Delegasyon
Tüm kullanıcı etkileşimleri, performansı artırmak ve bellek sızıntılarını azaltmak için optimize edilmiştir.
Olay Delegasyonu (Event Delegation)
Görev silme işlemi, her bir öğeye dinleyici atamak yerine, tüm todoların kapsayıcısı olan bir öğeye atanmıştır. Bu teknik, dinamik olarak eklenen elemanların dahi silme olayını tetiklemesini sağlar ve DOM üzerindeki dinleyici sayısını minimumda tutar.
`DOMContentLoaded` ile Hazırlık
Verilerin yüklenmesi, DOM'daki tüm öğeler yüklendikten hemen sonra güvenli bir şekilde sağlanmıştır. Bu, verilerin arayüze eklenmeden önce HTML yapısının hazır olduğundan emin olur.
3. Dinamik Arayüz Yönetimi ve UX Çözümleri
Kullanıcı deneyimini artıran ve Vanilla JavaScript ile temiz bir şekilde yazılmış arayüz çözümleri sunulmuştur.
Geri Bildirim Sistemi
Başarılı veya başarısız tüm işlemler (ekleme, silme, boş giriş) için kullanıcıya geri bildirim sağlayan dinamik bir uyarı sistemi oluşturulmuştur. Bu sistem, uyarı mesajını 1 saniye sonra otomatik olarak arayüzden kaldırır (temiz UX).
Verimli Toplu Temizleme Yöntemi
Tüm todoları silme işleminde, performans açısından daha verimli kabul edilen, döngü içinde kapsayıcının ilk çocuğunu silme yöntemi kullanılmıştır
4. Arama ve Filtreleme Mantığı
Kullanıcının görevleri hızlıca bulabilmesi için, istemci tarafında çalışan dinamik bir arama/filtreleme özelliği mevcuttur.
`keyup` Olayı ile Anlık Arama
Arama kutusuna her tuş basıldığında, fonksiyon tetiklenir. Bu, kullanıcının yazdıkça sonuçları anlık olarak görmesini sağlar.
Görünürlük Yönetimi
Arama işleminde, aranan metnin görev başlığında olup olmadığı kontrol edilir. Eşleşmeyen görevler gizlenir.