Creating a simple To-Do List application using JavaScript, HTML, and CSS is a great way to learn the basics of web development. In this comprehensive guide, we'll walk through the entire process step by step, including every line of code needed. By the end, you'll have a functional To-Do List app that you can use as a foundation for more complex web projects.
Prerequisites
Before we begin, ensure you have a code editor (like Visual Studio Code) and a web browser (like Chrome) installed on your computer.
Step 1: Setting Up the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>To-Do List App</title>
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<div class="input-container">
<input type="text" id="task" placeholder="Add a new task...">
<button id="add">Add</button>
</div>
<ul id="taskList"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
Step 2: Styling with CSS (styles.css)
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
.input-container {
display: flex;
margin-bottom: 20px;
}
input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
background-color: #fff;
}
.completed {
text-decoration: line-through;
color: #888;
}
Step 3: Adding JavaScript Logic (app.js)
const taskInput = document.getElementById("task");
const addBtn = document.getElementById("add");
const taskList = document.getElementById("taskList");
// Add task
addBtn.addEventListener("click", () => {
const taskText = taskInput.value.trim();
if (taskText !== "") {
createTask(taskText);
taskInput.value = "";
}
});
// Create a new task
function createTask(text) {
const taskItem = document.createElement("li");
taskItem.innerHTML = `
<span>${text}</span>
<button class="delete">Delete</button>
`;
taskList.appendChild(taskItem);
// Delete task
const deleteBtn = taskItem.querySelector(".delete");
deleteBtn.addEventListener("click", () => {
taskItem.remove();
});
// Mark as completed
taskItem.addEventListener("click", () => {
taskItem.classList.toggle("completed");
});
}
Step 4: Testing Your To-Do List
Now, open the HTMLfile in your web browser. You'll see a simple To-Do List application with the ability to add tasks, mark them as completed, and delete them.
Congratulations! You've successfully created a basic To-Do List app using HTML, CSS, and JavaScript. You can further enhance this app by adding features like task persistence, due dates, and categories to make it even more functional and appealing.
LinkedIn Account : LinkedIn
Twitter Account: Twitter
Credit: Graphics sourced from Coding Artist
Top comments (2)
this is great👍, and we can also add animation to it for make it more lively.
Absolutely! Adding animations can make your To-Do List app even more engaging and visually appealing. It can give your users a smoother and more enjoyable experience while using the app.