/* Add CSS styles here */
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
.todo-list {
margin: 20px;
}
.todo-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.todo-item input[type=”checkbox”] {
margin-right: 10px;
}
.todo-item span {
text-decoration: none;
}
Todo List
Write article about Todo List Part 3
Style the todo list with CSS
Add JavaScript functionality to the todo list
// Add JavaScript functionality here
const checkboxes = document.querySelectorAll(‘input[type=”checkbox”]’);
checkboxes.forEach(checkbox => {
checkbox.addEventListener(‘change’, function() {
if (this.checked) {
this.nextElementSibling.style.textDecoration = “line-through”;
} else {
this.nextElementSibling.style.textDecoration = “none”;
}
});
});
?