Why Build a JavaScript To-Do App?
Okay, let’s get real. We’ve all seen a million to-do apps out there, right? But building one yourself? That’s a whole different ballgame. It’s like cooking your favorite meal from scratch instead of grabbing takeout. You get to know every ingredient, tweak the flavors, and—bonus—you actually learn some tasty tech skills along the way.
Plus, a to-do app is the perfect project if you’re just stepping into JavaScript or want a clean way to sharpen your front-end fundamentals. It’s not overwhelming, but it’s not trivial either. It’s like the Goldilocks of beginner projects—just right.
What You’ll Need Before We Dive In
Before we roll up our sleeves, here’s the setup checklist:
- A basic text editor—VS Code, Sublime, whatever floats your boat.
- A modern browser (Chrome, Firefox, Safari) for testing.
- Familiarity with HTML, CSS, and JavaScript basics (don’t worry, I’ll guide you gently).
Got that? Good. Let’s dive in.
Step 1: Setting Up Your HTML Skeleton
Think of HTML as the bones of your app. We need a simple structure—a place to type tasks, a button to add them, and a spot to see your list grow like a good old plant.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>To-Do App</title></head><body> <div id="app"> <h1>My To-Do List</h1> <input type="text" id="todo-input" placeholder="Add a new task..." /> <button id="add-btn">Add</button> <ul id="todo-list"></ul> </div></body></html>Simple, right? That input box is where the magic starts.
Step 2: Styling With Some Basic CSS
Okay, this isn’t a design blog, but let’s not make it look like a ’90s website either. A little color, spacing, and font love goes a long way.
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f4f8; display: flex; justify-content: center; padding: 50px;}#app { background: white; padding: 20px 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); width: 350px;}input[type='text'] { width: 70%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;}button { padding: 11px 20px; margin-left: 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;}button:hover { background-color: #0056b3;}ul { list-style: none; padding-left: 0; margin-top: 20px;}li { background-color: #e9ecef; padding: 10px; margin-bottom: 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;}li.completed { text-decoration: line-through; color: #6c757d;}Trust me, this little bit of CSS makes the app feel inviting without distracting from functionality.
Step 3: Crafting the JavaScript Logic
Now, the heartbeat of the app. This is where we tell the browser what to do when you add a task, mark it done, or decide to toss it out.
First, grab your elements:
const input = document.getElementById('todo-input');const addBtn = document.getElementById('add-btn');const list = document.getElementById('todo-list');Next, let’s set up an event listener on the add button. When clicked, it’ll grab the input value, check if it’s not empty, then create a new list item.
addBtn.addEventListener('click', () => { const task = input.value.trim(); if (!task) return alert('Please enter a task!'); addTask(task); input.value = '';});Notice the trim()? That’s to avoid empty spaces sneaking in. Ever tried adding a blank task? Yeah, not fun.
Here’s the addTask function, which builds the list item and appends it:
function addTask(task) { const li = document.createElement('li'); li.textContent = task; // Add a click event to toggle completion li.addEventListener('click', () => { li.classList.toggle('completed'); }); // Add a double-click event to remove the task li.addEventListener('dblclick', () => { list.removeChild(li); }); list.appendChild(li);}Simple, elegant, and with a pinch of interactivity. Click to cross off, double-click to delete. Try it out — it feels surprisingly satisfying.
Step 4: Wrapping It Up With a Few Extras
Sure, our app works. But it’s pretty barebones. Let’s talk about adding localStorage support so your tasks stick around after refreshing.
At the top, declare a function to save the current tasks:
function saveTasks() { const tasks = []; document.querySelectorAll('#todo-list li').forEach(li => { tasks.push({ text: li.textContent, completed: li.classList.contains('completed') }); }); localStorage.setItem('tasks', JSON.stringify(tasks));}Then, update addTask and the event listeners to call saveTasks() whenever something changes:
function addTask(task, completed = false) { const li = document.createElement('li'); li.textContent = task; if (completed) li.classList.add('completed'); li.addEventListener('click', () => { li.classList.toggle('completed'); saveTasks(); }); li.addEventListener('dblclick', () => { list.removeChild(li); saveTasks(); }); list.appendChild(li); saveTasks();}Finally, when the page loads, we want to pull saved tasks back out and display them:
window.addEventListener('load', () => { const savedTasks = JSON.parse(localStorage.getItem('tasks')) || []; savedTasks.forEach(task => addTask(task.text, task.completed));});Voila! Now your to-dos survive the dreaded page refresh. It’s a small thing, but it makes a big difference.
Some Final Thoughts (and a Quick Story)
Building this app took me back to my early coding days—scratching my head over how to handle state, juggling DOM elements like a circus act, and realizing that sometimes the simplest projects teach the deepest lessons.
Ever had that moment where you think, “I should just use a framework for this,” but then you decide to wrestle with vanilla JS anyway? Yeah, me too. It’s like learning to ride a bike without training wheels. A bit scary, but oh so rewarding when you finally cruise.
If you’ve stuck with me this far, I hope you’ll give this a whirl. Tweak it. Break it. Build on it. And if you hit a snag, remember: every bug is just a riddle waiting for a clever solution.
So… what’s your next move? Maybe add editing capabilities? Or migrate it into React? The world’s your oyster.
