Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>To-Do List</title> </head> <body> <div id="todo-list"> <h2>My To-Do List</h2> <ul id="tasks"> <li>Learn JavaScript</li> </ul> <input type="text" id="new-task" placeholder="New task"> <button id="add-task">Add Task</button> </div> <script> const taskList = document.getElementById('tasks'); const newTaskInput = document.getElementById('new-task'); const addTaskButton = document.getElementById('add-task'); addTaskButton.addEventListener('click', () => { const newTaskText = newTaskInput.value; if (newTaskText.trim()) { const newTask = document.createElement('li'); newTask.textContent = newTaskText; taskList.appendChild(newTask); newTaskInput.value = ''; } }); taskList.addEventListener('click', (event) => { if (event.target.tagName === 'LI') { taskList.removeChild(event.target); } }); </script> </body> </html>