Creating a simple To-Do App using HTML,CSS and JAVASCRIPT
Emma Chris# Create a Simple To-Do App Using HTML, CSS & JavaScript
A **To-Do List App** is one of the best beginner projects to practice **DOM manipulation** in JavaScript. In this tutorial, we’ll build a simple task manager where users can:
- ✔️ Add new tasks
- ✔️ Mark tasks as completed
- ✔️ Delete tasks
By the end, you’ll understand **event listeners, DOM manipulation, and creating interactive apps**!
---
## 🧩 1. Folder Structure
```bash
todo-app/
│
├── index.html
├── style.css
└── script.js
---
🧱 2. HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<div class="input-container">
<input type="text" id="task-input" placeholder="Enter a new task">
<button id="add-task">Add</button>
</div>
<ul id="task-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
---
🎨 3. CSS (style.css)
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
text-align: center;
}
.container {
width: 300px;
margin: 50px auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.input-container {
display: flex;
gap: 10px;
}
input {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 12px;
background: #28a745;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background: #218838;
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
background: #fff;
padding: 10px;
margin-top: 5px;
border-radius: 4px;
border: 1px solid #ddd;
}
li.completed {
text-decoration: line-through;
opacity: 0.7;
}
.delete-btn {
background: #dc3545;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
}
.delete-btn:hover {
background: #c82333;
}
---
⚙️ 4. JavaScript (script.js)
document.addEventListener("DOMContentLoaded", () => {
const taskInput = document.getElementById("task-input");
const addTaskBtn = document.getElementById("add-task");
const taskList = document.getElementById("task-list");
function addTask() {
const taskText = taskInput.value.trim();
if (taskText === "") return;
const li = document.createElement("li");
li.textContent = taskText;
li.addEventListener("click", () => {
li.classList.toggle("completed");
});
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "X";
deleteBtn.classList.add("delete-btn");
deleteBtn.addEventListener("click", () => {
li.remove();
});
li.appendChild(deleteBtn);
taskList.appendChild(li);
taskInput.value = "";
}
addTaskBtn.addEventListener("click", addTask);
taskInput.addEventListener("keypress", (e) => {
if (e.key === "Enter") addTask();
});
});
---
✅ How It Works
1. The user types a task in the input box and clicks “Add”
2. The task is added to the list
3. Clicking the task crosses it out (mark as complete)
4. Clicking the "X" button deletes the task
---
🚀 Conclusion & Next Steps
Congratulations! You’ve built a fully functional To-Do App using HTML, CSS, and JavaScript.
🔜 Coming Next:
Save tasks using localStorage
Add themes and transitions
Build more projects like a calculator or note app
---
Follow me for more beginner-friendly tutorials and let's grow together in the coding journey!
Subscribe to my newsletter
Read articles from Emma Chris directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Emma Chris
Emma Chris
Student & self-taught coder sharing HTML, CSS, and JavaScript tutorials for beginners.