A To-Do List is a simple yet effective way to manage tasks. In this tutorial, we’ll create a functional To-Do List application using HTML, CSS, and JavaScript. The application allows users to add tasks dynamically, view them in a list, and delete tasks when they’re completed.
Key Features of the Application
- Add Tasks: Users can type a task in an input field and add it to the list.
- View Tasks: Tasks are displayed in a styled list format.
- Delete Tasks: Users can delete tasks with a click of a button.
Code Implementation
HTML Structure
<!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</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">To-Do List</div>
<div class="addTask">
<input type="text" placeholder="Enter Your Task" id="inputtask">
<button onclick="addTask()">Add Task</button>
</div>
<ul class="task-list" id="tasklist"></ul>
</div>
<script src="script.js"></script>
</body>
</html>CSS Styling the App
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: url('background.jpg') no-repeat center center/cover;
height: 100vh;
}
.container {
width: 30%;
background: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 20px;
}
.header {
text-align: center;
font-size: 1.8em;
font-weight: bold;
margin-bottom: 20px;
}
.addTask {
display: flex;
gap: 10px;
}
input {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
background: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #218838;
}
.task-list {
list-style: none;
padding: 0;
}
.task-list li {
display: flex;
justify-content: space-between;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
background: #f8f9fa;
}
.task-list li button {
background: #dc3545;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.task-list li button:hover {
background: #c82333;
}JavaScript Making the App Functional
function addTask() {
const input = document.getElementById('inputtask');
const taskText = input.value.trim();
if (taskText === "") {
alert("Please enter a task.");
return;
}
const taskList = document.getElementById('tasklist');
const newTask = document.createElement('li');
// Add task text
newTask.textContent = taskText;
// Create delete button
const deleteBtn = document.createElement('button');
deleteBtn.textContent = "Delete";
deleteBtn.onclick = function () {
newTask.remove();
};
newTask.appendChild(deleteBtn);
taskList.appendChild(newTask);
// Clear the input field
input.value = "";
}Explanation
- We start by creating the basic structure of the app using HTML, including the input field, add button, and task list.
- We then style the app using CSS, adding colors, fonts, and layouts to make it visually appealing.
- In the JavaScript code, we define the
addTaskfunction, which gets called when the add button is clicked. - Inside
addTask, we retrieve the input field value, trim it to remove any whitespace, and check if it’s empty. If it is, we display an alert message and return. - If the input value is valid, we create a new list item element (
li) and set its text content to the input value. - We then create a delete button element and append it to the list item. We also add an event listener to the delete button, which removes the list item when clicked.
- Finally, we append the new list item to the task list and clear the input field.
Conclusion
Creating a To-Do List app with HTML, CSS, and JavaScript enhances web development skills, teaching HTML structuring, CSS styling, JavaScript interactivity, DOM manipulation, and event handling. This beginner-friendly project is scalable, practical, and extendable with advanced features, serving as a foundation for complex web applications and front-end development proficiency.