Selmy44 / ListApp

<style> body { font-family: 'Arial', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }

.container { text-align: center; }

input[type="text"] { padding: 8px; margin-right: 8px; }

button { padding: 8px; cursor: pointer; }

ul { list-style-type: none; padding: 0; }

</style> <title>To-Do List App</title>

To-Do List

Add Task

<script> // Function to add a new task function addTask() { var taskInput = document.getElementById('taskInput'); var taskList = document.getElementById('taskList'); if (taskInput.value.trim() === '') { alert('Please enter a task.'); return; } var task = document.createElement('li'); task.textContent = taskInput.value; // Add a delete button to each task var deleteButton = document.createElement('button'); deleteButton.textContent = 'Delete'; deleteButton.onclick = function() { task.parentNode.removeChild(task); }; task.appendChild(deleteButton); taskList.appendChild(task); // Clear the input field after adding the task taskInput.value = ''; } </script>