“Framework Yok, Bahane Yok” 😎
To-Do App yapmak JavaScript dünyasında bir inisiyasyon törenidir.
Bunu yapan kişi artık şunu diyebilir:
“Ben JavaScript’le gerçekten bir şey yaptım.” 👑
Çünkü bu mini uygulama sana tek tek şunları öğretir:
- DOM nedir, nasıl tutulur
- Event’ler nasıl çalışır
- Kullanıcıdan veri alma
- Liste ekleme / silme
- Fonksiyon mantığı
- Temiz kod alışkanlığı
Yani…
Küçük proje, büyük bilgi.
🧠 Önce Mantık: To-Do App Beyni Nasıl Çalışır?
Kod yazmadan önce aklımızı yazıyoruz 🧠✍️
Uygulamanın akışı şu:
1️⃣ Kullanıcı input’a görev yazar
2️⃣ “Ekle” der (buton veya Enter)
3️⃣ Görev listeye düşer
4️⃣ Görev silinebilir
5️⃣ Kullanıcı kendini üretken hisseder 😌
İşte bu kadar.
Abartmaya gerek yok, JS zaten seviyor bizi 😄
🧱 HTML – İskeleti Kuralım (Ev Yapıyoruz)
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<title>To-Do App</title>
</head>
<body>
<h1>📝 To-Do List</h1>
<input
type="text"
id="todoInput"
placeholder="Bir görev yaz..."
/>
<button id="addBtn">Ekle</button>
<ul id="todoList"></ul>
<script src="script.js"></script>
</body>
</html>
🧠 Bu HTML Ne Yapıyor?
input→ kullanıcı yazı yazıyorbutton→ “ekle” aksiyonuul→ görevlerin park edeceği yerscript.js→ beynimiz 🧠
📌 İpucu:
HTML sade olursa, JS rahat eder.
🎯 JavaScript Başlıyor: DOM’u Yakala (Av Başlasın 🏹)
const input = document.getElementById("todoInput");
const addBtn = document.getElementById("addBtn");
const list = document.getElementById("todoList");
🧠 Burada Ne Yaptık?
- HTML’deki elemanları JavaScript’e tanıttık
- Artık JS diyor ki: “Tamam, ben bunlarla konuşabilirim.”
📌 Altın kural:
DOM’a dokunacaksan → önce yakala
➕ Görev Ekleme Fonksiyonu
function addTodo() {
const todoText = input.value.trim();
if (todoText === "") {
alert("Boş görev olmaz 😄");
return;
}
const li = document.createElement("li");
li.textContent = todoText;
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "❌";
deleteBtn.addEventListener("click", function () {
li.remove();
});
li.appendChild(deleteBtn);
list.appendChild(li);
input.value = "";
}
🔍 Kod Kod Açalım (Sindire Sindire 🍽️)
input.value.trim()
- Kullanıcının yazdığı metni alır
trim()→ baştaki/sondaki boşlukları siler- Sadece boşluk girilmesini engeller 😎
Boş Kontrolü (Hayat Kurtarır)
if (todoText === "") {
alert("Boş görev olmaz😄");
return;
}
📌 Neden önemli?
Kullanıcı saçma şeyler yapar.
Kod önlem alır.
Liste Elemanı Oluşturma
const li = document.createElement("li");
li.textContent = todoText;
🧠
- HTML yazmadık
- JS ile canlı element oluşturduk
- DOM manipülasyonu 💥
Silme Butonu (Küçük Ama Güçlü)
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "❌";
Silme Event’i (Büyü 🪄)
deleteBtn.addEventListener("click", function () {
li.remove();
});
🧠
- Butona tıkla
- Görev uçsun 🕊️
remove()= DOM’dan tamamen siler
Listeye Ekle & Input Temizle
li.appendChild(deleteBtn);
list.appendChild(li);
input.value = "";
📌 Kullanıcı deneyimi = +10 puan
🖱️ Butona Basınca Çalışsın
addBtn.addEventListener("click", addTodo);
🧠
- “Buna basılırsa → bunu yap”
- Event mantığının özü
⌨️ BONUS: Enter’a Basınca da Ekle (Senior Detayı 😏)
input.addEventListener("keydown", function (e) {
if (e.key === "Enter") {
addTodo();
}
});
📌 Küçük dokunuş
📌 Büyük fark
📌 Kullanıcı mutlu 🥹
🧠 Şu Ana Kadar FARK ETMEDEN Öğrendiklerin
Sen şu an:
✅ DOM nedir biliyorsun
✅ Event listener kullandın
✅ Element yarattın
✅ Fonksiyon yazdın
✅ Kullanıcıdan veri aldın
✅ Silme / ekleme yaptın
Yani…
Gerçek JavaScript öğrendin.
🎨 Mini Geliştirme Fikirleri (Level Atlama 🎮)
Bunu şuralara taşıyabilirsin:
- ✔️ Tamamlandı işaretleme
- 💾 LocalStorage ile kayıt
- 🎨 CSS animasyon
- 🌙 Dark mode
- 📊 Sayaç (kaç görev var?)
Her biri ayrı blog yazısı olur 😏
🧠 Süper İpuçları (Kaydet ⭐)
- Vanilla JS → temeli çelik yapar
- Küçük projeler → büyük özgüven
- “Anladım” değil → “yaptım” de
- Bu projeyi yapan React’te zorlanmaz
💬 Kapanış (Kalpten Kalbe 💙)
Bu To-Do App küçük görünüyor olabilir…
ama JavaScript yolunda çok büyük bir adımdır.
