📝 Modern Todo List Uygulaması

JavaScript DOM manipülasyonu ve modern web teknolojilerini öğrenmek için geliştirilmiş, minimalist tasarıma sahip bir todo list uygulaması. Canlı demo linki: https://engincan-todo-app.netlify.app/

✨ Özellikler

• Modern ve Minimalist Tasarım

  • Özel renk paleti: #A59D84, #C1BAA1, #D7D3BF, #ECEBDE (https://colorhunt.co/)
  • Yuvarlatılmış köşeler ve yumuşak gölgeler
  • Responsive tasarım (mobil uyumlu)

• Görev Yönetimi

  • Görev ekleme ve silme
  • Görevleri tamamlandı olarak işaretleme
  • Toplu görev silme özelliği

• Filtreleme Sistemi

  • Tüm görevleri görüntüleme
  • Sadece tamamlanmış görevleri görüntüleme
  • Sadece tamamlanmamış görevleri görüntüleme

• Motivasyon Sistemi

  • Görev eklerken motivasyon mesajları
  • Görev tamamlandığında başarı mesajları
  • Boş liste durumunda cesaretlendirici mesajlar

• Veri Saklama

  • LocalStorage ile görevleri otomatik kaydetme
  • Sayfa yenilendiğinde görevleri koruma

🎯 Kullanılan JavaScript Özellikleri ve Öğrenme Hedefleri

DOM Manipülasyonu

• querySelector ve querySelectorAll ile element seçimi
• createElement ile dinamik element oluşturma
• appendChild ve remove ile DOM yönetimi
• Event listener'lar (addEventListener)
• Class manipülasyonu (classList.add, classList.remove, classList.toggle)
• Attribute yönetimi (setAttribute, getAttribute, hasAttribute)
• Element içerik yönetimi (textContent, innerHTML)

Event Handling

• Form submit eventi (submit)
• Tıklama eventi (click)
• Klavye eventleri (keydown)
• Event delegation pattern kullanımı
• Event nesnesi özellikleri (preventDefault, target)

Modern JavaScript (ES6+) Özellikleri

• Arrow functions
• Template literals
• Destructuring assignment
• Spread operator
• Local storage API kullanımı
• setTimeout ile asenkron işlemler
• Modern array metodları (forEach, map, filter)

Veri Yönetimi

• LocalStorage API (setItem, getItem, removeItem)
• JSON veri formatı (JSON.stringify, JSON.parse)
• Veri modeli oluşturma ve yönetimi
• State management prensipleri

DOM Animasyonları

• CSS transitions
• Transform özellikleri
• Opacity animasyonları
• Smooth scrolling

🚀 Kurulum

1. Projeyi klonlayın:

   git clone https://github.com/engincanaraz/todo-list-app.git

2. Proje dizinine gidin:

   cd todo-list-app

3. index.html dosyasını bir web tarayıcısında açın.

💻 Kullanım

1. Görev Ekleme

   • "Yeni bir hedef belirle..." alanına görev metnini yazın
   • Enter tuşuna basın veya "+" butonuna tıklayın

2. Görev Tamamlama

   • Görevin yanındaki checkbox'ı işaretleyin
   • Tamamlanan görevler otomatik olarak işaretlenir

3. Görev Silme

   • Her görevin sağında bulunan çöp kutusu ikonuna tıklayın
   • Tüm görevleri silmek için "Temiz Bir Başlangıç" butonunu kullanın

4. Görevleri Filtreleme

   • "Tümü" butonu: Bütün görevleri gösterir
   • "Tamamlanmış" butonu: Sadece tamamlanan görevleri gösterir
   • "Tamamlanmamış" butonu: Sadece tamamlanmayan görevleri gösterir

📞 İletişim

LinkedIn: https://www.linkedin.com/in/engincanaraz E-posta: [email protected]

🙏 Teşekkürler

• MDN Web Docs - Kapsamlı JavaScript dokümantasyonu için
• Bootstrap - Harika UI framework'ü için
• Font Awesome - Güzel ikonlar için
• Google Fonts - Typography için