JavaScript Exercise: Todo List
Description:
Create a simple todo list application using HTML, CSS, and JavaScript. The application should include an input box and an “Add” button. When the user enters text into the input box and clicks “Add”, the text should be added as a new item in an initially empty unordered list. Each new todo item should be accompanied by two buttons: a “Complete” button and a “Delete” button. Clicking the “Complete” button should strike through the todo item, indicating that it has been completed. Clicking the “Delete” button should remove the item from the list entirely. The application should prevent the addition of empty items; if the input box is empty when the “Add” button is clicked, no new item should be added to the list.
Expected Output:
- An input field with an adjacent “Add” button to submit new todo items.
- An empty unordered list that gets populated with new items entered through the input field.
- Each list item has a “Complete” button that, when clicked, strikes through the item text.
- Each list item has a “Delete” button that, when clicked, removes the item from the list.
- Empty values should not be added to the list; the application should ensure only non-empty entries are added as items.