Skip to content

Latest commit

 

History

History
116 lines (88 loc) · 3.63 KB

README.md

File metadata and controls

116 lines (88 loc) · 3.63 KB

📝 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