<!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>
<style>
body {
font-family: Arial, sans-serif;
}
#todo-list {
max-width: 400px;
margin: 20px auto;
}
#tasks-container {
list-style-type: none;
padding: 0;
}
.task {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
margin: 5px 0;
padding: 10px;
}
.task input[type="checkbox"] {
margin-right: 10px;
}
</style>
</head>
<body>
<div id="todo-list">
<h2>To-Do List</h2>
<ul id="tasks-container"></ul>
<input type="text" id="new-task" placeholder="Add a new task">
<button onclick="addTask()">Add Task</button>
</div>
<script>
function addTask() {
var taskInput = document.getElementById("new-task");
var taskText = taskInput.value.trim();
if (taskText !== "") {
var tasksContainer = document.getElementById("tasks-container");
var taskElement = document.createElement("li");
taskElement.className = "task";
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
var taskTextElement = document.createElement("span");
taskTextElement.textContent = taskText;
var deleteButton = document.createElement("button");
deleteButton.textContent = "Delete";
deleteButton.onclick = function () { tasksContainer.removeChild(taskElement); }; taskElement.appendChild(checkbox);
taskElement.appendChild(taskTextElement);
taskElement.appendChild(deleteButton);
tasksContainer.appendChild(taskElement);
taskInput.value = "";
}
}
</script>
</body>
</html>