📝 JavaScript ile Todo List Mantığı

Frameworksüz, Saf JavaScript, Beyni Açan Versiyon

Bir yazılımcının hayatında bazı kaçınılmaz gerçekler vardır:

• Console.log her yerdedir
• Bir gün mutlaka undefined ile kavga edersin
• Ve…
  👉 En az bir kere Todo List yaparsın

Ama bu yazı:
❌ “kopyala–yapıştır Todo” değil
❌ “framework arkasına saklanma” değil
✅ JavaScript’in mantığını gerçekten öğreten bir rehber

🧠 1. Todo List = Küçük Uygulama, Büyük Öğreti

Todo List küçük görünür ama içinde şunlar gizlidir:

• Kullanıcıdan veri alma
• Veriyi hafızada tutma (state)
• Ekranı güncelleme (render)
• Olayları yakalama (events)

Yani aslında Todo List şudur:

“Küçük bir uygulamayla, JavaScript’in kalbini görmek”

🧩 2. Önce Mantık: Todo List Nasıl Çalışır?

Kod yazmadan önce düşünelim 🧠

Bir Todo List şunları yapar:

1️⃣ Kullanıcı görev yazar
2️⃣ “Ekle” der
3️⃣ Görev listeye girer
4️⃣ İsterse tamamlar
5️⃣ İsterse siler

JavaScript tarafında ise şu döngü vardır:

KULLANICI → EVENT → STATE → RENDER → EKRAN

Bunu anladıysan, yarı yoldasın.

🧱 3. HTML: Sahneyi Kuralım (Ne Az, Ne Fazla)

HTML sadece iskelettir.
Zeki olan işi JavaScript’e bırakır 😄

<input type="text" id="todoInput" placeholder="Bir görev yaz..." />
<button id="addBtn">Ekle</button>

<ul id="todoList"></ul>

🧠 Burada ne var?

• input → görev yazma alanı
• button → “olayı başlat” butonu
• ul → görevlerin sergilendiği vitrin

HTML sade olursa:

• JS rahat çalışır
• Kod okunur
• Debug kolay olur

📦 4. State Kavramı: Todo’ları Nereye Koyacağız?

İşte en kritik nokta 🔥

Todo’ları DOM’un içinde değil,
JavaScript’in hafızasında tutacağız.

const todos = [];

❓ Neden array?

• Sıralı
• Dinamik
• Kolay yönetilir

❓ Neden const?

• Array hep aynı referans
• Yanlışlıkla todos = null olmaz
• Güvenli kod

📌 Altın kural:

DOM geçicidir, state kalıcıdır.

🎣 5. DOM Elemanlarını Yakalama (JS’nin Gözü Kulağı)

JavaScript’e diyoruz ki:

“Şu elemanlarla konuşacağız.”

const input = document.getElementById("todoInput");
const button = document.getElementById("addBtn");
const list = document.getElementById("todoList");

Artık:

• input.value → kullanıcının yazdığı şey
• list → görevlerin evi

➕ 6. Todo Ekleme: Olayların Başladığı Yer

Şimdi aksiyon 🎬

button.addEventListener("click", () => {
  const todoText = input.value.trim();

  if (todoText === "") return;

  todos.push({
    text: todoText,
    completed: false
  });

  input.value = "";
  renderTodos();
});

🧠 Satır satır eğlenceli açıklama:

addEventListener("click")

➡ Kullanıcı butona bastı
➡ JS: “Tamam, yakaladım”

input.value.trim()

➡ Başındaki ve sonundaki boşlukları sil
➡ “ ” yazıp todo eklenmesin

if (todoText === "") return;

➡ Boş görev = çöp
➡ UX kurtuldu 🎉

todos.push({ ... })

➡ Artık string değil, object tutuyoruz
➡ İleride işimiz kolaylaşacak

renderTodos();

➡ “Ekranı güncelle” komutu

🔁 7. Render Mantığı: Ekranı Baştan Çiz (En Önemli Bölüm)

Todo List’lerde en büyük hata şudur:

“DOM’u tek tek kurcalamak”

Biz onu yapmıyoruz 😎
Biz baştan çiziyoruz.

function renderTodos() {
  list.innerHTML = "";

  todos.forEach((todo, index) => {
    const li = document.createElement("li");
    li.textContent = todo.text;

    if (todo.completed) {
      li.style.textDecoration = "line-through";
    }

    li.addEventListener("click", () => {
      toggleTodo(index);
    });

    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "❌";

    deleteBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      deleteTodo(index);
    });

    li.appendChild(deleteBtn);
    list.appendChild(li);
  });
}

🧠 Burada neler oluyor?

• innerHTML = "" → ekran sıfırlanır
• forEach → her todo ekrana çizilir
• index → hangi todo olduğunu biliriz
• Click → tamamlandı / silindi

📌 Bu mantık:

• React
• Vue
• Angular

mantığının atasıdır.

❌ 8. Todo Silme Mantığı (Net ve Temiz)

function deleteTodo(index) {
  todos.splice(index, 1);
  renderTodos();
}

🧠 splice ne yapar?

• index’ten başlar
• 1 eleman siler
• Array güncellenir

Sonra:
➡ tekrar render
➡ ekran güncel

✅ 9. Todo Tamamlama Mantığı (UX Seviye Atlama)

function toggleTodo(index) {
  todos[index].completed = !todos[index].completed;
  renderTodos();
}

🧠 Mantık çok basit:

• true → false
• false → true

Ama etkisi büyük:

• Görsel geri bildirim
• Kullanıcı mutlu
• Uygulama “canlı” hissi verir

💡 10. Profesyonel İpuçları (Altın Değerinde)

✔ State’i DOM’da tutma
✔ Render fonksiyonunu merkez yap
✔ Küçük fonksiyonlar yaz
✔ “Bir şey değiştiyse → render et”
✔ Önce JS, sonra framework

🧠 11. Bu Projeden Gerçekten Ne Öğrendin?

Bu Todo List sana şunları öğretti:

• DOM manipulation
• Event handling
• State yönetimi
• Array + object kullanımı
• UI ↔ data senkronizasyonu

Bu bilgilerle:

• React öğrenmek kolaylaşır
• Debug yeteneğin artar
• “Junior” reflekslerden kurtulursun

🚀 Son Söz

Frameworksüz Todo List yapmak:

• zor değil
• öğretici
• geliştirici

Ve sana şunu dedirtir:

“Ben JavaScript’i gerçekten anladım.”