Для виконання практичної частини уважно ознайомтеся з наведеними прикладами в методичних рекомендаціях до практичного заняття.

Використовуючи можливості мови JavaScript виконайте завдання 1–10:

1. Додайте кнопку, яка запускає функцію clickHandler(), що переміщує дану кнопку на 10px вправо, збільшує розміри даної кнопки й змінює її колір. Кнопку застилізуйте на свій смак.
2. У HTML є порожній список ul з id ingredients
   <ul id="ingredients"></ul>. У JS є масив рядків:

const ingredients = [

'Картопля',

'Гриби',

'Часник',

'Помідори',

'Зелень',

Приправи',

];

Напишіть скрипт, який для кожного елементу масиву ingredients створює окремий <li>, після чого вставить усі li за одну операцію в список ul.ingredients. Для створення DOM-вузлів використовуйте document.createElement().

1. Створити html-сторінку зі списком книг. При наведенні на назву книги, колір фону повинен змінюватися на зелений. Врахуйте, що при повторному наведені на іншу книгу, з попередньої виділення прибирається. Список книг застилізуйте на свій смак.

• «Володар кілець» Джон Р. Р. Толкін
• «Гордість і упередження» Джейн Остін
• «Темні початки» Філіп Пулман
• «Автостопом по галактиці» Дуглас Адамс
• «Гаррі Поттер і Кубок вогню» Джоан Роулінг
• «Вбити пересмішника» Харпер Лі.

1. Напишіть функцію lighterFactory(), яка на сторінці створює різнокольорову гірлянду (кружечки різного кольору). Сценарій використання такий: користувач при виклику функції вказує кількість елементів (лампочок), які необхідно створити. Після цього на сторінці з’являється зазначена кількість різнокольорових кружечків.
   
2. Створити на сторінці один елемент radiobutton і кнопку button. Застилізуйте на свій смак. При натисненні на кнопку в блок div виводьте value, прописане для radiobutton, якщо radiobutton активний, або 0 — якщо radiobutton не активний.
3. Напишіть скрипт створення і вилучення колекції елементів. Користувач вводить кількість елементів в input і натискає кнопку Створити, після чого рендириться (створюється) колекція. Коли користувач натисне на кнопку Очистити, колекція елементів зникає зі сторінки.

Алгоритм виконання

• Створіть функцію createBoxes(amount), яка приймає один параметр amount — число. Функція створює стільки div, скільки вказано в amount, і додає їх в div з id boxes.
• Кожен створений div має:

     — випадковий rgb колір фону.

     — розмір самого першого div — 30px на 30px.

• Кожен наступний div після першого має бути ширший і вищий попереднього.
• Створіть функцію destroyBoxes(), яка очищає div з id:

<div id="controls">

     <input type="number" min="0" max="100" step="1" />

     <button type="button" data-action="render">Создать</button>

      <button type="button" data-action="destroy">Очистить</button>

</div>

<div id="boxes"></div>

1. Напишіть скрипт, який реагує на зміну значення input з id font-size-control (подія input) і змінює інлайн-стиль span з id text, оновлюючи властивість font-size. У результаті при переміщенні повзунка (регулятора) буде змінюватися розмір тексту:

<input id="font-size-control" type="range" />

<br />

<span id="text">Абракадабра!</span>

1. Створіть галерею зображень, кожне з яких не активне. При клацанні по зображенню, воно стає активним. При наступному клацанні по ньому воно знову стає неактивним. Для двох станів задайте наступні стилі:

• Активний стан: фільтр — відтінки сірого (0%); непрозорість — 1.
• Неактивний стан: фільтр — відтінки сірого (100%); непрозорість — 0.5.
  

1. Дано чекбокси й кнопку. По натисканню на кнопку вивести в рядок значення вибраних елементів:
   
2. Реалізувати в контейнері можливість переглядати світлини одна за одною при клацанні курсора. Світлини змінюють одна одну з ефектом слайдингу.

Порядок виконання завдань

1. Для кожного із завдань має бути створена папка, iм’я якої містить номер завдання, наприклад: task-1 (task-2, task-10).
2. У кожній папці з номером завдання має бути 3 файли: index.html, style.css та task-1(номер завдання).js. Наприклад:

3. Після виконання всіх завдань запакуйте їх в архів з ім’ям pr-10_JS-5_Прізвище і завантажте в область під умовою завдання (позначену написом «Для додавання файлів, ви можете просто перетягнути їх сюди»).