This content originally appeared on DEV Community and was authored by Muhammad Atif Latif
In this post, we’ll create a simple To-Do List application using JavaScript. This app will allow users to add, remove, and mark tasks as complete.
Features of the To-Do List App
- Add new tasks
- Remove tasks
- Mark tasks as complete
Setting Up Your Project
- Create a new directory:
mkdir todo-app
cd todo-app
-
Create an
index.htmlfile and add the basic 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="styles.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task...">
<button id="addTaskButton">Add Task</button>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
Adding Styles
-
Create a
styles.cssfile to style your app:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
input[type="text"] {
width: 70%;
padding: 10px;
margin-right: 10px;
}
button {
padding: 10px;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
Adding Functionality with JavaScript
-
Create a
script.jsfile to add functionality:
document.getElementById('addTaskButton').addEventListener('click', addTask);
function addTask() {
const taskInput = document.getElementById('taskInput');
const taskValue = taskInput.value.trim();
if (taskValue) {
const taskList = document.getElementById('taskList');
const li = document.createElement('li');
li.textContent = taskValue;
const removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.onclick = () => {
taskList.removeChild(li);
};
li.appendChild(removeButton);
taskList.appendChild(li);
taskInput.value = '';
}
}
Conclusion
You’ve now built a simple To-Do List app using HTML, CSS, and JavaScript. This project can be expanded further by adding features like task persistence using local storage, editing tasks, or adding a filter for completed tasks.
Feel free to share your thoughts or improvements in the comments below!
This content originally appeared on DEV Community and was authored by Muhammad Atif Latif
Muhammad Atif Latif | Sciencx (2025-06-27T05:11:22+00:00) Building a Simple To-Do List App with JavaScript. Retrieved from https://www.scien.cx/2025/06/27/building-a-simple-to-do-list-app-with-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.