<!DOCTYPE html>
<html>
<head>
<title>TO DO List</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 20px;
}
.task-input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.task-list {
list-style-type: none;
padding: 0;
}
.task-list li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #f2f2f2;
border-radius: 4px;
margin-bottom: 5px;
}
.task-list li .task {
flex-grow: 1;
}
.task-list li .edit-btn,
.task-list li .delete-btn {
background-color: #4286f4;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
.task-list li .edit-btn {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>TO DO List</h1>
</div>
<input id="task-input" class="task-input" type="text" placeholder="Enter a task">
<button id="add-btn">Add Task</button>
<ul id="task-list" class="task-list"></ul>
</div>
<script>
// Get elements
const taskInput = document.getElementById('task-input');
const addBtn = document.getElementById('add-btn');
const taskList = document.getElementById('task-list');
// Add task function
function addTask() {
const task = taskInput.value;
if (task.trim() === '') return;
const li = document.createElement('li');
li.innerHTML = `
<span class="task">${task}</span>
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
`;
taskList.appendChild(li);
taskInput.value = '';
}
// Edit task function
function editTask(e) {
const taskSpan = e.target.previousElementSibling;
const newTask = prompt('Edit task:', taskSpan.innerText);
if (newTask && newTask.trim() !== '') {
taskSpan.innerText = newTask;
}
}
// Delete task function
function deleteTask(e) {
if (e.target.classList.contains('delete-btn')) {
e.target.parentElement.remove();
}
}
// Event listeners
addBtn.addEventListener('click', addTask);
taskList.addEventListener('click', function (e) {
if (e.target.classList.contains('edit-btn')) {
editTask(e);
} else if (e.target.classList.contains('delete-btn')) {
deleteTask(e);
}
});
</script>
</body>
</html>