“No Frameworks, No Excuses” 😎
Building a To-Do App is an initiation ritual in the JavaScript world.
Anyone who builds one can proudly say:
“I actually built something with JavaScript.” 👑
Because this tiny app teaches you, step by step:
- What the DOM is and how to control it
- How events work
- How to get input from users
- How to add / remove list items
- How functions actually work
- Clean code habits
So yeah…
Small project, huge knowledge.
🧠 First the Logic: How Does a To-Do App Think?
Before writing code, we write thoughts 🧠✍️
Here’s the app flow:
1️⃣ User types a task into the input
2️⃣ Clicks “Add” (or presses Enter)
3️⃣ Task appears in the list
4️⃣ Task can be deleted
5️⃣ User feels productive 😌
That’s it.
No drama. JavaScript already loves us 😄
🧱 HTML – Let’s Build the Skeleton (We’re Building a House 🏠)
<!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="Write a task..."
/>
<button id="addBtn">Add</button>
<ul id="todoList"></ul>
<script src="script.js"></script>
</body>
</html>
🧠 What Does This HTML Do?
input→ user types a taskbutton→ “add task” actionul→ parking lot for tasksscript.js→ the brain 🧠
📌 Tip:
The simpler your HTML, the happier your JavaScript.
🎯 JavaScript Begins: Grab the DOM (The Hunt Starts 🏹)
const input = document.getElementById("todoInput");
const addBtn = document.getElementById("addBtn");
const list = document.getElementById("todoList");
🧠 What Did We Do?
- Introduced HTML elements to JavaScript
- Now JS says:
“Alright, I can talk to these.”
📌 Golden rule:
If you’re touching the DOM → grab it first.
➕ Add Task Function (The Heart Beats Here ❤️)
function addTodo() {
const todoText = input.value.trim();
if (todoText === "") {
alert("No empty tasks, love 😄");
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 = "";
}
🔍 Let’s Break It Down (Nice and Slow 🍽️)
input.value.trim()
- Gets user input
trim()removes extra spaces- Prevents “just spaces” tasks 😎
Empty Check (Life Saver)
if (todoText === "") {
alert("No empty tasks, love 😄");
return;
}
📌 Why important?
Users do weird things.
Code protects itself.
Creating the List Item
const li = document.createElement("li");
li.textContent = todoText;
🧠
- No HTML written
- Created live elements with JS
- DOM manipulation 💥
Delete Button (Small but Mighty)
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "❌";
Delete Event (Actual Magic 🪄)
deleteBtn.addEventListener("click", function () {
li.remove();
});
🧠
- Click button
- Task disappears 🕊️
remove()= deletes from DOM completely
Add to List & Clear Input
li.appendChild(deleteBtn);
list.appendChild(li);
input.value = "";
📌 User experience = +10 points
🖱️ Run When Button Is Clicked
addBtn.addEventListener("click", addTodo);
🧠
- “If this is clicked → do this”
- Core event logic
⌨️ BONUS: Add with Enter Key (Senior Detail 😏)
input.addEventListener("keydown", function (e) {
if (e.key === "Enter") {
addTodo();
}
});
📌 Small touch
📌 Big difference
📌 Happy user 🥹
🧠 What You Learned (Without Even Noticing)
You now:
✅ Understand the DOM
✅ Used event listeners
✅ Created elements dynamically
✅ Wrote functions
✅ Took user input
✅ Added & removed elements
Which means…
You learned real JavaScript.
🎨 Mini Upgrade Ideas (Level Up 🎮)
Take this project further:
✔️ Mark tasks as completed
✔️ Save with LocalStorage
✔️ CSS animations
✔️ Dark mode
✔️ Task counter
Each one = a new blog post 😏
🧠 Super Tips (Save These ⭐)
- Vanilla JS → builds rock-solid foundations
- Small projects → big confidence
- Say “I built it”, not “I kind of get it”
- If you can do this, React won’t scare you
💬 Closing (From the Heart 💙)
This To-Do App may look small…
but it’s a huge step on your JavaScript journey 🚀✨
