## Level 4 Checkpoint Below is the complete code for a simple task manager app. It has a heading, a list of tasks, a button to toggle tasks as "done," and some styling. But there are **four intentional bugs** — one in HTML, one in CSS, and two in JavaScript. Read through all three files carefully. Then answer the questions to find each bug. ```html Task Manager

My Tasks

Buy groceries
Reply to emails
Schedule team meeting

Click "Done" to mark tasks as completed.

``` ```css /* styles.css */ .container { max-width: 500px; margin: 40px auto; font-family: Arial, sans-serif; } .task { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #ddd; } .task-text { font-size: 16px; } .task.completed .task-text { text-decoration: line-through; color: #999; } .done-btn { background: #4CAF50; color: #fff; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; } .done-btn:hover { background: #45a049; } .summary { color: #666; margin-top: 20px; font-size: 14x; } ``` ```javascript // app.js const buttons = document.querySelectorAll('.done-btn'); buttons.forEach(function(button) { button.addEventListener('click', function() { const task = button.closest('.task'); task.classList.toggle('complete'); if (task.classList.contains('complete')) { button.textContent = 'Undo'; } else { button.textContent = 'Done'; } }); }); const taskCount = document.getElementByld('task-list').children.length; console.log('Total tasks: ' + taskCount); ```

4.4 Checkpoint