Theory
Theory
Comments

The “change” event

We found all of the elements in the list. Each element is a separate task. It consists of text and a field with the checkbox type. This element works like a switch or a flag: if the field is empty, the task has not yet been completed and is waiting for its turn. If there is a checkmark inside, then the task has been completed and it can be removed.

In order to do something with the tasks themselves, you need to catch situations where the user clicks on the checkbox and this element is selected. This is where events come in handy.

We could add a click event for the entire task or for the entire <li> element. However, this solution is not optimal. The user may accidentally click on a task without wanting to close it.

You can configure checkbox clicks to be caught. This option works quite well. However, there is another event that will also come in handy: change. It is triggered when the field state changes. In the case of checkboxes, it is triggered when the state changes from an unselected field to a selected one, and vice versa.

So far we have not found checkboxes inside list elements. Therefore, first let’s find the checkbox inside each task, position the handler, and output some message in the console. We have many elements, so the algorithm will have to be repeated several times. Therefore, we will use a function. In this task, we will prepare this function to work, but in the next one we will call it and check whether our handler really works. We already added a function declaration to the code for you.

If you forgot how to add handlers, you can look at the example below. It shows the syntax for adding a handler:

element.addEventListener('change', function () {
  …
});

And if you want to remember what the code from the example means, you can review this assignment and this one as well.

You may be surprised that we sort through the elements that are found using querySelectorAll in a loop, like a regular array. We can do that. Because querySelectorAll returns a collection of elements. It looks like an array, but it is not actually one. Therefore, we call collections pseudo-arrays. We will later discuss the differences between collections and arrays. For now, it’s sufficient to know that collections can be sorted in a loop, just like arrays. We have already encountered collections in the “Introduction to JavaScript in the browser” chapter. For example, we dealt with them in this assignment as well as in this one.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The To-Do List</title> <link href="style.css" rel="stylesheet"> </head> <body> <h1 class="visually-hidden">The To-Do List</h1> <ul class="todo-list"> <li class="todo-list-item"> <label> <input class="todo-list-input" type="checkbox"> <span>Feed the cat</span> </label> </li> <li class="todo-list-item"> <label> <input class="todo-list-input" type="checkbox"> <span>Leave the country</span> </label> </li> <li class="todo-list-item"> <label> <input class="todo-list-input" type="checkbox"> <span>Go for a run</span> </label> </li> </ul> <p class="empty-tasks hidden">All of the tasks have been completed. There are no new tasks.</p> <form class="add-form" action="https://echo.htmlacademy.ru/courses" method="post"> <input class="add-form-input" type="text" aria-label="Task description" placeholder="For example, buy an elephant" required> <button class="add-form-button" type="submit">Add new task</button> </form> <template id="task-template"> <li class="todo-list-item"> <label> <input type="checkbox" class="todo-list-input"> <span></span> </label> </li> </template> <script src="script.js"></script> </body> </html>

CSS

@font-face { font-weight: 400; font-family: "Muller"; font-style: normal; font-display: swap; src: url("fonts/Muller.woff") format("woff"); } body { margin: 40px 32px; font-size: 18px; line-height: normal; font-family: "Muller", sans-serif; } .visually-hidden, .todo-list-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0); clip-path: inset(100%); } .hidden { display: none; } .todo-list { margin: 0; padding: 0; list-style: none; } .todo-list-item { margin-bottom: 12px; } .todo-list-item label { display: block; padding: 12px 18px; background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); cursor: pointer; user-select: none; } .todo-list-item span { display: flex; align-items: center; } .todo-list-input + span::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 16px; background-color: #ffffff; border: 2px solid #69b253; border-radius: 4px; } .todo-list-input:checked + span::before { background-color: #69b253; background-image: url("check-white.svg"); background-repeat: no-repeat; background-position: center; } .todo-list-input:not(:checked):hover + span::before, .todo-list-input:not(:checked):focus + span::before { background-color: rgba(105, 178, 83, 0.2); } .empty-tasks { color: #69b253; } .empty-tasks::before { content: ""; width: 14px; height: 13px; margin-right: 13px; background-image: url("check-green.svg"); background-repeat: no-repeat; background-position: center; } .add-form { display: flex; } .add-form-input { flex-grow: 1; box-sizing: border-box; height: 46px; margin-right: 16px; padding: 12px; font: inherit; border: 1px solid #a1b5c4; border-radius: 4px; } .add-form-input:focus { border: 1px solid #69b253; outline: none; } .add-form-input:hover { box-shadow: 0 0 6px rgba(105, 178, 83, 0.6); } .add-form-input::placeholder { color: #a1b5c4; } .add-form-button { flex-shrink: 0; padding: 12px; font: inherit; color: #ffffff; background-color: #69b253; border: none; border-radius: 4px; user-select: none; touch-action: manipulation; } .add-form-button:hover, .add-form-button:focus { background-color: #5aa045; outline: none; } .add-form-button:active { background-color: #42862e; }

JavaScript

var list = document.querySelector('.todo-list'); var items = list.querySelectorAll('.todo-list-item'); var addCheckHandler = function (item) { // Write your code here }; for (var i = 0; i < items.length; i++) { console.log(items[i]); }

Click inside the mini browser to put the focus in this window.

Goalscompleted

In the body of the addCheckHandler function, create a variable checkbox and write the element with the todo-list-input class to it. Search for the element inside the item.
On the next line, add the change event handler to the checkbox.
Inside the handler, output the 'Goal achieved!' string to the console.

The “change” event

Comments

Log in

Sign up

Restore access