Introduction
Building a To-Do List App is a great project for beginner web developers. It teaches you how to manipulate the DOM (Document Object Model), use JavaScript events, and implement basic logic in an app. In this article, we’ll walk through every step of building this app, explaining each line of code in detail. Whether you’re just starting out or have a bit of experience with HTML, CSS, and JavaScript, this guide will help you understand the core concepts and get you building your own projects.
What We Will Build
Our To-Do List App will have the following features:
- Add tasks to the list.
- Mark tasks as completed.
- Delete tasks from the list.
- The app will be styled simply using CSS to look nice.
Step 1: Setting Up Your HTML Structure
We begin by creating the basic structure of our web page. This will include an input field for entering tasks, a button to add tasks, and a list where tasks will be displayed.
HTML CODE:
<!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="styles.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task">
<button id="addTaskBtn">Add Task</button>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
Explanation:
- HTML Tags:
<html>,<head>, and<body>are the basic building blocks of any HTML document.- Inside the
<head>, we set the character encoding and viewport properties to make the app responsive. - The
<link>tag links to an external CSS file (styles.css) for styling our page. - Inside the
<body>, we have a<div>with a class ofcontainer. This will hold all our elements and ensure our app is well-organized. - The
<input>tag creates a text field where users can type in tasks. - The
<button>tag is used to add tasks to the list when clicked. - The
<ul>element will hold the list of tasks (<li>elements).
Step 2: Styling with CSS
We will now style the page to make it look more visually appealing. The design will be simple, but we will focus on making the To-Do List neat and easy to use.
CSS Code:
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Container Styling */
.container {
background-color: white;
border-radius: 8px;
padding: 20px;
width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Header Styling */
h1 {
text-align: center;
color: #333;
}
/* Input Field and Button Styling */
#taskInput {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
#addTaskBtn {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#addTaskBtn:hover {
background-color: #45a049;
}
/* Task List Styling */
#taskList {
list-style-type: none;
padding: 0;
}
#taskList li {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f9f9f9;
padding: 10px;
margin: 5px 0;
border-radius: 4px;
}
.completed {
text-decoration: line-through;
color: grey;
}
button.delete {
background-color: red;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
button.delete:hover {
background-color: darkred;
}
Explanation:
- Reset CSS: The
* { margin: 0; padding: 0; }resets all the margins and paddings to avoid inconsistencies across browsers. - Body Styling: The
bodyis styled to make the app center-align on the screen, with a light background color. - Container Styling: The
.containerclass styles the box that holds the input field, button, and list. It has a white background and rounded corners. - Header Styling: The heading (
h1) is centered and colored dark gray. - Input and Button Styling: Both the input and button elements are styled to look uniform. The button changes color when hovered.
- Task List Styling: The list items (
li) are styled with padding, background color, and rounded corners. Tasks that are marked as completed are crossed out with thecompletedclass.
Step 3: Adding Interactivity with JavaScript
Finally, we’ll add the JavaScript to make the app functional. This includes adding tasks to the list, marking them as completed, and deleting them.
JavaScript Code:
// Access DOM elements
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');
// Function to create a new task
function createTask(taskContent) {
const taskItem = document.createElement('li');
taskItem.textContent = taskContent;
// Create a delete button for each task
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.classList.add('delete');
deleteBtn.onclick = () => {
taskItem.remove();
};
// Append delete button to task item
taskItem.appendChild(deleteBtn);
// Add event listener to mark task as completed
taskItem.onclick = () => {
taskItem.classList.toggle('completed');
};
// Append task item to task list
taskList.appendChild(taskItem);
}
// Add task when button is clicked
addTaskBtn.onclick = () => {
const taskContent = taskInput.value.trim();
if (taskContent) {
createTask(taskContent);
taskInput.value = ''; // Clear the input field
}
};
// Add task when Enter key is pressed
taskInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
addTaskBtn.click();
}
});
Explanation:
- Accessing DOM Elements:
- We get references to the input field (
taskInput), button (addTaskBtn), and the task list (taskList) usingdocument.getElementById().
- We get references to the input field (
- Creating Tasks:
- The
createTask()function is responsible for creating new tasks. It takes a string (taskContent) as an argument, creates a new<li>element, and adds the task text.
- The
- Delete Button:
- A delete button is created for each task using
document.createElement('button'). The button is styled and has anonclickevent that removes the task item when clicked.
- A delete button is created for each task using
- Mark as Completed:
- We add an
onclickevent to each task item (taskItem) that toggles thecompletedclass, which crosses out the task when clicked.
- We add an
- Add Task on Button Click or Enter Key:
- The
addTaskBtn.onclickfunction adds a new task when the button is clicked. ThetaskInput.value.trim()makes sure the task text isn’t empty. - We also add an event listener for the Enter key so users can add tasks by pressing Enter.
- The
Conclusion
Congratulations! You’ve successfully built a fully functional To-Do List App with HTML, CSS, and JavaScript. Along the way, you’ve learned essential skills like manipulating the DOM, handling user interactions, and adding basic logic to an app. This project is not only a great way to practice your coding skills but also helps you understand the core concepts of web development.
If you found this tutorial helpful or have any questions, feel free to leave a comment below! I’d love to hear about your experience, any challenges you faced, or what you’d like to learn next. Your feedback is always appreciated, and if you’re interested in more beginner-friendly tutorials, don’t forget to subscribe and check back for more content.
Happy coding!