<div>
<h2>To-Do List</h2>
<p>Here, you can add new items, and mark it as completed by clicking on them.</p>
<input type="text" id="newTask" placeholder="Add a new task">
<button id="addTaskButton">Add Task</button>
<ul id="taskList"></ul>
</div>
<script>
const newTaskInput = document.getElementById('newTask');
const addTaskButton = document.getElementById('addTaskButton');
const taskList = document.getElementById('taskList');
addTaskButton.addEventListener('click', () => {
const taskText = newTaskInput.value;
if (taskText) {
const taskItem = document.createElement('li');
taskItem.textContent = taskText;
taskItem.classList.add('task');
taskItem.addEventListener('click', () => {
taskItem.classList.toggle('completed');
});
taskList.appendChild(taskItem);
newTaskInput.value = '';
}
});
</script>
<style>
.task {
cursor: pointer;
padding: 5px;
border-bottom: 1px solid #ccc;
}