Building Your First Interactive To-Do List App with JavaScript
Learn how to create a simple and interactive to-do list app using JavaScript, HTML, and CSS. Perfect for beginners looking to practice JavaScript basics.
Creating a to-do list app is a great way to practice JavaScript, HTML, and CSS fundamentals. In this tutorial, you'll build a simple interactive to-do list that allows users to add tasks, mark them as done, and remove tasks.
Let's start by creating the basic HTML structure for our to-do list app.
<!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>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px auto;
max-width: 400px;
padding: 20px;
background-color: #f9f9f9;
}
h1 {
text-align: center;
}
input[type="text"] {
width: 70%;
padding: 10px;
margin-right: 10px;
font-size: 16px;
}
button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
ul {
list-style-type: none;
padding-left: 0;
margin-top: 20px;
}
li {
background-color: #fff;
padding: 12px;
margin-bottom: 10px;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
li.completed {
text-decoration: line-through;
color: gray;
}
.remove-btn {
background-color: transparent;
border: none;
color: #c00;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<h1>My To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task..." />
<button id="addBtn">Add</button>
<ul id="taskList"></ul>
<script src="app.js"></script>
</body>
</html>In this HTML, we have a text input where users can type their tasks, an Add button, and an unordered list to display tasks. Now let's write the JavaScript to add interactivity.
The JavaScript will do the following: - Listen for clicks on the Add button - Create a new list item with the task entered - Allow users to mark tasks as completed by clicking on them - Add a remove button to delete tasks
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
// Function to add a new task
function addTask() {
const taskText = taskInput.value.trim();
if (taskText === '') {
alert('Please enter a task!');
return;
}
// Create list item
const li = document.createElement('li');
li.textContent = taskText;
// Toggle completion on click
li.addEventListener('click', () => {
li.classList.toggle('completed');
});
// Create remove button
const removeBtn = document.createElement('button');
removeBtn.textContent = 'X';
removeBtn.className = 'remove-btn';
// Remove task on button click
removeBtn.addEventListener('click', (e) => {
e.stopPropagation(); // Prevent li click event
taskList.removeChild(li);
});
li.appendChild(removeBtn);
taskList.appendChild(li);
taskInput.value = '';
taskInput.focus();
}
// Add task on button click
addBtn.addEventListener('click', addTask);
// Add task on pressing Enter key
taskInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
addTask();
}
});Here's what happens in the JavaScript code: - We grab references to input, button, and task list elements. - The addTask function checks if the input is empty. If not, it creates a new
This simple app is a good stepping stone to learning about DOM manipulation and event handling in JavaScript. You can expand it further by saving tasks to local storage or adding task priorities. But for now, enjoy your fully functional to-do list!