Hi there! In this tutorial, I’ll walk you through building a simple To-Do List application using HTML, CSS, and JavaScript. By the end of this tutorial, you’ll have a fully functional To-Do list app where you can add tasks, mark them as complete, and remove them when done.
Let’s get started!
Step 1: Setting up the HTML
First, I’ll create the basic structure of the app using HTML. This is where I’ll define the elements that make up the user interface.
<!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>My To-Do List</h1>
<input type="text" id="task-input" placeholder="Enter a new task">
<button id="add-task-button">Add Task</button>
<ul id="task-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
Explanation:
- The
<input>element is where I’ll type new tasks. - The
<button>element will trigger the addition of a new task. - The
<ul>element is where the tasks will be displayed as an unordered list. - The
script.jswill hold the logic for adding, removing, and completing tasks.
Step 2: Styling the App with CSS
Now, I’ll add some basic styles to make the app look nice. I’ll use a separate CSS file (styles.css).
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f9;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
#task-input {
width: 80%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
padding: 10px;
margin: 5px 0;
background-color: #f9f9f9;
border-radius: 4px;
align-items: center;
}
li.completed {
text-decoration: line-through;
background-color: #d3ffd3;
}
.delete-btn {
background-color: #f44336;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
.delete-btn:hover {
background-color: #e53935;
}
Explanation:
- I’ve used flexbox to center the content and make the layout responsive.
- The input field and button have basic styling to make them stand out.
- Each task in the list has a small “Delete” button, which I’ll use to remove tasks.
- Tasks that are marked as completed have a line-through effect and a different background color.
Step 3: Writing the JavaScript Logic
Now for the fun part – adding functionality with JavaScript! In the script.js file, I’ll write the code to handle adding, completing, and removing tasks.
// Select the necessary elements
const taskInput = document.getElementById('task-input');
const addButton = document.getElementById('add-task-button');
const taskList = document.getElementById('task-list');
// Function to add a new task
function addTask() {
const taskText = taskInput.value.trim();
if (taskText === "") {
alert("Please enter a task!");
return;
}
const taskItem = document.createElement('li');
taskItem.textContent = taskText;
// Create a delete button for each task
const deleteButton = document.createElement('button');
deleteButton.textContent = "Delete";
deleteButton.classList.add('delete-btn');
deleteButton.onclick = () => taskItem.remove(); // Remove task when clicked
// Add the delete button to the task item
taskItem.appendChild(deleteButton);
// Toggle completed state when clicked
taskItem.onclick = () => taskItem.classList.toggle('completed');
// Add the task to the list
taskList.appendChild(taskItem);
// Clear the input field
taskInput.value = "";
}
// Event listener for the add button
addButton.addEventListener('click', addTask);
// Allow pressing Enter to add a task
taskInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
addTask();
}
});
Explanation:
- The
addTaskfunction grabs the text from the input field, checks if it’s empty, and then creates a new task item (<li>) in the list. - Each task has a “Delete” button that, when clicked, removes the task.
- Clicking on a task will toggle its
completedclass, which applies the line-through style. - I’ve added an event listener to both the “Add Task” button and the input field. If I press the Enter key, it also adds a new task.
Step 4: Testing the App
Now that the app is ready, let’s test it out! Open the index.html file in your browser. You should be able to:
- Type a task in the input field.
- Click the “Add Task” button or press Enter to add it to the list.
- Mark tasks as completed by clicking on them.
- Remove tasks by clicking the “Delete” button next to them.
Step 5: Conclusion
Congratulations! You’ve built a simple but functional To-Do list app using JavaScript, HTML, and CSS. You can easily extend this app by adding features like saving tasks to localStorage so they persist across page reloads, or adding due dates and priorities.
Feel free to experiment with the design and functionality, and most importantly, have fun coding!