To-Do List
This is a beginner-friendly To-Do List web app built using only HTML, CSS, and vanilla JavaScript. Users can add new tasks, mark them as completed by clicking, and delete tasks by right-clicking. It’s a great mini-project for those learning core web development concepts and DOM manipulation without relying on any external libraries or frameworks. Clean UI, simple logic, and fully interactive — perfect for practice or portfolio!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple To-Do List</title>
<style>
.container {
max-width: 400px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
width: 70%;
padding: 10px;
margin-right: 5px;
}
button {
padding: 10px;
}
li {
list-style: none;
margin: 10px 0;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.completed {
text-decoration: line-through;
color: gray;
}
</style>
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task">
<button onclick="addTask()">Add</button>
<ul id="taskList"></ul>
</div>
<script>
function addTask() {
const input = document.getElementById("taskInput");
const taskText = input.value.trim();
if (taskText === "") return;
const li = document.createElement("li");
li.textContent = taskText;
// Toggle completed state
li.addEventListener("click", () => {
li.classList.toggle("completed");
});
// Right-click to delete
li.addEventListener("contextmenu", (e) => {
e.preventDefault();
li.remove();
});
document.getElementById("taskList").appendChild(li);
input.value = "";
}
</script>
</body>
</html>
