HTML, CSS, and Javascript To-Do List: Part 3

Posted by

Todo List Part 3

/* 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”;
}
});
});

0 0 votes
Article Rating
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@AudioCommando
11 months ago

?