Todo List

1. Build the layout with a header, input form, and list container.
2. Implement adding new tasks to the list.
3. Add functionality to mark tasks as completed.
4. Implement task deletion with a confirmation modal.

Evaluating Requirement: You MUST use the following selectors for evaluation:

• Input field: #todo-input
• Form element: #todo-form (must contain a submit button)
• Empty state element: .empty-state (displayed when list is empty)
• Todo item element: .todo-item (for each task in the list)
• Todo text element: .todo-text (inside .todo-item)
• Completion checkbox: .todo-checkbox (inside .todo-item)
• Delete button: .delete-todo (inside .todo-item)
• Delete modal: #delete-modal (must have class .active when open)
• Confirm delete button: #confirm-delete (inside the modal)
• Main wrapper: .container (must use this class for pixel-perfect evaluation)

5. Persist data using LocalStorage so tasks remain after reload.