Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Practicing Interactive List | Interactivity and Best Practices
DOM Manipulation with JavaScript

bookPracticing Interactive List

To create an interactive list where you can mark items as done, you first need to know how to attach click events to each list item. This allows you to toggle a "done" state, usually represented by a CSS class. Follow these steps to build your interactive list:

  1. Write your HTML with a list of items;
  2. In your JavaScript, select all the list items using a method like querySelectorAll;
  3. Loop through each list item and add a click event listener;
  4. Inside the event listener, toggle a CSS class (such as done) on the clicked item;
  5. Style the done class in your CSS to visually indicate completion, for example by adding a line-through.
index.html

index.html

style.css

style.css

script.js

script.js

copy
question mark

Which of the following statements about handling click events on multiple list items is true?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 2

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 6.67

bookPracticing Interactive List

Свайпніть щоб показати меню

To create an interactive list where you can mark items as done, you first need to know how to attach click events to each list item. This allows you to toggle a "done" state, usually represented by a CSS class. Follow these steps to build your interactive list:

  1. Write your HTML with a list of items;
  2. In your JavaScript, select all the list items using a method like querySelectorAll;
  3. Loop through each list item and add a click event listener;
  4. Inside the event listener, toggle a CSS class (such as done) on the clicked item;
  5. Style the done class in your CSS to visually indicate completion, for example by adding a line-through.
index.html

index.html

style.css

style.css

script.js

script.js

copy
question mark

Which of the following statements about handling click events on multiple list items is true?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 2
some-alt