Create a Simple To-Do List App Using HTML, CSS & JavaScript
Creating a simple to-do list application is a great project for beginners to learn JavaScript. It covers the basics of manipulating the DOM, handling events, and managing state within an application. In this tutorial, we will walk through the process of creating a basic to-do list app using HTML, CSS, and JavaScript.
Step 1: Set Up the HTML Structure
First, we need to create 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>Simple To-Do List App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="todo-container">
<h1>To-Do List</h1>
<input type="text" id="todo-input" placeholder="Add a new task">
<button id="add-todo-button">Add</button>
<ul id="todo-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Style the App with CSS
Next, let’s add some basic styles to make our app look nice.
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.todo-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input[type="text"] {
width: calc(100% - 22px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 3px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f9f9f9;
margin: 5px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
display: flex;
justify-content: space-between;
align-items: center;
}
li.completed {
text-decoration: line-through;
color: #aaa;
}
button.delete {
background-color: #dc3545;
color: #fff;
border: none;
padding: 5px;
cursor: pointer;
}
button.delete:hover {
background-color: #c82333;
}
Step 3: Add Functionality with JavaScript
Finally, let’s add the JavaScript to make our to-do list functional.
document.getElementById('add-todo-button').addEventListener('click', addTodo);
document.getElementById('todo-input').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addTodo();
}
});
function addTodo() {
const todoInput = document.getElementById('todo-input');
const todoText = todoInput.value.trim();
if (todoText !== '') {
const todoList = document.getElementById('todo-list');
const listItem = document.createElement('li');
const deleteButton = document.createElement('button');
listItem.textContent = todoText;
deleteButton.textContent = 'Delete';
deleteButton.classList.add('delete');
deleteButton.addEventListener('click', function() {
todoList.removeChild(listItem);
});
listItem.appendChild(deleteButton);
listItem.addEventListener('click', function() {
listItem.classList.toggle('completed');
});
todoList.appendChild(listItem);
todoInput.value = '';
}
}
Conclusion :
In this blog post, we created a simple to-do list application using HTML, CSS, and JavaScript. This project is a great way for beginners to get hands-on experience with JavaScript and learn how to manipulate the DOM, handle events, and manage application state.
Experiment with this code, add more features, and make it your own. Happy coding!
