Укажіть, який треба написати код JS, щоб отримати елемент

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

Використовуючи можливості мови 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_Прізвище і завантажте в область під умовою завдання (позначену написом «Для додавання файлів, ви можете просто перетягнути їх сюди»).

Метод preventDefault()…

Укажіть, яку ієрархію має DOM

Укажіть, якої події із даного списку НЕ існує

Укажіть метод, який шукає всі елементи DOM по вказаному селектору

Завдання

Використовуючи можливості мови JavaScript виконайте пункти 1–5.

1. Оголосіть дві змінні name і price, які будуть зберігати назву й вартість товару відповідно.

Присвойте змінним наступні характеристики товару (відразу при оголошені) назва: Генератор захисного поля, ціна: 1000.

Використовуючи шаблонний рядок виведіть в консоль інформацію про товар у форматі: 'Вибрано «Генератор захисного поля», ціна за одиницю [1000 ] кредитів'.

Присвойте товару нову ціну — 2000. Використовуючи шаблонний рядок виведіть у консоль інформацію про товар у форматі: 'Вибрано [«Генератор захисного поля»], ціна за одиницю [2000 ] кредитів'.

1. Напишіть скрипт, що демонструє знаходження більшого числа серед двох чисел із використанням умовного оператора. Результат виведіть в консоль.
2. За законом, тільки повнолітні можуть купувати алкогольні напої. Напишіть скрипт, який за введеним віком (age) виведе в консоль одне з повідомлень:

• якщо age більше або дорівнює 18, то в консолі з’явиться рядок «You can buy beer»;
• в іншому випадку з’явиться рядок «You can not buy beer».

1. Напишіть скрипт перевірки кількості товарів на складі. Маємо змінні total (кількість товарів на складі) і ordered (одиниць товарів у замовленні).
   Порівняйте ці значення і по результатам виведіть в консоль:

• якщо в замовлені вказана кількість перевищує кількість товарів на складі, то виведіть повідомлення «На складі недостатня кількість товарів»;
• в іншому випадку виведіть повідомлення «Замовлення сформоване, з вами зв’яжеться менеджер.

Перевірте дієздатність коду з різними значеннями змінної ordered, наприклад 20, 80, 130. 

1. Напишіть скрипт, який імітує авторизацію адміністратора в панелі управління.

Маємо змінну message, у яку буде записано повідомлення про результат. При завантажені сторінки у користувача запитують пароль через prompt.

Якщо користувач  натиснув Cancel, то в змінну message запишіть рядок  «Відмінено користувачем».

Якщо користувач ввів пароль і введений пароль співпадає зі значенням константи ADMIN_PASSWORD (наприклад, const ADMIN_PASSWORD = 'jqueryismyjam'), то в змінну  message запишіть рядок «Ласкаво просимо!».

Якщо користувач ввів неправильний пароль (жодна з попередніх умов не виконалося), то в змінну message запишіть рядок «Доступ заборонений, неправильний пароль». Після всіх перевірок виведіть в alert значення змінної  message.

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

1. На навчальній платформі у розділі «Підручники й додаткові матеріали» знайдіть архів pr9_JS-1. Завантажте його на свій ПК та розархівуйте.
2. Папка  pr9_JS-1 має містити  2 файли index.html (у якому йде підключення скрипту) і файл pr-9.js, де вам  потрібно буде писати код відповідно до пунктів 1–5.
3. Відкрийте редактор коду Visual Studio Code, а в ньому — папку pr9_JS-1.
4. Відкрийте файл pr-9.js.
5. Виконайте пункти 1–5. Після виконання кожного із завдань обов’язково закоментуйте  код, щоб не заважав виконувати наступне завдання.  
   Приклад організації коду:
6. Результат роботи коду ви маєте бачити в консолі. Для того щоб побачити консоль, відкрийте файл html і викличте інструменти розробника, натиснувши комбінацію Ctrl+Shift+I.
7. Після виконання усіх пунктів завдання запакуйте папку pr9_JS-1 в архів з ім’ям pr9_JS-1-Прізвище і завантажте у область під умовою завдання (позначену написом Для додавання файлів, ви можете просто перетягнути їх сюди).

Укажіть метод для перевірки наявності певної літери в рядку

Укажіть, як можна вивести повідомлення «Hello World!» за допомогою JavaScript

Укажіть, що буде результатом виконання цього коду:

}