How to Build a Simple To-Do List App

Keeping track of everything can be tough these days. That's why a simple to-do list app can be a lifesaver. It helps you remember what's important. Are you learning to code? Or already a pro? Either way, building a to-do list app is a great way to learn new things and get better at what you already know.

Why Make a To-Do List App?

Okay, so why even bother making one of these? Here's the deal:

It's useful! Everyone needs to keep track of stuff. So, you're making something people will actually use.
Learn new skills. You'll touch on the basics. Things like organizing data, making things look good, and handling clicks.
Boost your resume. A finished app shows you can build real things.
Make it your own. Change how it looks. Add features you want.
Learn by doing. Reading about code is one thing. Building something? That's how you really learn.

How to Build It? (Mobile App Stuff)

You have a few choices here. It depends on what you know and what you want to do. Here are some popular ways:

Make it native (iOS/Android). Use Swift for iPhones or Kotlin/Java for Android phones. It's the fastest way. But you have to learn special languages.
Cross-Platform (React Native, Flutter). Write code once, use it everywhere! (iPhone and Android). Easier, but sometimes a little slower.
Web App (HTML, CSS, JavaScript). Works in any browser. This is easy to start with. But it might not do everything a phone app can do.

For this guide, we'll make a web app with HTML, CSS, and JavaScript. It's easy for beginners!

Get Your Tools Ready

Before we code, you need a few things:

A Text Editor: This is where you write code. VS Code is good. So is Sublime Text. Even Notepad++ works.
A Web Browser: Chrome, Firefox, Safari... you need one to see your app.

Now, make a folder for your project. Inside, make three files:

index.html: The structure of your app goes here.
style.css: This makes your app look nice.
script.js: This is where the app does things.

HTML: Building the Structure (index.html)

Open index.html and paste this code:

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple To-Do List App</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>My To-Do List</h1> <div class="input-section"> <input type="text" id="taskInput" placeholder="Add a new task..."> <button id="addTaskBtn">Add Task</button> </div> <ul id="taskList"> <!-- Tasks will be added here --> </ul> </div> <script src="script.js"></script> </body> </html>

This code makes the basic parts of your app:

A <div> with class container. Holds everything!
A <h1> for the title.
An input-section:
- An <input> box with the id taskInput. Where you type new tasks.
- A <button> with the id addTaskBtn. To add tasks.
A <ul> (list) with the id taskList. Tasks show up here.
A <script> tag. Links to your JavaScript file.

CSS: Making it Look Good (style.css)

Open style.css and paste this CSS code:

css body { font-family: sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); padding: 20px; width: 500px; text-align: center; } h1 { color: #333; } .input-section { display: flex; margin-bottom: 20px; } #taskInput { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } #addTaskBtn { background-color: #4CAF50; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 16px; } #addTaskBtn:hover { background-color: #3e8e41; } #taskList { list-style: none; padding: 0; } #taskList li { padding: 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } #taskList li:last-child { border-bottom: none; } .delete-btn { background-color: #f44336; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 14px; } .delete-btn:hover { background-color: #da190b; } .completed { text-decoration: line-through; color: #aaa; }

This code styles your to-do list, including:

The page (body).
The container (.container).
The title (h1).
The input area (.input-section).
The input box (#taskInput).
The "Add Task" button (#addTaskBtn).
The task list (#taskList and #taskList li).
The delete button (.delete-btn).
Finished tasks (.completed).

JavaScript: Making it Do Stuff (script.js)

Open script.js and paste this JavaScript code:

javascript const taskInput = document.getElementById('taskInput'); const addTaskBtn = document.getElementById('addTaskBtn'); const taskList = document.getElementById('taskList'); addTaskBtn.addEventListener('click', addTask); function addTask() { const taskText = taskInput.value.trim(); if (taskText !== '') { const li = document.createElement('li'); li.innerHTML = ` <span>${taskText}</span> <button class="delete-btn">Delete</button> `; const deleteBtn = li.querySelector('.delete-btn'); deleteBtn.addEventListener('click', deleteTask); li.addEventListener('click', toggleComplete); taskList.appendChild(li); taskInput.value = ''; } } function deleteTask(event) { event.target.parentNode.remove(); } function toggleComplete(event) { event.target.classList.toggle('completed'); }

This JavaScript code does these things:

Finds the parts of your app.
Tells the "Add Task" button to run the addTask function when clicked.
The addTask function:
- Gets the task from the input box.
- Makes a new <li> (list item).
- Adds the task and a delete button to the <li>.
- Tells the delete button to run the deleteTask function when clicked.
- Tells the <li> to run the toggleComplete function when clicked.
- Adds the new <li> to the task list.
- Clears the input box.
The deleteTask function removes the task from the list.
The toggleComplete function marks tasks as finished (or unfinished).

Test It Out!

Time to see if it works! Open index.html in your browser. You should see your app. Add some tasks. Delete them. Mark them as complete. Does it all work? Great job! You built a to-do list app.

Make it Even Better! (Programming Stuff)

This is just the beginning. You can add more features:

Save your tasks. Use local storage so your list doesn't disappear when you close the browser.
Due Dates. Remind yourself when things are due.
Priorities. What's most important?
Edit Tasks. Fix mistakes.
Categories/Tags. Organize your tasks.
Drag and Drop. Move tasks around easily.
Animations. Make it look cool.
Responsive Design. Make it look good on phones too.

In Conclusion

Building a to-do list app is a fun way to learn web development. You used HTML, CSS, and JavaScript to make something useful. Now, go explore more! Add new features. Experiment. Make it your own!

Keep learning about mobile app development and app development. You can build amazing things. Have fun coding!

Howto