├── .gitignore
├── .markdownlint.json
├── .prettierrc.json
├── LICENSE
├── README.md
├── homework-01
    ├── README.md
    └── README.ua.md
├── homework-02
    ├── README.md
    └── README.ua.md
├── homework-03
    ├── README.md
    └── README.ua.md
├── homework-04
    ├── README.md
    └── README.ua.md
├── homework-05
    ├── README.md
    └── README.ua.md
├── homework-06
    ├── README.md
    ├── README.ua.md
    └── users.js
├── homework-07
    ├── README.md
    ├── README.ua.md
    └── src
    │   ├── index.html
    │   ├── js
    │       ├── task-01.js
    │       ├── task-02.js
    │       ├── task-03.js
    │       ├── task-04.js
    │       ├── task-05.js
    │       ├── task-06.js
    │       ├── task-07.js
    │       └── task-08.js
    │   ├── task-01.html
    │   ├── task-02.html
    │   ├── task-03.html
    │   ├── task-04.html
    │   ├── task-05.html
    │   ├── task-06.html
    │   ├── task-07.html
    │   └── task-08.html
├── homework-08
    ├── README.md
    ├── README.ua.md
    ├── preview.jpg
    └── src
    │   ├── app.js
    │   ├── css
    │       └── styles.css
    │   ├── images
    │       └── icon-close.svg
    │   └── index.html
├── homework-09
    ├── README.md
    └── README.ua.md
├── homework-10
    ├── README.md
    ├── README.ua.md
    ├── preview.jpg
    └── src
    │   ├── images
    │       └── sprite.svg
    │   ├── index.html
    │   ├── menu.json
    │   └── styles.css
├── homework-11
    ├── README.md
    ├── README.ua.md
    ├── color-switch
    │   ├── README.md
    │   └── README.ua.md
    ├── promisification
    │   ├── README.md
    │   └── README.ua.md
    └── timer
    │   ├── README.md
    │   ├── README.ua.md
    │   └── preview.gif
├── homework-12
    ├── README.md
    ├── README.ua.md
    └── assets
    │   ├── country-info.png
    │   ├── country-list.png
    │   └── query-prompt.png
├── homework-13
    ├── README.md
    └── README.ua.md
├── neoversity
    └── v2
    │   ├── 06-1
    │       └── src
    │       │   ├── css
    │       │       └── common.css
    │       │   ├── index.html
    │       │   ├── js
    │       │       ├── task-01.js
    │       │       ├── task-02.js
    │       │       ├── task-03.js
    │       │       ├── task-04.js
    │       │       └── task-05.js
    │       │   ├── task-01.html
    │       │   ├── task-02.html
    │       │   ├── task-03.html
    │       │   ├── task-04.html
    │       │   └── task-05.html
    │   └── 06-2
    │       └── src
    │           ├── css
    │               └── common.css
    │           ├── index.html
    │           ├── js
    │               ├── task-01.js
    │               ├── task-02.js
    │               ├── task-03.js
    │               ├── task-04.js
    │               └── task-05.js
    │           ├── task-01.html
    │           ├── task-02.html
    │           ├── task-03.html
    │           ├── task-04.html
    │           └── task-05.html
├── v2
    ├── 10
    │   ├── README.en.md
    │   ├── README.es.md
    │   ├── README.md
    │   ├── README.pl.md
    │   ├── README.ua.md
    │   ├── preview
    │   │   ├── country-info.png
    │   │   ├── country-list.png
    │   │   ├── error-alert.png
    │   │   └── too-many-matches.png
    │   └── src
    │   │   ├── index.html
    │   │   └── index.js
    ├── 11
    │   ├── README.en.md
    │   ├── README.es.md
    │   ├── README.md
    │   ├── README.pl.md
    │   └── README.ua.md
    ├── 06
    │   ├── README.en.md
    │   ├── README.es.md
    │   ├── README.md
    │   ├── README.pl.md
    │   ├── README.ua.md
    │   └── src
    │   │   ├── css
    │   │       └── common.css
    │   │   ├── index.html
    │   │   ├── js
    │   │       ├── task-01.js
    │   │       ├── task-02.js
    │   │       ├── task-03.js
    │   │       ├── task-04.js
    │   │       ├── task-05.js
    │   │       ├── task-06.js
    │   │       ├── task-07.js
    │   │       ├── task-08.js
    │   │       ├── task-09.js
    │   │       └── task-10.js
    │   │   ├── task-01.html
    │   │   ├── task-02.html
    │   │   ├── task-03.html
    │   │   ├── task-04.html
    │   │   ├── task-05.html
    │   │   ├── task-06.html
    │   │   ├── task-07.html
    │   │   ├── task-08.html
    │   │   ├── task-09.html
    │   │   └── task-10.html
    ├── 07
    │   ├── README.en.md
    │   ├── README.es.md
    │   ├── README.md
    │   ├── README.pl.md
    │   ├── README.ua.md
    │   └── src
    │   │   ├── 01-gallery.html
    │   │   ├── 02-lightbox.html
    │   │   ├── css
    │   │       ├── common.css
    │   │       └── styles.css
    │   │   ├── index.html
    │   │   └── js
    │   │       ├── 01-gallery.js
    │   │       ├── 02-lightbox.js
    │   │       └── gallery-items.js
    ├── 08
    │   ├── README.en.md
    │   ├── README.es.md
    │   ├── README.md
    │   ├── README.pl.md
    │   ├── README.ua.md
    │   └── src
    │   │   ├── 01-gallery.html
    │   │   ├── 02-video.html
    │   │   ├── 03-feedback.html
    │   │   ├── css
    │   │       ├── 01-gallery.css
    │   │       ├── 03-feedback.css
    │   │       └── common.css
    │   │   ├── index.html
    │   │   └── js
    │   │       ├── 01-gallery.js
    │   │       ├── 02-video.js
    │   │       ├── 03-feedback.js
    │   │       └── gallery-items.js
    └── 09
    │   ├── README.en.md
    │   ├── README.es.md
    │   ├── README.md
    │   ├── README.pl.md
    │   ├── README.ua.md
    │   └── src
    │       ├── 01-color-switcher.html
    │       ├── 02-timer.html
    │       ├── 03-promises.html
    │       ├── css
    │           └── common.css
    │       ├── index.html
    │       └── js
    │           ├── 01-color-switcher.js
    │           ├── 02-timer.js
    │           └── 03-promises.js
└── v3
    └── 07
        └── src
            ├── css
                └── common.css
            ├── index.html
            ├── js
                ├── task-1.js
                ├── task-2.js
                ├── task-3.js
                ├── task-4.js
                └── task-5.js
            ├── task-1.html
            ├── task-2.html
            ├── task-3.html
            ├── task-4.html
            └── task-5.html


/.gitignore:
--------------------------------------------------------------------------------
1 | stash/
2 | .DS_Store


--------------------------------------------------------------------------------
/.markdownlint.json:
--------------------------------------------------------------------------------
1 | {
2 |   "default": true,
3 |   "MD025": false,
4 |   "MD041": false
5 | }
6 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "printWidth": 80,
 3 |   "tabWidth": 2,
 4 |   "useTabs": false,
 5 |   "semi": true,
 6 |   "singleQuote": true,
 7 |   "trailingComma": "es5",
 8 |   "bracketSpacing": true,
 9 |   "jsxBracketSameLine": false,
10 |   "arrowParens": "avoid",
11 |   "proseWrap": "always"
12 | }
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # GoIT JavaScript course homework
2 | 


--------------------------------------------------------------------------------
/homework-01/README.md:
--------------------------------------------------------------------------------
  1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
  2 | 
  3 | # Критерии приема
  4 | 
  5 | - Создан репозиторий `goit-js-hw-01`
  6 | - При сдаче домашней работы есть ссылка на исходные файлы в репозитории
  7 | - Каждое задание выполнено в отдельном файле с именем `task-номер_задания.js`.
  8 |   Используй `<script type="module">` чтобы закрыть код задания в отдельной
  9 |   области видимости и избежать конфликтов имен идентификаторов.
 10 | - Имена переменных понятные, описательные
 11 | - Код отформатирован с помощью Prettier
 12 | 
 13 | # Задание 1
 14 | 
 15 | - Объяви две переменные хранящие название и цену товара: `name` и `price`
 16 | - Присвой переменным следующие характеристики товара (сразу при объявлении)
 17 |   - название: Генератор защитного поля
 18 |   - цена: 1000
 19 | - Используя шаблонную строку выведи в консоль информацию о товаре, получится:
 20 |   `'Выбран «Генератор защитного поля», цена за штуку 1000 кредитов'`.
 21 | - Присвой товару новую цену - 2000
 22 | - Используя шаблонную строку выведи в консоль информацию о товаре, получится:
 23 |   `'Выбран «Генератор защитного поля», цена за штуку 2000 кредитов'`.
 24 | 
 25 | # Задание 2
 26 | 
 27 | Напиши скрипт проверки количества товаров на складе. Есть переменные `total`
 28 | (количество товаров на складе) и `ordered` (единиц товара в заказе).
 29 | 
 30 | Сравни эти значения и по результатам выведи:
 31 | 
 32 | - Если в заказе указано число, превышающее количество товаров на складе, то
 33 |   выведи сообщение `"На складе недостаточно твоаров!"`.
 34 | - В другом случае выводи сообщение `"Заказ оформлен, с вами свяжется менеджер"`.
 35 | 
 36 | Проверь работоспособность кода с разными значениями переменной `ordered`,
 37 | например `20`, `80` и `130`.
 38 | 
 39 | ```js
 40 | const total = 100;
 41 | const ordered = 50;
 42 | ```
 43 | 
 44 | # Задание 3
 45 | 
 46 | Напиши скрипт имитирующий авторизацию администратора в панели управления.
 47 | 
 48 | Есть переменная `message` в которую будет записано сообщение о результате. При
 49 | загрузке страницы у посетителя запрашивается пароль через `prompt`:
 50 | 
 51 | - Если нажали `Cancel`, записать в `message` строку `'Отменено пользователем!'`
 52 | - В протовном случае, если введен пароль который совпадает со значением
 53 |   константы `ADMIN_PASSWORD`, записать в `message` строку `'Добро пожаловать!'`
 54 | - В противном случае, то есть если ни одно из предыдущих условий не выполнилось,
 55 |   записать в `message` строку `'Доступ запрещен, неверный пароль!'`
 56 | - После всех проверок вывести в `alert` значение переменной `message`.
 57 | 
 58 | ```js
 59 | const ADMIN_PASSWORD = 'jqueryismyjam';
 60 | let message;
 61 | ```
 62 | 
 63 | # Задание 4
 64 | 
 65 | На счету пользователя есть `23580` кредитов, значение хранится в переменной
 66 | `credits` (создай и присвой). Пользователь решает купить ремонтных дроидов,
 67 | которые стоят по `3000` кредитов за штуку. Цена одного дроида хранится в
 68 | переменной `pricePerDroid` (создай и присвой).
 69 | 
 70 | При посещении страницы, используя `prompt`, необходимо спросить количество
 71 | дроидов которые пользователь хочет купить и сохранить в переменную.
 72 | 
 73 | Напиши скрипт который:
 74 | 
 75 | - Если в `prompt` была нажата кнопка `Cancel`, выводит в консоль сообщение
 76 |   `'Отменено пользователем!'`.
 77 | - В противном случае, рассчитывает общую цену заказа и сохраняет в переменной
 78 |   `totalPrice`.
 79 | - Проверяет сможет ли пользователь оплатить заказ:
 80 |   - если сумма к оплате превышает количество кредитов на счету, выводи в консоль
 81 |     сообщение `'Недостаточно средств на счету!'`.
 82 |   - в противном случае необходимо посчитать остаток кредитов на счету и вывести
 83 |     сообщение
 84 |     `'Вы купили [число] дроидов, на счету осталось [число] кредитов.'`.
 85 | 
 86 | # Задание 5
 87 | 
 88 | Пользователь может оформить доставку товара к себе в страну, указав ее при
 89 | посещении страницы в `prompt`. Учти, пользователь может ввести имя страны не
 90 | только буквами нижнего регистра, а к примеру `'кИтАЙ'`.
 91 | 
 92 | Напиши скрипт который выводит сообщение о стоимости доставки в указанную страну.
 93 | Обязательно используй `switch`. Формат сообщения:
 94 | `'Доставка в [страна] будет стоить [цена] кредитов'`.
 95 | 
 96 | Но доставка есть не везде, если указанной страны нет в списке, то выводи в
 97 | `alert` сообщение `'В вашей стране доставка не доступна'`.
 98 | 
 99 | Ниже приведен список стран и стоимость доставки.
100 | 
101 | - Китай - 100 кредитов
102 | - Чили - 250 кредитов
103 | - Австралия - 170 кредитов
104 | - Индия - 80 кредитов
105 | - Ямайка - 120 кредитов
106 | 
107 | # Задание 6
108 | 
109 | Напиши скрипт который просит посетителя ввести число в `prompt` до тех пор, пока
110 | посетитель на нажмет `Cancel` и каждый раз добавляет введенное значение к общей
111 | сумме.
112 | 
113 | - При загрузке страницы пользователю предлагается в `prompt` ввести число. Ввод
114 |   добавляется к значению переменной `total`.
115 | - Операция ввода числа продолжается до тех пор, пока пользователь не нажмет
116 |   кнопку `Cancel` в `prompt`.
117 | - После того как пользователь прекратил ввод нажав кнопку `Cancel`, показать
118 |   `alert` со строкой `'Общая сумма чисел равна [сумма]'`.
119 | 
120 | > 🔔 Делать проверку того, что пользователь ввел именно число, а не произвольный
121 | > набор символов, не нужно. Если хочешь, в случае некорректного ввода, показывай
122 | > `alert` с текстом `'Было введено не число, попробуйте еще раз'`, при этом
123 | > результат `prompt` плюсовать к общей сумме не нужно, после чего снова
124 | > пользователю предлагается ввести число в prompt.
125 | 
126 | ```js
127 | let input;
128 | let total = 0;
129 | ```
130 | 


--------------------------------------------------------------------------------
/homework-01/README.ua.md:
--------------------------------------------------------------------------------
  1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
  2 | 
  3 | # Критерії прийому
  4 | 
  5 | - Створено репозиторій `goit-js-hw-01`
  6 | - При здачі домашньої роботи є посилання на вихідні файли в репозиторії
  7 | - Кожне завдання виконано в окремому файлі з ім'ям `task-номер_завдання.js`.
  8 |   Використовуй `<script type="module">` щоб закрити код завдання в окремій
  9 |   області видимості і уникнути конфліктів імен ідентифікаторів.
 10 | - Імена змінних зрозумілі, описові
 11 | - Код відформатований за допомогою Prettier
 12 | 
 13 | # Завдання 1
 14 | 
 15 | - Оголоси дві змінні, які зберігають назву та ціну товару: `name` і `price`
 16 | - Присвойте змінним наступні характеристики товару (відразу при оголошенні)
 17 |   - назва: Генератор захисного поля
 18 |   - ціна: 1000
 19 | - Використовуючи стандартний рядок виведи в консоль інформацію про товар, вийде:
 20 |   `'Обрано «Генератор захисного поля», ціна за штуку 1000 кредитів'`.
 21 | - Присвой товару нову ціну - 2000
 22 | - Використовуючи стандартний рядок виведи в консоль інформацію про товар, вийде:
 23 |   `'Обрано «Генератор захисного поля», ціна за штуку 2000 кредитів'`.
 24 | 
 25 | # Завдання 2
 26 | 
 27 | Напиши скрипт перевірки кількості товарів на складі. Є змінні `total` (кількість
 28 | товарів на складі) і `ordered` (одиниць товару в замовленні).
 29 | 
 30 | Порівняй ці значення і за результатами виведи:
 31 | 
 32 | - Якщо в замовленні вказано число, що перевищує кількість товарів на складі, то
 33 |   виведи повідомлення `"На складі недостатньо товарів!"`.
 34 | - В іншому випадку виводь повідомлення
 35 |   `"Замовлення оформлено, з вами зв'яжеться менеджер"`.
 36 | 
 37 | Перевір працездатність коду з різними значеннями змінної `ordered`, наприклад
 38 | `20`, `80` і `130`.
 39 | 
 40 | ```js
 41 | const total = 100;
 42 | const ordered = 50;
 43 | ```
 44 | 
 45 | # Завдання 3
 46 | 
 47 | Напиши скрипт, який імітує авторизацію адміністратора в панелі управління.
 48 | 
 49 | Є змінна `message` в яку буде записано повідомлення про результат. При
 50 | завантаженні сторінки у відвідувача запитується пароль через `prompt`:
 51 | 
 52 | - Якщо натиснули `Cancel`, записати в `message` рядок
 53 |   `'Скасовано користувачем!'`
 54 | - В іншому випадку, якщо введений пароль який збігається зі значенням константи
 55 |   `ADMIN_PASSWORD`, записати в `message` рядок `'Ласкаво просимо!'`
 56 | - В іншому випадку, тобто якщо жодна з попередніх умов не виконалася, записати в
 57 |   `message` рядок `'Доступ заборонений, невірний пароль!'`
 58 | - Після всіх перевірок вивести в `alert` значення змінної `message`.
 59 | 
 60 | ```js
 61 | const ADMIN_PASSWORD = 'jqueryismyjam';
 62 | let message;
 63 | ```
 64 | 
 65 | # Завдання 4
 66 | 
 67 | На рахунку користувача є `23580` кредитів, значення зберігається в змінній
 68 | `credits` (створи і привласни). Користувач вирішує купити ремонтних дроїд, які
 69 | коштують по `3000` кредитів за штуку. Ціна одного дроїда зберігається в змінній
 70 | `pricePerDroid` (створи і привласни).
 71 | 
 72 | При відвідуванні сторінки, використовуючи `prompt`, необхідно запитати кількість
 73 | дроїдів, які користувач хоче купити і зберегти в змінну.
 74 | 
 75 | Напиши скрипт який:
 76 | 
 77 | - Якщо в `prompt` була натиснута кнопка `Cancel`, виводить в консоль
 78 |   повідомлення `'Скасовано користувачем!'`.
 79 | - В іншому випадку, розраховує загальну ціну замовлення і зберігає в змінній
 80 |   `totalPrice`.
 81 | - Перевіряє чи зможе користувач оплатити замовлення:
 82 |   - якщо сума до оплати перевищує кількість кредитів на рахунку, виводь в
 83 |     консоль повідомлення `'Недостатньо коштів на рахунку!'`.
 84 |   - в іншому випадку необхідно порахувати залишок кредитів на рахунку і вивести
 85 |     повідомлення
 86 |     `'Ви купили [число] дроїдів, на рахунку залишилося [число] кредитів.'`.
 87 | 
 88 | # Завдання 5
 89 | 
 90 | Користувач може оформити доставку товару до себе в країну, вказавши її при
 91 | відвідуванні сторінки в `prompt`. Врахуй, користувач може ввести ім'я країни не
 92 | тільки буквами нижнього регістра, а наприклад `'кИтАЙ'`.
 93 | 
 94 | Напиши скрипт який виводить повідомлення про вартість доставки в зазначену
 95 | країну. Обов'язково використовуй `switch`. Формат повідомлення:
 96 | `'Доставка в [країна] буде коштувати [ціна] кредитів'`.
 97 | 
 98 | Але доставка є не скрізь, якщо зазначеної країни немає в списку, то виводь в
 99 | `alert` повідомлення `'У вашій країні доставка недоступна'`.
100 | 
101 | Нижче наведено список країн і вартість доставки.
102 | 
103 | - Китай - 100 кредитів
104 | - Чилі - 250 кредитів
105 | - Австралія - 170 кредитів
106 | - Індія - 80 кредитів
107 | - Ямайка - 120 кредитів
108 | 
109 | # Завдання 6
110 | 
111 | Напиши скрипт який просить відвідувача ввести число в `prompt` до тих пір, поки
112 | відвідувач не натисне `Cancel` і кожен раз додає введене значення до загальної
113 | суми.
114 | 
115 | - При завантаженні сторінки користувачеві пропонується в `prompt` ввести число.
116 |   Введення додається до значення змінної `total`.
117 | - Операція введення числа триває до тих пір, поки користувач не натисне кнопку
118 |   `Cancel` в `prompt`.
119 | - Після того як користувач припинив введення натиснувши кнопку `Cancel`,
120 |   показати `alert` з рядком `'Загальна сума чисел дорівнює [сума]'`.
121 | 
122 | > 🔔 Робити перевірку того, що користувач ввів саме число, а не довільний набір
123 | > символів, не потрібно. Якщо хочеш, в разі некоректного введення, показуй
124 | > `alert` з текстом `'Було написано не число, спробуйте ще раз'`, при цьому
125 | > результат `prompt` плюсувати до загальної суми не потрібно, після чого знову
126 | > користувачеві пропонується ввести число в prompt.
127 | 
128 | ```js
129 | let input;
130 | let total = 0;
131 | ```
132 | 


--------------------------------------------------------------------------------
/homework-04/README.md:
--------------------------------------------------------------------------------
 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
 2 | 
 3 | # Критерии приема
 4 | 
 5 | - Создан репозиторий `goit-js-hw-04`
 6 | - При сдаче домашней работы есть ссылка на исходные файлы в репозитории
 7 | - Каждое задание выполнено в отдельном файле с именем `task-номер_задания.js`.
 8 |   Используй `<script type="module">` чтобы закрыть код задания в отдельной
 9 |   области видимости и избежать конфликтов имен идентификаторов.
10 | - Имена переменных и функций понятные, описательные
11 | - Код отформатирован с помощью Prettier
12 | 
13 | # Задание 1
14 | 
15 | Расставь отсутствующие `this` в методах объекта `account`.
16 | 
17 | ```js
18 | const account = {
19 |   owner: 'Mango',
20 |   balance: 24000,
21 |   discount: 0.1,
22 |   orders: ['order-1', 'order-2', 'order-3'],
23 |   changeDiscount(value) {
24 |     discount = value;
25 |   },
26 |   showOrders() {
27 |     return orders;
28 |   },
29 |   addOrder(cost, order) {
30 |     balance -= cost;
31 |     orders.push(order);
32 |   },
33 | };
34 | 
35 | account.changeDiscount(0.15);
36 | console.log(account.discount); // 0.15
37 | 
38 | console.table(account.showOrders()); // ['order-1', 'order-2', 'order-3']
39 | 
40 | account.addOrder(5000, 'order-4');
41 | console.log(account.balance); // 19000
42 | console.table(account.showOrders()); // ['order-1', 'order-2', 'order-3', 'order-4']
43 | ```
44 | 
45 | # Задание 2
46 | 
47 | Исправь ошибки которые будут в консоли, чтобы скрипт заработал.
48 | 
49 | ```js
50 | const inventory = {
51 |   items: ['Knife', 'Gas mask'],
52 |   add(itemName) {
53 |     console.log(`Adding ${itemName} to inventory`);
54 | 
55 |     this.items.push(itemName);
56 |   },
57 |   remove(itemName) {
58 |     console.log(`Removing ${itemName} from inventory`);
59 | 
60 |     this.items = this.items.filter(item => item !== itemName);
61 |   },
62 | };
63 | 
64 | const invokeInventoryAction = function(itemName, action) {
65 |   console.log(`Invoking action on ${itemName}`);
66 |   action(itemName);
67 | };
68 | 
69 | invokeInventoryAction('Medkit', inventory.add);
70 | // Invoking action on Medkit
71 | // Adding Medkit to inventory
72 | 
73 | console.log(inventory.items); // ['Knife', 'Gas mask', 'Medkit']
74 | 
75 | invokeInventoryAction('Gas mask', inventory.remove);
76 | // Invoking action on Gas mask
77 | // Removing Gas mask from inventory
78 | 
79 | console.log(inventory.items); // ['Knife', 'Medkit']
80 | ```
81 | 


--------------------------------------------------------------------------------
/homework-04/README.ua.md:
--------------------------------------------------------------------------------
 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
 2 | 
 3 | # Критерії прийому
 4 | 
 5 | - Створено репозиторій `goit-js-hw-04`
 6 | - При здачі домашньої роботи є посилання на вихідні файли в репозиторії
 7 | - Кожне завдання виконано в окремому файлі з ім'ям `task-номер_завдання.js`.
 8 |   Використовуй `<script type="module">` щоб закрити код завдання в окремій
 9 |   області видимості і уникнути конфліктів імен ідентифікаторів.
10 | - Імена змінних зрозумілі, описові
11 | - Код відформатований за допомогою Prettier
12 | 
13 | # Завдання 1
14 | 
15 | Розстав відсутні `this` в методах об'єкта `account`.
16 | 
17 | ```js
18 | const account = {
19 |   owner: 'Mango',
20 |   balance: 24000,
21 |   discount: 0.1,
22 |   orders: ['order-1', 'order-2', 'order-3'],
23 |   changeDiscount(value) {
24 |     discount = value;
25 |   },
26 |   showOrders() {
27 |     return orders;
28 |   },
29 |   addOrder(cost, order) {
30 |     balance -= cost;
31 |     orders.push(order);
32 |   },
33 | };
34 | 
35 | account.changeDiscount(0.15);
36 | console.log(account.discount); // 0.15
37 | 
38 | console.table(account.showOrders()); // ['order-1', 'order-2', 'order-3']
39 | 
40 | account.addOrder(5000, 'order-4');
41 | console.log(account.balance); // 19000
42 | console.table(account.showOrders()); // ['order-1', 'order-2', 'order-3', 'order-4']
43 | ```
44 | 
45 | # Завдання 2
46 | 
47 | Виправ помилки, які будуть в консолі, щоб скрипт запрацював.
48 | 
49 | ```js
50 | const inventory = {
51 |   items: ['Knife', 'Gas mask'],
52 |   add(itemName) {
53 |     console.log(`Adding ${itemName} to inventory`);
54 | 
55 |     this.items.push(itemName);
56 |   },
57 |   remove(itemName) {
58 |     console.log(`Removing ${itemName} from inventory`);
59 | 
60 |     this.items = this.items.filter(item => item !== itemName);
61 |   },
62 | };
63 | 
64 | const invokeInventoryAction = function (itemName, action) {
65 |   console.log(`Invoking action on ${itemName}`);
66 |   action(itemName);
67 | };
68 | 
69 | invokeInventoryAction('Medkit', inventory.add);
70 | // Invoking action on Medkit
71 | // Adding Medkit to inventory
72 | 
73 | console.log(inventory.items); // ['Knife', 'Gas mask', 'Medkit']
74 | 
75 | invokeInventoryAction('Gas mask', inventory.remove);
76 | // Invoking action on Gas mask
77 | // Removing Gas mask from inventory
78 | 
79 | console.log(inventory.items); // ['Knife', 'Medkit']
80 | ```
81 | 


--------------------------------------------------------------------------------
/homework-06/README.md:
--------------------------------------------------------------------------------
  1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
  2 | 
  3 | # Критерии приема
  4 | 
  5 | - Создан репозиторий `goit-js-hw-06`
  6 | - При сдаче домашней работы есть ссылка на исходные файлы в репозитории
  7 | - Все задания выполнены в одном файле, в который импортируется массив
  8 |   пользователей.
  9 | - Имена переменных и функций понятные, описательные
 10 | - Код отформатирован с помощью Prettier
 11 | 
 12 | # ТЗ
 13 | 
 14 | Напиши функции которые с помощью перебирающих методов массива (никаких `for`,
 15 | `splice` и т. д.) выполняют следующие операции над массивом объектов
 16 | пользователей из файла [users.js](./users.js).
 17 | 
 18 | # Задание 1
 19 | 
 20 | Получить массив имен всех пользователей (поле `name`).
 21 | 
 22 | ```js
 23 | const getUserNames = users => {
 24 |   // твой код
 25 | };
 26 | 
 27 | console.log(getUserNames(users));
 28 | // [ 'Moore Hensley', 'Sharlene Bush', 'Ross Vazquez', 'Elma Head', 'Carey Barr', 'Blackburn Dotson', 'Sheree Anthony' ]
 29 | ```
 30 | 
 31 | # Задание 2
 32 | 
 33 | Получить массив объектов пользователей по цвету глаз (поле `eyeColor`).
 34 | 
 35 | ```js
 36 | const getUsersWithEyeColor = (users, color) => {
 37 |   // твой код
 38 | };
 39 | 
 40 | console.log(getUsersWithEyeColor(users, 'blue')); // [объект Moore Hensley, объект Sharlene Bush, объект Carey Barr]
 41 | ```
 42 | 
 43 | # Задание 3
 44 | 
 45 | Получить массив имен пользователей по полу (поле `gender`).
 46 | 
 47 | ```js
 48 | const getUsersWithGender = (users, gender) => {
 49 |   // твой код
 50 | };
 51 | 
 52 | console.log(getUsersWithGender(users, 'male')); // [ 'Moore Hensley', 'Ross Vazquez', 'Carey Barr', 'Blackburn Dotson' ]
 53 | ```
 54 | 
 55 | # Задание 4
 56 | 
 57 | Получить массив только неактивных пользователей (поле `isActive`).
 58 | 
 59 | ```js
 60 | const getInactiveUsers = users => {
 61 |   // твой код
 62 | };
 63 | 
 64 | console.log(getInactiveUsers(users)); // [объект Moore Hensley, объект Ross Vazquez, объект Blackburn Dotson]
 65 | ```
 66 | 
 67 | # Задание 5
 68 | 
 69 | Получить пользоваля (не массив) по `email` (поле `email`, он уникальный).
 70 | 
 71 | ```js
 72 | const getUserWithEmail = (users, email) => {
 73 |   // твой код
 74 | };
 75 | 
 76 | console.log(getUserWithEmail(users, 'shereeanthony@kog.com')); // {объект пользователя Sheree Anthony}
 77 | console.log(getUserWithEmail(users, 'elmahead@omatom.com')); // {объект пользователя Elma Head}
 78 | ```
 79 | 
 80 | # Задание 6
 81 | 
 82 | Получить массив пользователей попадающих в возрастную категорию от `min` до
 83 | `max` лет (поле `age`).
 84 | 
 85 | ```js
 86 | const getUsersWithAge = (users, min, max) => {
 87 |   // твой код
 88 | };
 89 | 
 90 | console.log(getUsersWithAge(users, 20, 30)); // [объект Ross Vazquez, объект Elma Head, объект Carey Barr]
 91 | 
 92 | console.log(getUsersWithAge(users, 30, 40));
 93 | // [объект Moore Hensley, объект Sharlene Bush, объект Blackburn Dotson, объект Sheree Anthony]
 94 | ```
 95 | 
 96 | # Задание 7
 97 | 
 98 | Получить общую сумму баланса (поле `balance`) всех пользователей.
 99 | 
100 | ```js
101 | const calculateTotalBalance = users => {
102 |   // твой код
103 | };
104 | 
105 | console.log(calculateTotalBalance(users)); // 20916
106 | ```
107 | 
108 | # Задание 8
109 | 
110 | Массив имен всех пользователей у которых есть друг с указанным именем.
111 | 
112 | ```js
113 | const getUsersWithFriend = (users, friendName) => {
114 |   // твой код
115 | };
116 | 
117 | console.log(getUsersWithFriend(users, 'Briana Decker')); // [ 'Sharlene Bush', 'Sheree Anthony' ]
118 | console.log(getUsersWithFriend(users, 'Goldie Gentry')); // [ 'Elma Head', 'Sheree Anthony' ]
119 | ```
120 | 
121 | # Задание 9
122 | 
123 | Массив имен (поле `name`) людей, отсортированных в зависимости от количества их
124 | друзей (поле `friends`)
125 | 
126 | ```js
127 | const getNamesSortedByFriendsCount = users => {
128 |   // твой код
129 | };
130 | 
131 | console.log(getNamesSortedByFriendsCount(users));
132 | // [ 'Moore Hensley', 'Sharlene Bush', 'Elma Head', 'Carey Barr', 'Blackburn Dotson', 'Sheree Anthony', 'Ross Vazquez' ]
133 | ```
134 | 
135 | # Задание 10
136 | 
137 | Получить массив всех умений всех пользователей (поле `skills`), при этом не
138 | должно быть повторяющихся умений и они должны быть отсортированы в алфавитном
139 | порядке.
140 | 
141 | ```js
142 | const getSortedUniqueSkills = users => {
143 |   // твой код
144 | };
145 | 
146 | console.log(getSortedUniqueSkills(users));
147 | // [ 'adipisicing', 'amet', 'anim', 'commodo', 'culpa', 'elit', 'ex', 'ipsum', 'irure', 'laborum', 'lorem', 'mollit', 'non', 'nostrud', 'nulla', 'proident', 'tempor', 'velit', 'veniam' ]
148 | ```
149 | 


--------------------------------------------------------------------------------
/homework-06/README.ua.md:
--------------------------------------------------------------------------------
  1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
  2 | 
  3 | # Критерії прийому
  4 | 
  5 | - Створено репозиторій `goit-js-hw-06`
  6 | - При здачі домашньої роботи є посилання на вихідні файли в репозиторії
  7 | - Всі завдання виконані в одному файлі, в який імпортується масив користувачів.
  8 | - Імена змінних зрозумілі, описові
  9 | - Код відформатований за допомогою Prettier
 10 | 
 11 | # ТЗ
 12 | 
 13 | Напиши функції які за допомогою перебираючих методів масиву (ніяких `for`,
 14 | `splice` і т. д.) виконують наступні операції над масивом об'єктів
 15 | користувачів з файлу [users.js](./users.js).
 16 | 
 17 | # Завдання 1
 18 | 
 19 | Отримати масив імен всіх користувачів (поле `name`).
 20 | 
 21 | ```js
 22 | const getUserNames = users => {
 23 |   // твій код
 24 | };
 25 | 
 26 | console.log(getUserNames(users));
 27 | // [ 'Moore Hensley', 'Sharlene Bush', 'Ross Vazquez', 'Elma Head', 'Carey Barr', 'Blackburn Dotson', 'Sheree Anthony' ]
 28 | ```
 29 | 
 30 | # Завдання 2
 31 | 
 32 | Отримати масив об'єктів користувачів за кольором очей (поле `eyeColor`).
 33 | 
 34 | ```js
 35 | const getUsersWithEyeColor = (users, color) => {
 36 |   // твій код
 37 | };
 38 | 
 39 | console.log(getUsersWithEyeColor(users, 'blue')); // [об'єкт Moore Hensley, об'єкт Sharlene Bush, об'єкт Carey Barr]
 40 | ```
 41 | 
 42 | # Завдання 3
 43 | 
 44 | Отримати масив імен користувачів за статтю (поле `gender`).
 45 | 
 46 | ```js
 47 | const getUsersWithGender = (users, gender) => {
 48 |   // твій код
 49 | };
 50 | 
 51 | console.log(getUsersWithGender(users, 'male')); // [ 'Moore Hensley', 'Ross Vazquez', 'Carey Barr', 'Blackburn Dotson' ]
 52 | ```
 53 | 
 54 | # Завдання 4
 55 | 
 56 | Отримати масив тільки неактивних користувачів (поле `isActive`).
 57 | 
 58 | ```js
 59 | const getInactiveUsers = users => {
 60 |   // твій код
 61 | };
 62 | 
 63 | console.log(getInactiveUsers(users)); // [об'єкт Moore Hensley, об'єкт Ross Vazquez, об'єкт Blackburn Dotson]
 64 | ```
 65 | 
 66 | # Завдання 5
 67 | 
 68 | Отримати користувача (не масив) по `email` (поле `email`, він унікальний).
 69 | 
 70 | ```js
 71 | const getUserWithEmail = (users, email) => {
 72 |   // твій код
 73 | };
 74 | 
 75 | console.log(getUserWithEmail(users, 'shereeanthony@kog.com')); // {об'єкт користувача Sheree Anthony}
 76 | console.log(getUserWithEmail(users, 'elmahead@omatom.com')); // {об'єкт користувача Elma Head}
 77 | ```
 78 | 
 79 | # Завдання 6
 80 | 
 81 | Отримати масив користувачів, які потрапляють у вікову категорію від `min` до
 82 | `max` років (поле `age`).
 83 | 
 84 | ```js
 85 | const getUsersWithAge = (users, min, max) => {
 86 |   // твій код
 87 | };
 88 | 
 89 | console.log(getUsersWithAge(users, 20, 30)); // [об'єкт Ross Vazquez, об'єкт Elma Head, об'єкт Carey Barr]
 90 | 
 91 | console.log(getUsersWithAge(users, 30, 40));
 92 | // [об'єкт Moore Hensley, об'єкт Sharlene Bush, об'єкт Blackburn Dotson, об'єкт Sheree Anthony]
 93 | ```
 94 | 
 95 | # Завдання 7
 96 | 
 97 | Отримати загальну суму балансу (поле `balance`) всіх користувачів.
 98 | 
 99 | ```js
100 | const calculateTotalBalance = users => {
101 |   // твій код
102 | };
103 | 
104 | console.log(calculateTotalBalance(users)); // 20916
105 | ```
106 | 
107 | # Завдання 8
108 | 
109 | Масив імен всіх користувачів у яких є друг із зазначеним ім'ям.
110 | 
111 | ```js
112 | const getUsersWithFriend = (users, friendName) => {
113 |   // твій код
114 | };
115 | 
116 | console.log(getUsersWithFriend(users, 'Briana Decker')); // [ 'Sharlene Bush', 'Sheree Anthony' ]
117 | console.log(getUsersWithFriend(users, 'Goldie Gentry')); // [ 'Elma Head', 'Sheree Anthony' ]
118 | ```
119 | 
120 | # Завдання 9
121 | 
122 | Масив імен (поле `name`) людей, відсортованих в залежності від кількості їх
123 | друзів (поле `friends`)
124 | 
125 | ```js
126 | const getNamesSortedByFriendsCount = users => {
127 |   // твій код
128 | };
129 | 
130 | console.log(getNamesSortedByFriendsCount(users));
131 | // [ 'Moore Hensley', 'Sharlene Bush', 'Elma Head', 'Carey Barr', 'Blackburn Dotson', 'Sheree Anthony', 'Ross Vazquez' ]
132 | ```
133 | 
134 | # Завдання 10
135 | 
136 | Отримати масив всіх умінь всіх користувачів (поле `skills`), при цьому не
137 | має бути повторюваних умінь і вони повинні бути відсортовані в алфавітному
138 | порядку.
139 | 
140 | ```js
141 | const getSortedUniqueSkills = users => {
142 |   // твій код
143 | };
144 | 
145 | console.log(getSortedUniqueSkills(users));
146 | // [ 'adipisicing', 'amet', 'anim', 'commodo', 'culpa', 'elit', 'ex', 'ipsum', 'irure', 'laborum', 'lorem', 'mollit', 'non', 'nostrud', 'nulla', 'proident', 'tempor', 'velit', 'veniam' ]
147 | ```
148 | 


--------------------------------------------------------------------------------
/homework-06/users.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 |   {
 3 |     id: '701b29c3-b35d-4cf1-a5f6-8b12b29a5081',
 4 |     name: 'Moore Hensley',
 5 |     email: 'moorehensley@indexia.com',
 6 |     eyeColor: 'blue',
 7 |     friends: ['Sharron Pace'],
 8 |     isActive: false,
 9 |     balance: 2811,
10 |     skills: ['ipsum', 'lorem'],
11 |     gender: 'male',
12 |     age: 37,
13 |   },
14 |   {
15 |     id: '7a3cbd18-57a1-4534-8e12-1caad921bda1',
16 |     name: 'Sharlene Bush',
17 |     email: 'sharlenebush@tubesys.com',
18 |     eyeColor: 'blue',
19 |     friends: ['Briana Decker', 'Sharron Pace'],
20 |     isActive: true,
21 |     balance: 3821,
22 |     skills: ['tempor', 'mollit', 'commodo', 'veniam', 'laborum'],
23 |     gender: 'female',
24 |     age: 34,
25 |   },
26 |   {
27 |     id: '88beb2f3-e4c2-49f3-a0a0-ecf957a95af3',
28 |     name: 'Ross Vazquez',
29 |     email: 'rossvazquez@xinware.com',
30 |     eyeColor: 'green',
31 |     friends: ['Marilyn Mcintosh', 'Padilla Garrison', 'Naomi Buckner'],
32 |     isActive: false,
33 |     balance: 3793,
34 |     skills: ['nulla', 'anim', 'proident', 'ipsum', 'elit'],
35 |     gender: 'male',
36 |     age: 24,
37 |   },
38 |   {
39 |     id: '249b6175-5c30-44c6-b154-f120923736f5',
40 |     name: 'Elma Head',
41 |     email: 'elmahead@omatom.com',
42 |     eyeColor: 'green',
43 |     friends: ['Goldie Gentry', 'Aisha Tran'],
44 |     isActive: true,
45 |     balance: 2278,
46 |     skills: ['adipisicing', 'irure', 'velit'],
47 |     gender: 'female',
48 |     age: 21,
49 |   },
50 |   {
51 |     id: '334f8cb3-eb04-45e6-abf4-4935dd439b70',
52 |     name: 'Carey Barr',
53 |     email: 'careybarr@nurali.com',
54 |     eyeColor: 'blue',
55 |     friends: ['Jordan Sampson', 'Eddie Strong'],
56 |     isActive: true,
57 |     balance: 3951,
58 |     skills: ['ex', 'culpa', 'nostrud'],
59 |     gender: 'male',
60 |     age: 27,
61 |   },
62 |   {
63 |     id: '150b00fb-dd82-427d-9faf-2879ea87c695',
64 |     name: 'Blackburn Dotson',
65 |     email: 'blackburndotson@furnigeer.com',
66 |     eyeColor: 'brown',
67 |     friends: ['Jacklyn Lucas', 'Linda Chapman'],
68 |     isActive: false,
69 |     balance: 1498,
70 |     skills: ['non', 'amet', 'ipsum'],
71 |     gender: 'male',
72 |     age: 38,
73 |   },
74 |   {
75 |     id: 'e1bf46ab-7168-491e-925e-f01e21394812',
76 |     name: 'Sheree Anthony',
77 |     email: 'shereeanthony@kog.com',
78 |     eyeColor: 'brown',
79 |     friends: ['Goldie Gentry', 'Briana Decker'],
80 |     isActive: true,
81 |     balance: 2764,
82 |     skills: ['lorem', 'veniam', 'culpa'],
83 |     gender: 'female',
84 |     age: 39,
85 |   },
86 | ];
87 | 


--------------------------------------------------------------------------------
/homework-07/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Страница навигации</title>
 8 |     <style>
 9 |       body {
10 |         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
11 |           Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12 |         background-color: #fff;
13 |         color: #424242;
14 |         line-height: 1.5;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <ul>
20 |       <li><a href="task-01.html">Задание 1</a></li>
21 |       <li><a href="task-02.html">Задание 2</a></li>
22 |       <li><a href="task-03.html">Задание 3</a></li>
23 |       <li><a href="task-04.html">Задание 4</a></li>
24 |       <li><a href="task-05.html">Задание 5</a></li>
25 |       <li><a href="task-06.html">Задание 6</a></li>
26 |       <li><a href="task-07.html">Задание 7</a></li>
27 |       <li><a href="task-08.html">Задание 8</a></li>
28 |     </ul>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/homework-07/src/js/task-01.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/homework-07/src/js/task-01.js


--------------------------------------------------------------------------------
/homework-07/src/js/task-02.js:
--------------------------------------------------------------------------------
1 | const ingredients = [
2 |   'Картошка',
3 |   'Грибы',
4 |   'Чеснок',
5 |   'Помидоры',
6 |   'Зелень',
7 |   'Приправы',
8 | ];
9 | 


--------------------------------------------------------------------------------
/homework-07/src/js/task-03.js:
--------------------------------------------------------------------------------
 1 | const images = [
 2 |   {
 3 |     url: 'https://images.pexels.com/photos/140134/pexels-photo-140134.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
 4 |     alt: 'White and Black Long Fur Cat',
 5 |   },
 6 |   {
 7 |     url: 'https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
 8 |     alt: 'Orange and White Koi Fish Near Yellow Koi Fish',
 9 |   },
10 |   {
11 |     url: 'https://images.pexels.com/photos/219943/pexels-photo-219943.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
12 |     alt: 'Group of Horses Running',
13 |   },
14 | ];
15 | 


--------------------------------------------------------------------------------
/homework-07/src/js/task-04.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/homework-07/src/js/task-04.js


--------------------------------------------------------------------------------
/homework-07/src/js/task-05.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/homework-07/src/js/task-05.js


--------------------------------------------------------------------------------
/homework-07/src/js/task-06.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/homework-07/src/js/task-06.js


--------------------------------------------------------------------------------
/homework-07/src/js/task-07.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/homework-07/src/js/task-07.js


--------------------------------------------------------------------------------
/homework-07/src/js/task-08.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/homework-07/src/js/task-08.js


--------------------------------------------------------------------------------
/homework-07/src/task-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Задание 1</title>
 8 |     <style>
 9 |       body {
10 |         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
11 |           Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12 |         background-color: #fff;
13 |         color: #424242;
14 |         line-height: 1.5;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <p><a href="index.html">На главную</a></p>
20 | 
21 |     <ul id="categories">
22 |       <li class="item">
23 |         <h2>Животные</h2>
24 | 
25 |         <ul>
26 |           <li>Кот</li>
27 |           <li>Хомяк</li>
28 |           <li>Лошадь</li>
29 |           <li>Попугай</li>
30 |         </ul>
31 |       </li>
32 |       <li class="item">
33 |         <h2>Продукты</h2>
34 | 
35 |         <ul>
36 |           <li>Хлеб</li>
37 |           <li>Петрушка</li>
38 |           <li>Творог</li>
39 |         </ul>
40 |       </li>
41 |       <li class="item">
42 |         <h2>Технологии</h2>
43 | 
44 |         <ul>
45 |           <li>HTML</li>
46 |           <li>CSS</li>
47 |           <li>JavaScript</li>
48 |           <li>React</li>
49 |           <li>Node</li>
50 |         </ul>
51 |       </li>
52 |     </ul>
53 | 
54 |     <script src="./js/task-01.js" type="module"></script>
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/homework-07/src/task-02.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Задание 2</title>
 8 |     <style>
 9 |       body {
10 |         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
11 |           Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12 |         background-color: #fff;
13 |         color: #424242;
14 |         line-height: 1.5;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <p><a href="index.html">На главную</a></p>
20 | 
21 |     <ul id="ingredients"></ul>
22 | 
23 |     <script src="./js/task-02.js" type="module"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/homework-07/src/task-03.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Задание 3</title>
 8 |     <style>
 9 |       body {
10 |         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
11 |           Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12 |         background-color: #fff;
13 |         color: #424242;
14 |         line-height: 1.5;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <p><a href="index.html">На главную</a></p>
20 | 
21 |     <ul id="gallery"></ul>
22 | 
23 |     <script src="./js/task-03.js" type="module"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/homework-07/src/task-04.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Задание 4</title>
 8 |     <style>
 9 |       body {
10 |         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
11 |           Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12 |         background-color: #fff;
13 |         color: #424242;
14 |         line-height: 1.5;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <p><a href="index.html">На главную</a></p>
20 | 
21 |     <div id="counter">
22 |       <button type="button" data-action="decrement">-1</button>
23 |       <span id="value">0</span>
24 |       <button type="button" data-action="increment">+1</button>
25 |     </div>
26 | 
27 |     <script src="./js/task-04.js" type="module"></script>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/homework-07/src/task-05.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Задание 5</title>
 8 |     <style>
 9 |       body {
10 |         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
11 |           Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12 |         background-color: #fff;
13 |         color: #424242;
14 |         line-height: 1.5;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <p><a href="index.html">На главную</a></p>
20 | 
21 |     <input type="text" placeholder="Ваше имя?" id="name-input" />
22 |     <h1>Привет, <span id="name-output">незнакомец</span>!</h1>
23 | 
24 |     <script src="./js/task-05.js" type="module"></script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/homework-07/src/task-06.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Задание 6</title>
 8 |     <style>
 9 |       body {
10 |         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
11 |           Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12 |         background-color: #fff;
13 |         color: #424242;
14 |         line-height: 1.5;
15 |       }
16 | 
17 |       #validation-input {
18 |         border: 3px solid #bdbdbd;
19 |       }
20 | 
21 |       #validation-input.valid {
22 |         border-color: #4caf50;
23 |       }
24 | 
25 |       #validation-input.invalid {
26 |         border-color: #f44336;
27 |       }
28 |     </style>
29 |   </head>
30 |   <body>
31 |     <p><a href="index.html">На главную</a></p>
32 | 
33 |     <input
34 |       type="text"
35 |       id="validation-input"
36 |       data-length="6"
37 |       placeholder="Введи 6 символов"
38 |     />
39 | 
40 |     <script src="./js/task-06.js" type="module"></script>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/homework-07/src/task-07.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Задание 7</title>
 8 |     <style>
 9 |       body {
10 |         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
11 |           Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12 |         background-color: #fff;
13 |         color: #424242;
14 |         line-height: 1.5;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <p><a href="index.html">На главную</a></p>
20 | 
21 |     <input id="font-size-control" type="range" />
22 |     <br />
23 |     <span id="text">Абракадабра!</span>
24 | 
25 |     <script src="./js/task-07.js" type="module"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/homework-07/src/task-08.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Задание 8</title>
 8 |     <style>
 9 |       body {
10 |         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
11 |           Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12 |         line-height: 1.5;
13 |       }
14 |     </style>
15 |   </head>
16 |   <body>
17 |     <p><a href="index.html">На главную</a></p>
18 | 
19 |     <div id="controls">
20 |       <input type="number" min="0" max="100" step="1" />
21 |       <button type="button" data-action="render">Создать</button>
22 |       <button type="button" data-action="destroy">Очистить</button>
23 |     </div>
24 | 
25 |     <div id="boxes"></div>
26 | 
27 |     <script src="./js/task-08.js" type="module"></script>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/homework-08/README.md:
--------------------------------------------------------------------------------
 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
 2 | 
 3 | # Критерии приема
 4 | 
 5 | - Создан репозиторий `goit-js-hw-08-gallery`.
 6 | - При сдаче домашней работы есть две ссылки: на исходные файлы и рабочую
 7 |   страницу на GitHub pages.
 8 | - При посещении рабочей страницы (GitHub pages) задания, в консоли нету ошибок и
 9 |   предупреждений.
10 | - Имена переменных и функций понятные, описательные.
11 | - Код отформатирован с помощью Prettier.
12 | 
13 | ## Задание
14 | 
15 | Создай галерею с возможностью клика по ее элементам и просмотра полноразмерного
16 | изображения в модальном окне. Превью результата посмотри
17 | [по ссылке](https://take.ms/ZvBD0E).
18 | 
19 | ![Превью](preview.jpg)
20 | 
21 | Разбей задание на несколько подзадач:
22 | 
23 | - Создание и рендер разметки по массиву данных `galleryItems` из `app.js` и
24 |   предоставленному шаблону.
25 | - Реализация делегирования на галерее `ul.js-gallery` и получение `url` большого
26 |   изображения.
27 | - Открытие модального окна по клику на элементе галереи.
28 | - Подмена значения атрибута `src` элемента `img.lightbox__image`.
29 | - Закрытие модального окна по клику на кнопку
30 |   `button[data-action="close-lightbox"]`.
31 | - Очистка значения атрибута `src` элемента `img.lightbox__image`. Это необходимо
32 |   для того, чтобы при следующем открытии модального окна, пока грузится
33 |   изображение, мы не видели предыдущее.
34 | 
35 | ## Стартовые файлы
36 | 
37 | - В папке [src](./src) ты найдешь стартовые файлы проекта с базовой разметкой и
38 |   готовыми стилями.
39 | - В файле `app.js` есть массив `galleryItems`, который содержит объекты с
40 |   информацией о изображениях: маленькое изображение, оригинальное и описание.
41 | 
42 | ## Разметка элемента галереи
43 | 
44 | Ссылка на оригинальное изображение должна храниться в data-атрибуте `source` на
45 | элементе `img`, и указываться в `href` ссылки (это необходимо для доступности).
46 | 
47 | ```html
48 | <li class="gallery__item">
49 |   <a
50 |     class="gallery__link"
51 |     href="https://cdn.pixabay.com/photo/2010/12/13/10/13/tulips-2546_1280.jpg"
52 |   >
53 |     <img
54 |       class="gallery__image"
55 |       src="https://cdn.pixabay.com/photo/2010/12/13/10/13/tulips-2546__340.jpg"
56 |       data-source="https://cdn.pixabay.com/photo/2010/12/13/10/13/tulips-2546_1280.jpg"
57 |       alt="Tulips"
58 |     />
59 |   </a>
60 | </li>
61 | ```
62 | 
63 | ## Дополнительно
64 | 
65 | Следующий функционал не обязателен при сдаче задания, но будет хорошей практикой
66 | по работе с событиями.
67 | 
68 | - Закрытие модального окна по клику на `div.lightbox__overlay`.
69 | - Закрытие модального окна по нажатию клавиши `ESC`.
70 | - Пролистывание изображений галереи в открытом модальном окне клавишами "влево"
71 |   и "вправо".
72 | 


--------------------------------------------------------------------------------
/homework-08/README.ua.md:
--------------------------------------------------------------------------------
 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
 2 | 
 3 | # Критерії прийому
 4 | 
 5 | - Створено репозиторій `goit-js-hw-08-gallery`.
 6 | - При здачі домашньої роботи є два посилання: на вихідні файли і робочу сторінку
 7 |   на GitHub pages.
 8 | - При відвідуванні робочої сторінки (GitHub pages) завдання, в консолі немає
 9 |   помилок і попереджень.
10 | - Імена змінних та функцій зрозумілі, описові.
11 | - Код відформатований за допомогою Prettier.
12 | 
13 | ## Завдання
14 | 
15 | Створи галерею з можливістю кліка по її елементах і перегляду повнорозмірного
16 | зображення в модальному вікні. Прев'ю результату подивися
17 | [за посиланням](https://take.ms/ZvBD0E).
18 | 
19 | ![Прев'ю](preview.jpg)
20 | 
21 | Розбий завдання на кілька підзадач:
22 | 
23 | - Створення і рендер розмітки по масиву даних `galleryItems` з `app.js` і
24 |   наданим шаблоном.
25 | - Реалізація делегування на галереї `ul.js-gallery` і отримання `url` великого
26 |   зображення.
27 | - Відкриття модального вікна при натисканні на елементі галереї.
28 | - Підміна значення атрибута `src` елемента `img.lightbox__image`.
29 | - Закриття модального вікна при натисканні на кнопку
30 |   `button[data-action=""close-lightbox"]`.
31 | - Очищення значення атрибута `src` елемента `img.lightbox__image`. Це необхідно
32 |     для того, щоб при наступному відкритті модального вікна, поки вантажиться
33 |     зображення, ми не бачили попереднє.
34 | 
35 | ## Стартові файли
36 | 
37 | - В папці [src](./src) ти знайдеш стартові файли проєкту з базовою розміткою і
38 |   готовими стилями.
39 | - В файлі `app.js` є масив об'єктів `galleryItems`, які містять інформацію про
40 |   зображення: маленьке зображення, оригінальне і опис.
41 | 
42 | ## Розмітка елемента галереї
43 | 
44 | Посилання на оригінальне зображення повинне зберігатися в data-атрибуті `source`
45 | на елементі `img`, і вказуватися в `href` посилання (це необхідно для
46 | доступності).
47 | 
48 | ```html
49 | <li class="gallery__item">
50 |   <a
51 |     class="gallery__link"
52 |     href="https://cdn.pixabay.com/photo/2010/12/13/10/13/tulips-2546_1280.jpg"
53 |   >
54 |     <img
55 |       class="gallery__image"
56 |       src="https://cdn.pixabay.com/photo/2010/12/13/10/13/tulips-2546__340.jpg"
57 |       data-source="https://cdn.pixabay.com/photo/2010/12/13/10/13/tulips-2546_1280.jpg"
58 |       alt="Tulips"
59 |     />
60 |   </a>
61 | </li>
62 | ```
63 | 
64 | ## Додатково
65 | 
66 | Наступний функціонал не обов'язковий при здачі завдання, але буде хорошою
67 | практикою по роботі з подіями.
68 | 
69 | - Закриття модального вікна при натисканні на `div.lightbox__overlay`.
70 | - Закриття модального вікна після натискання клавіші `ESC`.
71 | - Перегортування зображень галереї у відкритому модальному вікні клавішами
72 |   "вліво"   і "вправо".
73 | 


--------------------------------------------------------------------------------
/homework-08/preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/homework-08/preview.jpg


--------------------------------------------------------------------------------
/homework-08/src/app.js:
--------------------------------------------------------------------------------
 1 | const galleryItems = [
 2 |   {
 3 |     preview:
 4 |       'https://cdn.pixabay.com/photo/2019/05/14/16/43/himilayan-blue-poppy-4202825__340.jpg',
 5 |     original:
 6 |       'https://cdn.pixabay.com/photo/2019/05/14/16/43/himilayan-blue-poppy-4202825_1280.jpg',
 7 |     description: 'Hokkaido Flower',
 8 |   },
 9 |   {
10 |     preview:
11 |       'https://cdn.pixabay.com/photo/2019/05/14/22/05/container-4203677__340.jpg',
12 |     original:
13 |       'https://cdn.pixabay.com/photo/2019/05/14/22/05/container-4203677_1280.jpg',
14 |     description: 'Container Haulage Freight',
15 |   },
16 |   {
17 |     preview:
18 |       'https://cdn.pixabay.com/photo/2019/05/16/09/47/beach-4206785__340.jpg',
19 |     original:
20 |       'https://cdn.pixabay.com/photo/2019/05/16/09/47/beach-4206785_1280.jpg',
21 |     description: 'Aerial Beach View',
22 |   },
23 |   {
24 |     preview:
25 |       'https://cdn.pixabay.com/photo/2016/11/18/16/19/flowers-1835619__340.jpg',
26 |     original:
27 |       'https://cdn.pixabay.com/photo/2016/11/18/16/19/flowers-1835619_1280.jpg',
28 |     description: 'Flower Blooms',
29 |   },
30 |   {
31 |     preview:
32 |       'https://cdn.pixabay.com/photo/2018/09/13/10/36/mountains-3674334__340.jpg',
33 |     original:
34 |       'https://cdn.pixabay.com/photo/2018/09/13/10/36/mountains-3674334_1280.jpg',
35 |     description: 'Alpine Mountains',
36 |   },
37 |   {
38 |     preview:
39 |       'https://cdn.pixabay.com/photo/2019/05/16/23/04/landscape-4208571__340.jpg',
40 |     original:
41 |       'https://cdn.pixabay.com/photo/2019/05/16/23/04/landscape-4208571_1280.jpg',
42 |     description: 'Mountain Lake Sailing',
43 |   },
44 |   {
45 |     preview:
46 |       'https://cdn.pixabay.com/photo/2019/05/17/09/27/the-alps-4209272__340.jpg',
47 |     original:
48 |       'https://cdn.pixabay.com/photo/2019/05/17/09/27/the-alps-4209272_1280.jpg',
49 |     description: 'Alpine Spring Meadows',
50 |   },
51 |   {
52 |     preview:
53 |       'https://cdn.pixabay.com/photo/2019/05/16/21/10/landscape-4208255__340.jpg',
54 |     original:
55 |       'https://cdn.pixabay.com/photo/2019/05/16/21/10/landscape-4208255_1280.jpg',
56 |     description: 'Nature Landscape',
57 |   },
58 |   {
59 |     preview:
60 |       'https://cdn.pixabay.com/photo/2019/05/17/04/35/lighthouse-4208843__340.jpg',
61 |     original:
62 |       'https://cdn.pixabay.com/photo/2019/05/17/04/35/lighthouse-4208843_1280.jpg',
63 |     description: 'Lighthouse Coast Sea',
64 |   },
65 | ];
66 | 


--------------------------------------------------------------------------------
/homework-08/src/css/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  3 |   --animation-duration: 250ms;
  4 | }
  5 | 
  6 | html {
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | *,
 11 | *::before,
 12 | *::after {
 13 |   box-sizing: inherit;
 14 | }
 15 | 
 16 | body {
 17 |   display: flex;
 18 |   align-items: center;
 19 |   justify-content: center;
 20 |   min-height: 100vh;
 21 |   margin: 0;
 22 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 23 |     Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
 24 |   background-color: #fff;
 25 |   color: #212121;
 26 | }
 27 | 
 28 | .gallery {
 29 |   display: grid;
 30 |   width: 1200px;
 31 |   grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
 32 |   grid-auto-rows: 240px;
 33 |   grid-gap: 12px;
 34 |   padding: 0;
 35 |   list-style: none;
 36 |   margin-left: auto;
 37 |   margin-right: auto;
 38 | }
 39 | 
 40 | .gallery__item {
 41 |   position: relative;
 42 |   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
 43 |     0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
 44 | }
 45 | 
 46 | .gallery__image:hover {
 47 |   transform: scale(1.03);
 48 | }
 49 | 
 50 | .gallery__image {
 51 |   height: 100%;
 52 |   width: 100%;
 53 |   object-fit: cover;
 54 |   transition: transform var(--animation-duration) var(--timing-function);
 55 | }
 56 | 
 57 | .gallery__link {
 58 |   display: block;
 59 |   text-decoration: none;
 60 |   height: 100%;
 61 | }
 62 | 
 63 | .gallery__link:hover {
 64 |   cursor: zoom-in;
 65 | }
 66 | 
 67 | /* Lightbox */
 68 | .lightbox {
 69 |   display: flex;
 70 |   align-items: center;
 71 |   justify-content: center;
 72 |   position: fixed;
 73 |   top: 0;
 74 |   left: 0;
 75 |   width: 100vw;
 76 |   height: 100vh;
 77 |   opacity: 0;
 78 |   pointer-events: none;
 79 |   transition: opacity var(--animation-duration) var(--timing-function);
 80 | }
 81 | 
 82 | .lightbox.is-open {
 83 |   opacity: 1;
 84 |   pointer-events: initial;
 85 | }
 86 | 
 87 | .lightbox__overlay {
 88 |   position: absolute;
 89 |   top: 0;
 90 |   left: 0;
 91 |   width: 100vw;
 92 |   height: 100vh;
 93 |   background-color: rgba(0, 0, 0, 0.8);
 94 | }
 95 | 
 96 | .lightbox__content {
 97 |   transform: scale(0.95);
 98 |   transition: transform var(--animation-duration) var(--timing-function);
 99 | }
100 | 
101 | .lightbox.is-open .lightbox__content {
102 |   transform: scale(1);
103 | }
104 | 
105 | .lightbox__image {
106 |   display: block;
107 |   width: auto;
108 |   height: auto;
109 |   max-height: 100vh;
110 |   max-width: 100vw;
111 | }
112 | 
113 | .lightbox__button {
114 |   position: absolute;
115 |   top: 8px;
116 |   right: 8px;
117 |   display: flex;
118 |   align-items: center;
119 |   justify-content: center;
120 |   width: 48px;
121 |   height: 48px;
122 |   padding: 0;
123 |   margin: 0;
124 |   border: none;
125 |   border-radius: 50%;
126 |   background-color: transparent;
127 |   color: #fff;
128 |   cursor: pointer;
129 |   transition: background-color var(--animation-duration) var(--timing-function);
130 |   outline: none;
131 |   background-image: url('../images/icon-close.svg');
132 |   background-position: center;
133 |   background-size: 60%;
134 |   background-repeat: no-repeat;
135 | }
136 | 
137 | .lightbox__button:hover,
138 | .lightbox__button:focus {
139 |   background-color: rgba(0, 0, 0, 0.5);
140 | }
141 | 


--------------------------------------------------------------------------------
/homework-08/src/images/icon-close.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="#fff"/><path d="M0 0h24v24H0z" fill="none"/></svg>


--------------------------------------------------------------------------------
/homework-08/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Homework 8</title>
 8 |     <link rel="stylesheet" href="css/styles.css" />
 9 |   </head>
10 |   <body>
11 |     <!-- В этот список добавляй элементы галереи -->
12 |     <ul class="gallery js-gallery"></ul>
13 | 
14 |     <!--
15 |       Модальное окно для полноразмерного изображения
16 |       Для того чтобы открыть, необходимо добавить на div.lightbox CSS-класс is-open
17 |     -->
18 |     <div class="lightbox js-lightbox">
19 |       <div class="lightbox__overlay"></div>
20 | 
21 |       <div class="lightbox__content">
22 |         <img class="lightbox__image" src="" alt="" />
23 |       </div>
24 | 
25 |       <button
26 |         type="button"
27 |         class="lightbox__button"
28 |         data-action="close-lightbox"
29 |       ></button>
30 |     </div>
31 | 
32 |     <script src="app.js" type="module"></script>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/homework-09/README.md:
--------------------------------------------------------------------------------
 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
 2 | 
 3 | # Критерии приема
 4 | 
 5 | - Создан репозиторий `goit-js-hw-09-gallery`.
 6 | - При сдаче домашней работы есть две ссылки: на исходные файлы и рабочую
 7 |   страницу на GitHub Pages.
 8 | - При посещении рабочей страницы (GitHub Pages) задания, в консоли нету ошибок и
 9 |   предупреждений.
10 | - Проект собран с помощью `Parcel`.
11 | - Код отформатирован `Prettier`.
12 | 
13 | # Задание
14 | 
15 | Используй
16 | [parcel-project-template](https://github.com/goitacademy/parcel-project-template)
17 | для сборки и деплоя [домашнего задания 8](../homework-08/README.md).
18 | 
19 | - Если использовались библиотеки подключаемые через CDN, необходимо добавить их
20 |   как зависимости проекта (npm).
21 | - Выполни рефакторинг кода, распределив его по файлам и папкам сборки.
22 | 


--------------------------------------------------------------------------------
/homework-09/README.ua.md:
--------------------------------------------------------------------------------
 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
 2 | 
 3 | # Критерії прийому
 4 | 
 5 | - Створено репозиторій `goit-js-hw-09-gallery`.
 6 | - При здачі домашньої роботи є два посилання: на вихідні файли і робочу сторінку
 7 |   на GitHub pages.
 8 | - При відвідуванні робочої сторінки (GitHub pages) завдання, в консолі немає
 9 |   помилок і попереджень.
10 | - Проєкт зібраний з допомогою `Parcel`.
11 | - Код відформатований за допомогою `Prettier`.
12 | 
13 | # Задание
14 | 
15 | Используй
16 | [parcel-project-template](https://github.com/goitacademy/parcel-project-template)
17 | для сборки и деплоя [домашнего задания 8](../homework-08/README.md).
18 | 
19 | - Если использовались библиотеки подключаемые через CDN, необходимо добавить их
20 |   как зависимости проекта (npm).
21 | - Выполни рефакторинг кода, распределив его по файлам и папкам сборки.
22 | 


--------------------------------------------------------------------------------
/homework-10/README.md:
--------------------------------------------------------------------------------
  1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
  2 | 
  3 | # Критерии приема
  4 | 
  5 | - Создан репозиторий `goit-js-hw-10-food-service`.
  6 | - При сдаче домашней работы есть две ссылки: на исходные файлы и рабочую
  7 |   страницу на GitHub Pages.
  8 | - При посещении рабочей страницы (GitHub Pages) задания, в консоли нету ошибок и
  9 |   предупреждений.
 10 | - Имена переменных и функций понятные, описательные.
 11 | - Проект собран с помощью `Parcel`.
 12 | - Код отформатирован `Prettier`.
 13 | 
 14 | # Задание
 15 | 
 16 | Создай страницу меню с возможностью выбора темы для сервиса заказа еды.
 17 | [Ссылка на демо видео](https://take.ms/RxIlv).
 18 | 
 19 | ![Превью страницы](preview.jpg)
 20 | 
 21 | - Обязательно используй
 22 |   [parcel-project-template](https://github.com/goitacademy/parcel-project-template)
 23 |   для сборки и деплоя проекта.
 24 | - В папке [src](./src) ты найдешь стартовую разметку, стили и данные
 25 | - Массив объектов блюд лежит в [menu.json](./src/menu.json)
 26 | 
 27 | ## Тема
 28 | 
 29 | Добавь функционал изменения темы при нажатии (событие `change`) на чекбокс
 30 | `#theme-switch-toggle` в тулбаре.
 31 | 
 32 | - По умолчанию тема светлая.
 33 | - При изменении темы, необходимо добавлять на элемент `body` класс `light-theme`
 34 |   или `dark-theme`.
 35 | - Выбранная тема должна сохраняться между перезагрузками страницы. Для хранения
 36 |   темы используй `localStorage`.
 37 | - Если при загрузке страницы тема тёмная, не забудь поставить свойство `checked`
 38 |   у чекбокса `#theme-switch-toggle` в `true`, чтобы ползунок сдвинулся в
 39 |   правильное положение.
 40 | 
 41 | Для удобства хранения списка тем используй такое перечисление.
 42 | 
 43 | ```js
 44 | const Theme = {
 45 |   LIGHT: 'light-theme',
 46 |   DARK: 'dark-theme',
 47 | };
 48 | ```
 49 | 
 50 | ## Шаблонизация
 51 | 
 52 | Используя шаблонизатор [Handlebars](https://handlebarsjs.com/) создай шаблон
 53 | одного элемента меню. После чего, используя шаблон, создай разметку всего меню
 54 | по данным из [menu.json](./src/menu.json) и добавь в DOM в `ul.js-menu`.
 55 | 
 56 | Для иконок используется библиотека `Material Icons`, линк на веб-фонт уже есть в
 57 | исходном HTML.
 58 | 
 59 | Ниже указана разметка элемента меню которая должна получаться по шаблону (данные
 60 | будут разные для каждого объекта).
 61 | 
 62 | ```html
 63 | <li class="menu__item">
 64 |   <article class="card">
 65 |     <img
 66 |       src="https://s1.eda.ru/StaticContent/Photos/140812180013/140820212258/p_O.jpg"
 67 |       alt="Картофель, запеченный в мундире"
 68 |       class="card__image"
 69 |     />
 70 |     <div class="card__content">
 71 |       <h2 class="card__name">Картофель, запеченный в мундире</h2>
 72 |       <p class="card__price">
 73 |         <i class="material-icons"> monetization_on </i>
 74 |         100 кредитов
 75 |       </p>
 76 | 
 77 |       <p class="card__descr">
 78 |         Ароматный, сытный, шипящий домашний картофель, фаршированный
 79 |         сметанно-беконной начинкой, — это очень простой и очень эффектный способ
 80 |         накормить большое количество человек, практически не потратив на готовку
 81 |         ни сил, ни времени. Обычную картошку при желании тут можно заменить на
 82 |         сладкий батат, а в начинку добавить, к примеру, кукурузу или сладкий
 83 |         красный перец.
 84 |       </p>
 85 | 
 86 |       <ul class="tag-list">
 87 |         <li class="tag-list__item">Картофель</li>
 88 |         <li class="tag-list__item">Чеснок</li>
 89 |         <li class="tag-list__item">Сметана</li>
 90 |         <li class="tag-list__item">Бекон</li>
 91 |         <li class="tag-list__item">Твердый сыр</li>
 92 |         <li class="tag-list__item">Зеленый лук</li>
 93 |       </ul>
 94 |     </div>
 95 | 
 96 |     <button class="card__button button">
 97 |       <i class="material-icons button__icon"> shopping_cart </i>
 98 |       В корзину
 99 |     </button>
100 |   </article>
101 | </li>
102 | ```
103 | 


--------------------------------------------------------------------------------
/homework-10/README.ua.md:
--------------------------------------------------------------------------------
  1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
  2 | 
  3 | # Критерії прийому
  4 | 
  5 | - Створено репозиторій `goit-js-hw-10-food-service`.
  6 | - При здачі домашньої роботи є два посилання: на вихідні файли і робочу сторінку
  7 |   на GitHub pages.
  8 | - При відвідуванні робочої сторінки (GitHub pages) завдання, в консолі немає
  9 |   помилок і попереджень.
 10 | - Імена змінних та функцій зрозумілі, описові.
 11 | - Проєкт зібраний з допомогою `Parcel`.
 12 | - Код відформатований за допомогою `Prettier`.
 13 | 
 14 | # Завдання
 15 | 
 16 | Створи сторінку меню з можливістю вибору теми для сервісу замовлення їжі.
 17 | [Посилання на демо відео](https://take.ms/RxIlv).
 18 | 
 19 | ![Прев'ю](preview.jpg)
 20 | 
 21 | - Обов'язково використовуй
 22 |   [parcel-project-template](https://github.com/goitacademy/parcel-project-template)
 23 |   для збирання та деплоя проекта.
 24 | - В папці [src](./src) ти знайдеш стартову розмітку, стилі і дані
 25 | - Масив об'єктів страв лежить в [menu.json](./src/menu.json)
 26 | 
 27 | ## Тема
 28 | 
 29 | Реалізуй функціонал зміни теми при натисканні (подія `change`) на чекбокс
 30 | `#theme-switch-toggle` в тулбарі.
 31 | 
 32 | - За замовчуванням тема світла.
 33 | - При зміні теми, необхідно додавати на елемент `body` клас `light-theme` або
 34 |   `dark-theme`.
 35 | - Обрана тема повинна зберігатися між перезавантаженнями сторінки. Для
 36 |   зберігання   активної теми використовуй localStorage.
 37 | - Якщо при завантаженні сторінки тема темна, не забудь поставити властивість
 38 |   `checked` у чекбокса `#theme-switch-toggle` в `true`, щоб повзунок зрушився в
 39 |      правильне положення.
 40 | 
 41 | Для зручності зберігання списку тем використовуй таке перерахування `Theme`.
 42 | 
 43 | ```js
 44 | const Theme = {
 45 |   LIGHT: 'light-theme',
 46 |   DARK: 'dark-theme',
 47 | };
 48 | ```
 49 | 
 50 | ## Шаблонізація
 51 | 
 52 | Використовуючи шаблонізатор [Handlebars](https://handlebarsjs.com/) створи
 53 | шаблон одного елемента меню. Після чого, використовуючи шаблон, створи розмітку
 54 | всього меню за даними з [menu.json](./src/menu.json) і додай в DOM в
 55 | `ul.js-menu`.
 56 | 
 57 | Для іконок використовуємо `Material Icons`, лінк на веб-фонт вже є в вихідному
 58 | HTML.
 59 | 
 60 | Нижче вказана розмітка елемента меню яка повинна виходити за шаблоном (дані
 61 | будуть різні для кожного об'єкта).
 62 | 
 63 | ```html
 64 | <li class="menu__item">
 65 |   <div class="card">
 66 |     <img
 67 |       src="https://s1.eda.ru/StaticContent/Photos/140812180013/140820212258/p_O.jpg"
 68 |       alt="Картопля, запечена в мундирі"
 69 |       class="card__image"
 70 |     />
 71 |     <div class="card__content">
 72 |       <h2 class="card__name">Картопля, запечена в мундирі</h2>
 73 |       <p class="card__price">
 74 |         <i class="material-icons"> monetization_on </i>
 75 |         100 кредитів
 76 |       </p>
 77 | 
 78 |       <p class="card__descr">
 79 |         Ароматна, ситна, шипляча домашня картопля, фарширована сметанно-беконною
 80 |         начинкою, - це дуже простий і дуже ефектний спосіб нагодувати велику
 81 |         кількість людей, практично не витративши на підготовку ні сил, ні часу.
 82 |         Звичайну картоплю при бажанні тут можна замінити на солодкий батат, а в
 83 |         начинку додати, наприклад, кукурудзу або солодкий червоний перець.
 84 |       </p>
 85 | 
 86 |       <ul class="tag-list">
 87 |         <li class="tag-list__item">Картопля</li>
 88 |         <li class="tag-list__item">Часник</li>
 89 |         <li class="tag-list__item">Сметана</li>
 90 |         <li class="tag-list__item">Бекон</li>
 91 |         <li class="tag-list__item">Твердий сир</li>
 92 |         <li class="tag-list__item">Зелена цибуля</li>
 93 |       </ul>
 94 |     </div>
 95 | 
 96 |     <button class="card__button button">
 97 |       <i class="material-icons button__icon"> shopping_cart </i>
 98 |       В корзину
 99 |     </button>
100 |   </div>
101 | </li>
102 | ```
103 | 


--------------------------------------------------------------------------------
/homework-10/preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/homework-10/preview.jpg


--------------------------------------------------------------------------------
/homework-10/src/images/sprite.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" style="position:absolute;width:0;height:0" xmlns="http://www.w3.org/2000/svg" overflow="hidden"><defs><symbol id="moon" viewBox="0 0 32 32"><path fill="currentColor" d="M17.701 32a15.97 15.97 0 0012.429-5.925c.442-.544-.04-1.339-.723-1.209-7.763 1.478-14.891-4.474-14.891-12.31 0-4.514 2.416-8.665 6.344-10.9.605-.345.453-1.262-.235-1.389-.879-.17-1.89-.267-2.923-.268-8.832 0-16 7.157-16 16 0 8.832 7.157 16 16 16z"/></symbol><symbol id="sun" viewBox="0 0 32 32"><path fill="currentColor" d="M16 10c-3.306 0-6 2.694-6 6s2.694 6 6 6 6-2.694 6-6-2.694-6-6-6zm15.4 5.031l-5.919-2.956L27.575 5.8c.281-.85-.525-1.656-1.369-1.369l-6.275 2.094L16.969.6c-.4-.8-1.537-.8-1.938 0l-2.956 5.919-6.281-2.094c-.85-.281-1.656.525-1.369 1.369l2.094 6.275L.6 15.032c-.8.4-.8 1.538 0 1.938l5.919 2.956-2.094 6.281c-.281.85.525 1.656 1.369 1.369l6.275-2.094 2.956 5.919c.4.8 1.538.8 1.938 0l2.956-5.919 6.275 2.094c.85.281 1.656-.525 1.369-1.369l-2.094-6.275 5.919-2.956c.813-.406.813-1.544.012-1.944zm-9.744 6.625c-3.119 3.119-8.194 3.119-11.313 0s-3.119-8.194 0-11.313c3.119-3.119 8.194-3.119 11.313 0s3.119 8.194 0 11.313z"/></symbol></defs></svg>


--------------------------------------------------------------------------------
/homework-10/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Homework 10</title>
 8 |     <link
 9 |       href="https://fonts.googleapis.com/icon?family=Material+Icons"
10 |       rel="stylesheet"
11 |     />
12 |     <link rel="stylesheet" href="styles.css" />
13 |   </head>
14 |   <body>
15 |     <div class="toolbar">
16 |       <!-- Разметка переключателя темы -->
17 |       <div class="theme-switch">
18 |         <svg class="theme-switch__icon" role="img" aria-label="Иконка солнца">
19 |           <use href="./images/sprite.svg#sun"></use>
20 |         </svg>
21 | 
22 |         <div class="theme-switch__control">
23 |           <input
24 |             class="theme-switch__toggle"
25 |             type="checkbox"
26 |             name="theme"
27 |             id="theme-switch-toggle"
28 |             aria-label="Переключить между тёмной и светлой темой"
29 |           />
30 |           <label
31 |             aria-hidden="true"
32 |             class="theme-switch__track"
33 |             for="theme-switch-toggle"
34 |           >
35 |           </label>
36 |           <div aria-hidden="true" class="theme-switch__marker"></div>
37 |         </div>
38 | 
39 |         <svg class="theme-switch__icon" aria-label="Иконка луны">
40 |           <use href="./images/sprite.svg#moon"></use>
41 |         </svg>
42 |       </div>
43 |     </div>
44 | 
45 |     <!-- В этот список рендери разметку меню -->
46 |     <ul class="menu js-menu"></ul>
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/homework-10/src/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  3 | }
  4 | 
  5 | *,
  6 | *::before,
  7 | *::after {
  8 |   box-sizing: border-box;
  9 | }
 10 | 
 11 | body {
 12 |   margin: 0;
 13 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 14 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 15 |   transition: color 150ms var(--timing-function),
 16 |     background-color 150ms var(--timing-function);
 17 | }
 18 | 
 19 | body.light-theme {
 20 |   background-color: #fff;
 21 |   color: #333333;
 22 | }
 23 | 
 24 | body.dark-theme {
 25 |   background-color: #333333;
 26 |   color: #fff;
 27 | }
 28 | 
 29 | .toolbar {
 30 |   display: flex;
 31 |   justify-content: flex-end;
 32 |   padding: 16px 24px;
 33 | }
 34 | 
 35 | /* THEME SWITCH */
 36 | .theme-switch {
 37 |   display: flex;
 38 |   align-items: center;
 39 | }
 40 | 
 41 | .theme-switch__icon {
 42 |   color: currentColor;
 43 |   height: 24px;
 44 |   width: 24px;
 45 |   margin-right: 8px;
 46 |   margin-left: 8px;
 47 | }
 48 | 
 49 | .theme-switch__control {
 50 |   display: flex;
 51 |   align-items: center;
 52 |   flex-shrink: 0;
 53 |   position: relative;
 54 |   width: 64px;
 55 |   height: 32px;
 56 |   border-radius: 50em;
 57 |   padding: 3px 0;
 58 | }
 59 | 
 60 | .theme-switch__toggle {
 61 |   position: absolute;
 62 |   left: 0;
 63 |   top: 0;
 64 |   margin: 0;
 65 |   padding: 0;
 66 |   opacity: 0;
 67 |   height: 0;
 68 |   width: 0;
 69 |   pointer-events: none;
 70 | }
 71 | 
 72 | .theme-switch__track {
 73 |   position: absolute;
 74 |   left: 0;
 75 |   top: 0;
 76 |   width: 100%;
 77 |   height: 100%;
 78 |   color: transparent;
 79 |   user-select: none;
 80 |   background-color: #333;
 81 |   border-radius: inherit;
 82 |   z-index: 1;
 83 |   cursor: pointer;
 84 | }
 85 | 
 86 | .theme-switch__marker {
 87 |   position: relative;
 88 |   background-color: #fff;
 89 |   width: 26px;
 90 |   height: 26px;
 91 |   border-radius: 50%;
 92 |   z-index: 2;
 93 |   pointer-events: none;
 94 |   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 95 |   transform: translateX(3px);
 96 |   transition: transform 250ms var(--timing-function);
 97 | }
 98 | 
 99 | .theme-switch__toggle:checked + .theme-switch__track {
100 |   background-color: #d3d3d4;
101 | }
102 | 
103 | .theme-switch__toggle:checked ~ .theme-switch__marker {
104 |   transform: translateX(35px);
105 | }
106 | 
107 | .theme-switch__toggle:focus + .theme-switch__track,
108 | .theme-switch__toggle:active + .theme-switch__track {
109 |   box-shadow: 0 0 0 3px #2196f3;
110 | }
111 | 
112 | /* MENU */
113 | 
114 | .menu {
115 |   padding: 0;
116 |   margin: 0;
117 |   list-style: none;
118 |   max-width: calc(100% - 64px);
119 |   margin-left: auto;
120 |   margin-right: auto;
121 |   display: grid;
122 |   justify-content: center;
123 |   grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
124 |   grid-gap: 24px;
125 | }
126 | 
127 | .card {
128 |   position: relative;
129 |   display: flex;
130 |   flex-direction: column;
131 |   justify-content: space-between;
132 |   height: 100%;
133 |   padding-bottom: 8px;
134 | }
135 | 
136 | .card__content {
137 |   display: flex;
138 |   flex-direction: column;
139 |   padding: 8px;
140 |   flex-grow: 1;
141 | }
142 | 
143 | .card__image {
144 |   height: 300px;
145 |   object-fit: cover;
146 |   max-width: 100%;
147 | }
148 | 
149 | .card__name {
150 |   margin-top: 16px;
151 |   margin-bottom: 0;
152 |   font-size: 24px;
153 |   font-weight: 500;
154 | }
155 | 
156 | .card__descr {
157 |   line-height: 1.5;
158 |   flex-grow: 1;
159 | }
160 | 
161 | .card__price {
162 |   display: flex;
163 |   align-items: center;
164 |   margin-top: 24px;
165 |   font-size: 20px;
166 | }
167 | 
168 | .card__price i {
169 |   margin-right: 8px;
170 |   font-size: 24px;
171 | }
172 | 
173 | .card__reviews {
174 |   display: block;
175 |   margin-top: 16px;
176 | }
177 | 
178 | .card__button {
179 |   display: block;
180 |   margin-left: auto;
181 |   margin-right: auto;
182 |   margin-top: 16px;
183 |   width: calc(100% - 16px);
184 | }
185 | 
186 | .tag-list {
187 |   display: flex;
188 |   flex-wrap: wrap;
189 |   padding: 0;
190 |   margin: 0;
191 |   list-style: none;
192 | }
193 | 
194 | .tag-list__item {
195 |   padding: 4px 8px;
196 |   margin: 4px;
197 |   border-radius: 2px;
198 |   background-color: #3f51b5;
199 |   color: #fff;
200 | }
201 | 
202 | .button {
203 |   display: inline-flex;
204 |   align-items: center;
205 |   justify-content: center;
206 |   color: #fff;
207 |   background-color: #2196f3;
208 |   border: 0;
209 |   outline: 0;
210 |   padding: 8px 24px;
211 |   border-radius: 4px;
212 |   cursor: pointer;
213 |   box-shadow: 0px 2px 1px 1px rgba(0, 0, 0, 0.05);
214 |   font: inherit;
215 |   font-weight: 500;
216 |   user-select: none;
217 |   transition: background-color 250ms var(--timing-function);
218 | }
219 | 
220 | .button:hover {
221 |   box-shadow: 0px 2px 1px 1px rgba(0, 0, 0, 0.15);
222 |   background-color: #1976d2;
223 | }
224 | 
225 | .button__icon {
226 |   margin-right: 8px;
227 | }
228 | 


--------------------------------------------------------------------------------
/homework-11/README.md:
--------------------------------------------------------------------------------
 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
 2 | 
 3 | # Критерии приема
 4 | 
 5 | - Созданы репозитории `goit-js-hw-11-color-switch`,
 6 |   `goit-js-hw-11-promisification` и `goit-js-hw-11-timer`.
 7 | - При сдаче домашней работы есть две ссылки для каждого проекта: на исходные
 8 |   файлы и рабочую страницу на GitHub pages.
 9 | - При посещении рабочей страницы (GitHub pages) задания, в консоли нету ошибок и
10 |   предупреждений
11 | - Имена переменных и функций понятные, описательные
12 | - Код отформатирован с помощью `Prettier`
13 | 
14 | ## Задания
15 | 
16 | - [Задание 1 - Переключатель цветов](./color-switch/README.md)
17 | - [Задание 2 - Промисификация](./promisification/README.md)
18 | - [Задание 3 - Таймер обратного отсчета](./timer/README.md)
19 | 


--------------------------------------------------------------------------------
/homework-11/README.ua.md:
--------------------------------------------------------------------------------
 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
 2 | 
 3 | # Критерії прийому
 4 | 
 5 | - Створено репозиторії `goit-js-hw-11-color-switch`,
 6 |   `goit-js-hw-11-promisification` і `goit-js-hw-11-timer`.
 7 | - При здачі домашньої роботи є два посилання для кожного проєкту: на вихідні
 8 |   файли і робочу сторінку на GitHub pages.
 9 | - При відвідуванні робочої сторінки (GitHub pages) завдання, в консолі немає помилок і попереджень
10 | - Імена змінних і функцій зрозумілі, описові
11 | - Код відформатований за допомогою `Prettier`
12 | 
13 | ## Завдання
14 | 
15 | - [Завдання 1 - Перемикач кольорів](./color-switch/README.ua.md)
16 | - [Завдання 2 - Промісифікація](./promisification/README.ua.md)
17 | - [Завдання 3 - Таймер зворотного відліку](./timer/README.ua.md)
18 | 


--------------------------------------------------------------------------------
/homework-11/color-switch/README.md:
--------------------------------------------------------------------------------
 1 | # Переключатель цветов
 2 | 
 3 | Есть массив цветов в hex-формате и кнопки `Start` и `Stop`.
 4 | 
 5 | ```html
 6 | <button type="button" data-action="start">Start</button>
 7 | <button type="button" data-action="stop">Stop</button>
 8 | ```
 9 | 
10 | ```js
11 | const colors = [
12 |   '#FFFFFF',
13 |   '#2196F3',
14 |   '#4CAF50',
15 |   '#FF9800',
16 |   '#009688',
17 |   '#795548',
18 | ];
19 | ```
20 | 
21 | Напиши скрипт, который после нажатия кнопки `Start`, раз в секунду меняет цвет
22 | фона `body` на случайное значение из массива используя инлайн-стиль. При нажатии
23 | на кнопку `Stop`, изменение цвета фона должно останавливаться.
24 | 
25 | > ⚠️ Учти, на кнопку `Start` можно нажать бесконечное количество раз. Сделай
26 | > так, чтобы пока изменение темы запушено, кнопка `Start` была не активна.
27 | 
28 | Для генерации случайного числа (индекс элемента массива цветов), используй
29 | функцию `randomIntegerFromInterval`.
30 | 
31 | ```js
32 | const randomIntegerFromInterval = (min, max) => {
33 |   return Math.floor(Math.random() * (max - min + 1) + min);
34 | };
35 | ```
36 | 


--------------------------------------------------------------------------------
/homework-11/color-switch/README.ua.md:
--------------------------------------------------------------------------------
 1 | # Перемикач кольорів
 2 | 
 3 | Є масив кольорів в hex-форматі і кнопки `Start` і `Stop`.
 4 | 
 5 | ```html
 6 | <button type="button" data-action="start">Start</button>
 7 | <button type="button" data-action="stop">Stop</button>
 8 | ```
 9 | 
10 | ```js
11 | const colors = [
12 |   '#FFFFFF',
13 |   '#2196F3',
14 |   '#4CAF50',
15 |   '#FF9800',
16 |   '#009688',
17 |   '#795548',
18 | ];
19 | ```
20 | 
21 | Напиши скрипт, який після натискання кнопки `Start`, раз в секунду змінює колір
22 | фону `body` на випадкове значення з масиву використовуючи інлайн-стиль. При натисканні на кнопку `Stop`, зміна кольору фону повинна зупинятися.
23 | 
24 | > ⚠️ Врахуй, на кнопку `Start` можна натиснути нескінченну кількість разів. Зроби
25 | > так, щоб поки зміна теми запушено, кнопка `Start` була не активна.
26 | 
27 | Для генерації випадкового числа (індекс елемента масиву квітів), використовуй
28 | функцію `randomIntegerFromInterval`.
29 | 
30 | ```js
31 | const randomIntegerFromInterval = (min, max) => {
32 |   return Math.floor(Math.random() * (max - min + 1) + min);
33 | };
34 | ```
35 | 


--------------------------------------------------------------------------------
/homework-11/promisification/README.md:
--------------------------------------------------------------------------------
  1 | ## Задание 1
  2 | 
  3 | Напиши функцию `delay(ms)`, которая возвращает промис, переходящий в состояние
  4 | `"resolved"` через `ms` миллисекунд. Значением исполнившегося промиса должно
  5 | быть то кол-во миллисекунд которое передали во время вызова функции `delay`.
  6 | 
  7 | ```js
  8 | const delay = ms => {
  9 |   // Твой код
 10 | };
 11 | 
 12 | const logger = time => console.log(`Resolved after ${time}ms`);
 13 | 
 14 | // Вызовы функции для проверки
 15 | delay(2000).then(logger); // Resolved after 2000ms
 16 | delay(1000).then(logger); // Resolved after 1000ms
 17 | delay(1500).then(logger); // Resolved after 1500ms
 18 | ```
 19 | 
 20 | ## Задание 2
 21 | 
 22 | Перепиши функцию `toggleUserState()` так, чтобы она не использовала
 23 | callback-функцию `callback`, а принимала всего два параметра `allUsers` и
 24 | `userName` и возвращала промис.
 25 | 
 26 | ```js
 27 | const users = [
 28 |   { name: 'Mango', active: true },
 29 |   { name: 'Poly', active: false },
 30 |   { name: 'Ajax', active: true },
 31 |   { name: 'Lux', active: false },
 32 | ];
 33 | 
 34 | const toggleUserState = (allUsers, userName, callback) => {
 35 |   const updatedUsers = allUsers.map(user =>
 36 |     user.name === userName ? { ...user, active: !user.active } : user,
 37 |   );
 38 | 
 39 |   callback(updatedUsers);
 40 | };
 41 | 
 42 | const logger = updatedUsers => console.table(updatedUsers);
 43 | 
 44 | /*
 45 |  * Сейчас работает так
 46 |  */
 47 | toggleUserState(users, 'Mango', logger);
 48 | toggleUserState(users, 'Lux', logger);
 49 | 
 50 | /*
 51 |  * Должно работать так
 52 |  */
 53 | toggleUserState(users, 'Mango').then(logger);
 54 | toggleUserState(users, 'Lux').then(logger);
 55 | ```
 56 | 
 57 | ## Задание 3
 58 | 
 59 | Перепиши функцию `makeTransaction()` так, чтобы она не использовала
 60 | callback-функции `onSuccess` и `onError`, а принимала всего один параметр
 61 | `transaction` и возвращала промис.
 62 | 
 63 | ```js
 64 | const randomIntegerFromInterval = (min, max) => {
 65 |   return Math.floor(Math.random() * (max - min + 1) + min);
 66 | };
 67 | 
 68 | const makeTransaction = (transaction, onSuccess, onError) => {
 69 |   const delay = randomIntegerFromInterval(200, 500);
 70 | 
 71 |   setTimeout(() => {
 72 |     const canProcess = Math.random() > 0.3;
 73 | 
 74 |     if (canProcess) {
 75 |       onSuccess(transaction.id, delay);
 76 |     } else {
 77 |       onError(transaction.id);
 78 |     }
 79 |   }, delay);
 80 | };
 81 | 
 82 | const logSuccess = (id, time) => {
 83 |   console.log(`Transaction ${id} processed in ${time}ms`);
 84 | };
 85 | 
 86 | const logError = id => {
 87 |   console.warn(`Error processing transaction ${id}. Please try again later.`);
 88 | };
 89 | 
 90 | /*
 91 |  * Работает так
 92 |  */
 93 | makeTransaction({ id: 70, amount: 150 }, logSuccess, logError);
 94 | makeTransaction({ id: 71, amount: 230 }, logSuccess, logError);
 95 | makeTransaction({ id: 72, amount: 75 }, logSuccess, logError);
 96 | makeTransaction({ id: 73, amount: 100 }, logSuccess, logError);
 97 | /*
 98 |  * Должно работать так
 99 |  */
100 | makeTransaction({ id: 70, amount: 150 })
101 |   .then(logSuccess)
102 |   .catch(logError);
103 | 
104 | makeTransaction({ id: 71, amount: 230 })
105 |   .then(logSuccess)
106 |   .catch(logError);
107 | 
108 | makeTransaction({ id: 72, amount: 75 })
109 |   .then(logSuccess)
110 |   .catch(logError);
111 | 
112 | makeTransaction({ id: 73, amount: 100 })
113 |   .then(logSuccess)
114 |   .catch(logError);
115 | ```
116 | 


--------------------------------------------------------------------------------
/homework-11/promisification/README.ua.md:
--------------------------------------------------------------------------------
  1 | ## Завдання 1
  2 | 
  3 | Напиши функцію `delay(ms)`, яка повертає проміс, що переходить в стан
  4 | `"resolved"` через `ms` мілісекунд. Значенням промісу, яке виповнилося має
  5 | бути та кількість мілісекунд, яку передали під час виклику функції `delay`.
  6 | 
  7 | ```js
  8 | const delay = ms => {
  9 |   // Твій код
 10 | };
 11 | 
 12 | const logger = time => console.log(`Resolved after ${time}ms`);
 13 | 
 14 | // Виклич функції для перевірки
 15 | delay(2000).then(logger); // Resolved after 2000ms
 16 | delay(1000).then(logger); // Resolved after 1000ms
 17 | delay(1500).then(logger); // Resolved after 1500ms
 18 | ```
 19 | 
 20 | ## Завдання 2
 21 | 
 22 | Перепиши функцію `toggleUserState()` так, щоб вона не використовувала
 23 | callback-функцію `callback`, а приймала всього два параметри `allUsers` і
 24 | `userName` і повертала проміс.
 25 | 
 26 | ```js
 27 | const users = [
 28 |   { name: 'Mango', active: true },
 29 |   { name: 'Poly', active: false },
 30 |   { name: 'Ajax', active: true },
 31 |   { name: 'Lux', active: false },
 32 | ];
 33 | 
 34 | const toggleUserState = (allUsers, userName, callback) => {
 35 |   const updatedUsers = allUsers.map(user =>
 36 |     user.name === userName ? { ...user, active: !user.active } : user,
 37 |   );
 38 | 
 39 |   callback(updatedUsers);
 40 | };
 41 | 
 42 | const logger = updatedUsers => console.table(updatedUsers);
 43 | 
 44 | /*
 45 |  * Зараз працює так
 46 |  */
 47 | toggleUserState(users, 'Mango', logger);
 48 | toggleUserState(users, 'Lux', logger);
 49 | 
 50 | /*
 51 |  * Повинно працювати так
 52 |  */
 53 | toggleUserState(users, 'Mango').then(logger);
 54 | toggleUserState(users, 'Lux').then(logger);
 55 | ```
 56 | 
 57 | ## Завдання 3
 58 | 
 59 | Перепиши функцію `makeTransaction()` так, щоб вона не використовувала
 60 | callback-функції `onSuccess` і `onError`, а приймала всього один параметр
 61 | `transaction` і повертала проміс.
 62 | 
 63 | ```js
 64 | const randomIntegerFromInterval = (min, max) => {
 65 |   return Math.floor(Math.random() * (max - min + 1) + min);
 66 | };
 67 | 
 68 | const makeTransaction = (transaction, onSuccess, onError) => {
 69 |   const delay = randomIntegerFromInterval(200, 500);
 70 | 
 71 |   setTimeout(() => {
 72 |     const canProcess = Math.random() > 0.3;
 73 | 
 74 |     if (canProcess) {
 75 |       onSuccess(transaction.id, delay);
 76 |     } else {
 77 |       onError(transaction.id);
 78 |     }
 79 |   }, delay);
 80 | };
 81 | 
 82 | const logSuccess = (id, time) => {
 83 |   console.log(`Transaction ${id} processed in ${time}ms`);
 84 | };
 85 | 
 86 | const logError = id => {
 87 |   console.warn(`Error processing transaction ${id}. Please try again later.`);
 88 | };
 89 | 
 90 | /*
 91 |  * Працює так
 92 |  */
 93 | makeTransaction({ id: 70, amount: 150 }, logSuccess, logError);
 94 | makeTransaction({ id: 71, amount: 230 }, logSuccess, logError);
 95 | makeTransaction({ id: 72, amount: 75 }, logSuccess, logError);
 96 | makeTransaction({ id: 73, amount: 100 }, logSuccess, logError);
 97 | /*
 98 |  * Повинно працювати так
 99 |  */
100 | makeTransaction({ id: 70, amount: 150 })
101 |   .then(logSuccess)
102 |   .catch(logError);
103 | 
104 | makeTransaction({ id: 71, amount: 230 })
105 |   .then(logSuccess)
106 |   .catch(logError);
107 | 
108 | makeTransaction({ id: 72, amount: 75 })
109 |   .then(logSuccess)
110 |   .catch(logError);
111 | 
112 | makeTransaction({ id: 73, amount: 100 })
113 |   .then(logSuccess)
114 |   .catch(logError);
115 | ```
116 | 


--------------------------------------------------------------------------------
/homework-11/timer/README.md:
--------------------------------------------------------------------------------
 1 | # Таймер обратного отсчета
 2 | 
 3 | Создай плагин настраиваемого таймера, который ведет обратный отсчет до
 4 | предварительно определенной даты. Такой плагин может использоваться в блогах и
 5 | интернет-магазинах, страницах регистрации событий, во время технического
 6 | обслуживания и т. д.
 7 | 
 8 | ![preview](preview.gif)
 9 | 
10 | Плагин ожидает следующую HTML-разметку и показывает четыре цифры: дни, часы,
11 | минуты и секунды в формате `XX:XX:XX:XX`. Количество дней может состоять из
12 | более чем двух цифр.
13 | 
14 | ```html
15 | <div class="timer" id="timer-1">
16 |   <div class="field">
17 |     <span class="value" data-value="days">11</span>
18 |     <span class="label">Days</span>
19 |   </div>
20 | 
21 |   <div class="field">
22 |     <span class="value" data-value="hours">11</span>
23 |     <span class="label">Hours</span>
24 |   </div>
25 | 
26 |   <div class="field">
27 |     <span class="value" data-value="mins">11</span>
28 |     <span class="label">Minutes</span>
29 |   </div>
30 | 
31 |   <div class="field">
32 |     <span class="value" data-value="secs">11</span>
33 |     <span class="label">Seconds</span>
34 |   </div>
35 | </div>
36 | ```
37 | 
38 | Плагин это класс `CountdownTimer`, экземпляр которого создает новый таймер с
39 | настройками.
40 | 
41 | ```js
42 | new CountdownTimer({
43 |   selector: '#timer-1',
44 |   targetDate: new Date('Jul 17, 2019'),
45 | });
46 | ```
47 | 
48 | Для подсчета значений используй следующие готовые формулы, где `time` - разница
49 | между `targetDate` и текущей датой.
50 | 
51 | ```js
52 | /*
53 |  * Оставшиеся дни: делим значение UTC на 1000 * 60 * 60 * 24, количество
54 |  * миллисекунд в одном дне (миллисекунды * секунды * минуты * часы)
55 |  */
56 | const days = Math.floor(time / (1000 * 60 * 60 * 24));
57 | 
58 | /*
59 |  * Оставшиеся часы: получаем остаток от предыдущего расчета с помощью оператора
60 |  * остатка % и делим его на количество миллисекунд в одном часе
61 |  * (1000 * 60 * 60 = миллисекунды * минуты * секунды)
62 |  */
63 | const hours = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
64 | 
65 | /*
66 |  * Оставшиеся минуты: получаем оставшиеся минуты и делим их на количество
67 |  * миллисекунд в одной минуте (1000 * 60 = миллисекунды * секунды)
68 |  */
69 | const mins = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
70 | 
71 | /*
72 |  * Оставшиеся секунды: получаем оставшиеся секунды и делим их на количество
73 |  * миллисекунд в одной секунде (1000)
74 |  */
75 | const secs = Math.floor((time % (1000 * 60)) / 1000);
76 | ```
77 | 


--------------------------------------------------------------------------------
/homework-11/timer/README.ua.md:
--------------------------------------------------------------------------------
 1 | # Таймер зворотного відліку
 2 | 
 3 | Створи плагін налаштовуваного таймера, який веде зворотний відлік до
 4 | попередньо визначеної дати. Такий плагін може використовуватися в блогах і
 5 | інтернет-магазинах та на сторінках реєстрації подій, під час технічного
 6 | обслуговування і т. д.
 7 | 
 8 | ![preview](preview.gif)
 9 | 
10 | Плагін очікує наступну HTML-розмітку і показує чотири цифри: дні, години,
11 | хвилини і секунди в форматі `XX:XX:XX:XX`. Кількість днів може складатися з
12 | більш ніж двох цифр.
13 | 
14 | ```html
15 | <div class="timer" id="timer-1">
16 |   <div class="field">
17 |     <span class="value" data-value="days">11</span>
18 |     <span class="label">Days</span>
19 |   </div>
20 | 
21 |   <div class="field">
22 |     <span class="value" data-value="hours">11</span>
23 |     <span class="label">Hours</span>
24 |   </div>
25 | 
26 |   <div class="field">
27 |     <span class="value" data-value="mins">11</span>
28 |     <span class="label">Minutes</span>
29 |   </div>
30 | 
31 |   <div class="field">
32 |     <span class="value" data-value="secs">11</span>
33 |     <span class="label">Seconds</span>
34 |   </div>
35 | </div>
36 | ```
37 | 
38 | Плагін - це клас `CountdownTimer`, екземпляр якого створює новий таймер з
39 | настройками.
40 | 
41 | ```js
42 | new CountdownTimer({
43 |   selector: '#timer-1',
44 |   targetDate: new Date('Jul 17, 2019'),
45 | });
46 | ```
47 | 
48 | Для підрахунку значень використовуй такі готові формули, де `time` - різниця
49 | між `targetDate` і поточною датою.
50 | 
51 | ```js
52 | /*
53 |  * Дні, що залишилися: ділимо значення UTC на 1000 * 60 * 60 * 24, кількість
54 |  * мілісекунд в один день (мілісекунди * секунди * хвилини * години)
55 |  */
56 | const days = Math.floor(time / (1000 * 60 * 60 * 24));
57 | 
58 | /*
59 |  * Решта годин: отримуємо залишок від попереднього розрахунку за допомогою оператора
60 |  * залишку% і ділимо його на кількість мілісекунд в одній годині
61 |  * (1000 * 60 * 60 = мілісекунди * хвилини * секунди)
62 |  */
63 | const hours = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
64 | 
65 | /*
66 |  * Решта хвилин: отримуємо хвилини, що залишилися і ділимо їх на кількість
67 |  * мілісекунд в одній хвилині (1000 * 60 = мілісекунди * секунди)
68 |  */
69 | const mins = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
70 | 
71 | /*
72 |  * Решта секунд: отримуємо секунди, які залишилися і ділимо їх на кількість
73 |  * миллисекунд в одной секунде (1000)
74 |  */
75 | const secs = Math.floor((time % (1000 * 60)) / 1000);
76 | ```
77 | 


--------------------------------------------------------------------------------
/homework-11/timer/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/homework-11/timer/preview.gif


--------------------------------------------------------------------------------
/homework-12/README.md:
--------------------------------------------------------------------------------
 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
 2 | 
 3 | # Критерии приема
 4 | 
 5 | - Создан репозиторий `goit-js-hw-12-countries`.
 6 | - При сдаче домашней работы есть две ссылки: на исходные файлы и рабочую
 7 |   страницу на GitHub pages.
 8 | - При посещении рабочей страницы (GitHub pages) задания, в консоли нету ошибок и
 9 |   предупреждений.
10 | - Имена переменных и функций понятные, описательные.
11 | - Проект собран с помощью
12 |   [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
13 | - Код отформатирован с помощью `Prettier`.
14 | - Добавь минимальную стилизацию.
15 | - Есть файл `fetchCountries.js` с дефолтным экспортом функции
16 |   `fetchCountries(searchQuery)`, возвращающей промис с массивом стран, результат
17 |   запроса к API.
18 | 
19 | ## Поиск стран
20 | 
21 | Создай небольшое приложение поиска данных о стране по ее частичному или полному
22 | имени. Используй [Rest Countries API](https://restcountries.com/), а именно
23 | вторую версию (v2) и ендпоинт
24 | [/name](https://restcountries.com/#api-endpoints-v3-name), возвращающий массив
25 | объектов стран попавших под критерий поиска.
26 | 
27 | Достаточно чтобы приложение работало для большинства стран. Некоторые страны,
28 | такие как `Sudan`, могут создавать проблемы, поскольку название страны является
29 | частью названия другой страны, `South Sudan`. Не нужно беспокоиться об этих
30 | исключениях.
31 | 
32 | Интерфейс очень простой. Название страны для поиска пользователь вводит в
33 | текстовое поле.
34 | 
35 | ⚠️ **ВНИМАНИЕ!** HTTP-запросы на бекенд происходят не по сабмиту формы, формы
36 | нет, а при наборе имени страны в инпуте, то есть по событию `input`. Но делать
37 | HTTP-запрос при каждом нажатии клавиши нельзя, так как одновременно получится
38 | много HTTP-запросов которые будут выполняться в непредсказуемом порядке (race
39 | conditions). Поэтому на обработчик события необходимо применить подход
40 | `debounce` и делать HTTP-запрос спустя `500мс` после того, как пользователь
41 | перестал вводить текст. Используй npm-пакет
42 | [lodash.debounce](https://www.npmjs.com/package/lodash.debounce).
43 | 
44 | Если бекенд вернул больше чем 10 стран подошедших под критерий введенный
45 | пользователем, в интерфейсе отображается нотификация о том, что необходимо
46 | сделать запрос более специфичным. Для оповещений используй плагин
47 | [pnotify](https://github.com/sciactive/pnotify).
48 | 
49 | ![оповещение](assets/query-prompt.png)
50 | 
51 | Если бекенд вернул от 2-х до 10-х стран, под инпутом отображается список имен
52 | найденных стран.
53 | 
54 | ![список стран](assets/country-list.png)
55 | 
56 | Если бекенд вернул массив с одной страной, в интерфейсе рендерится разметка с
57 | данными о стране: название, столица, население, языки и флаг.
58 | 
59 | ![информация о стране](assets/country-info.png)
60 | 


--------------------------------------------------------------------------------
/homework-12/README.ua.md:
--------------------------------------------------------------------------------
 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
 2 | 
 3 | # Критерії прийому
 4 | 
 5 | - Створено репозиторій `goit-js-hw-12-countries`.
 6 | - При здачі домашньої роботи є два посилання: на вихідні файли і робочу сторінку
 7 |   на GitHub pages.
 8 | - При відвідуванні робочої сторінки (GitHub pages) завдання, в консолі немає
 9 |   помилок і попереджень.
10 | - Імена змінних і функцій зрозумілі, описові.
11 | - Проект зібраний за допомогою
12 |   [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
13 | - Код відформатований за допомогою `Prettier`.
14 | - Додай мінімальну стилізацію.
15 | - Є файл `fetchCountries.js` з дефолтним експортом функції
16 |   `fetchCountries(searchQuery)`, повертає проміс з масивом країн, результат   
17 |   запиту до API.
18 | 
19 | ## Пошук країн
20 | 
21 | Створи невеликий додаток пошуку даних про країну по її частковому або повному
22 | імені. Використовуй [Rest Countries API v2](https://restcountries.com/), а саме
23 | ендпоінт [/name](https://restcountries.com/#api-endpoints-v3-name), який
24 | повертає масив об'єктів країн, що потрапили під критерій пошуку.
25 | 
26 | Досить, щоб додаток працював для більшості країн. Деякі країни, такі як:
27 | `Sudan`, можуть створювати проблеми, оскільки назва країни є частиною назви
28 | іншої країни, `South Sudan`. Не потрібно турбуватися про ці винятки.
29 | 
30 | Інтерфейс дуже простий. Назву країни для пошуку користувач вводить в текстове
31 | поле.
32 | 
33 | ⚠️ **УВАГА!** HTTP-запити на бекенд відбуваються не по сабміту форми, форми
34 | немає, а при наборі імені країни в інпут, тобто за подією `input`. Але робити
35 | HTTP-запит при кожному натисканні клавіші не можна, так як одночасно вийде
36 | багато HTTP-запитів які будуть виконуватися в непередбачуваному порядку (race
37 | conditions). Тому на обробник події необхідно застосувати підхід `debounce` і
38 | робити HTTP-запит через `500мс` після того, як користувач перестав вводити
39 | текст. Використовуй npm-пакет
40 | [lodash.debounce](https://www.npmjs.com/package/lodash.debounce).
41 | 
42 | Якщо бекенд повернув більше ніж 10 країн, які підійшли під критерій введений
43 | користувачем, в інтерфейсі відображається нотифікація про те, що необхідно
44 | зробити запит більш специфічним. Для сповіщень використовуй плагін
45 | [pnotify](https://github.com/sciactive/pnotify).
46 | 
47 | ![сповіщення](assets/query-prompt.png)
48 | 
49 | Якщо бекенд повернув від 2-х до 10-ти країн, під інпутом відображається список
50 | імен знайдених країн.
51 | 
52 | ![список країн](assets/country-list.png)
53 | 
54 | Якщо бекенд повернув масив з однією країною, в інтерфейсі рендерится розмітка з
55 | даними про країну: назва, столиця, населення, мови і прапор.
56 | 
57 | ![інформація про країну](assets/country-info.png)
58 | 


--------------------------------------------------------------------------------
/homework-12/assets/country-info.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/homework-12/assets/country-info.png


--------------------------------------------------------------------------------
/homework-12/assets/country-list.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/homework-12/assets/country-list.png


--------------------------------------------------------------------------------
/homework-12/assets/query-prompt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/homework-12/assets/query-prompt.png


--------------------------------------------------------------------------------
/neoversity/v2/06-1/src/css/common.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 16px;
 7 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 8 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 9 |   -webkit-font-smoothing: antialiased;
10 |   -moz-osx-font-smoothing: grayscale;
11 |   background-color: #fafafa;
12 |   color: #212121;
13 |   line-height: 1.5;
14 | }
15 | 
16 | input {
17 |   padding: 8px;
18 |   font: inherit;
19 | }
20 | 
21 | button {
22 |   padding: 8px 12px;
23 |   cursor: pointer;
24 | }
25 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-1/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Homework 6-1</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <ul>
12 |       <li><a href="task-01.html">Task 1</a></li>
13 |       <li><a href="task-02.html">Task 2</a></li>
14 |       <li><a href="task-03.html">Task 3</a></li>
15 |       <li><a href="task-04.html">Task 4</a></li>
16 |       <li><a href="task-05.html">Task 5</a></li>
17 |     </ul>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-1/src/js/task-01.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/neoversity/v2/06-1/src/js/task-01.js


--------------------------------------------------------------------------------
/neoversity/v2/06-1/src/js/task-02.js:
--------------------------------------------------------------------------------
1 | const ingredients = [
2 |   'Potatoes',
3 |   'Mushrooms',
4 |   'Garlic',
5 |   'Tomatos',
6 |   'Herbs',
7 |   'Condiments',
8 | ];
9 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-1/src/js/task-03.js:
--------------------------------------------------------------------------------
 1 | const images = [
 2 |   {
 3 |     url: 'https://images.pexels.com/photos/140134/pexels-photo-140134.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
 4 |     alt: 'White and Black Long Fur Cat',
 5 |   },
 6 |   {
 7 |     url: 'https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
 8 |     alt: 'Orange and White Koi Fish Near Yellow Koi Fish',
 9 |   },
10 |   {
11 |     url: 'https://images.pexels.com/photos/219943/pexels-photo-219943.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
12 |     alt: 'Group of Horses Running',
13 |   },
14 | ];
15 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-1/src/js/task-04.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/neoversity/v2/06-1/src/js/task-04.js


--------------------------------------------------------------------------------
/neoversity/v2/06-1/src/js/task-05.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/neoversity/v2/06-1/src/js/task-05.js


--------------------------------------------------------------------------------
/neoversity/v2/06-1/src/task-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 1</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="index.html">Go back</a></p>
12 | 
13 |     <ul id="categories">
14 |       <li class="item">
15 |         <h2>Animals</h2>
16 | 
17 |         <ul>
18 |           <li>Cat</li>
19 |           <li>Hamster</li>
20 |           <li>Horse</li>
21 |           <li>Parrot</li>
22 |         </ul>
23 |       </li>
24 |       <li class="item">
25 |         <h2>Products</h2>
26 | 
27 |         <ul>
28 |           <li>Bread</li>
29 |           <li>Prasley</li>
30 |           <li>Cheese</li>
31 |         </ul>
32 |       </li>
33 |       <li class="item">
34 |         <h2>Technologies</h2>
35 | 
36 |         <ul>
37 |           <li>HTML</li>
38 |           <li>CSS</li>
39 |           <li>JavaScript</li>
40 |           <li>React</li>
41 |           <li>Node.js</li>
42 |         </ul>
43 |       </li>
44 |     </ul>
45 | 
46 |     <script src="js/task-01.js" type="module"></script>
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-1/src/task-02.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 2</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |     <style>
10 |       .item {
11 |         font-weight: 500;
12 |       }
13 | 
14 |       .item:not(:last-child) {
15 |         margin-bottom: 8px;
16 |       }
17 |     </style>
18 |   </head>
19 |   <body>
20 |     <p><a href="index.html">Go back</a></p>
21 | 
22 |     <ul id="ingredients"></ul>
23 | 
24 |     <script src="js/task-02.js" type="module"></script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-1/src/task-03.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 3</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="index.html">Go back</a></p>
12 | 
13 |     <ul class="gallery"></ul>
14 | 
15 |     <script src="js/task-03.js" type="module"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-1/src/task-04.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 4</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="index.html">Go back</a></p>
12 | 
13 |     <div id="counter">
14 |       <button type="button" data-action="decrement">-1</button>
15 |       <span id="value">0</span>
16 |       <button type="button" data-action="increment">+1</button>
17 |     </div>
18 | 
19 |     <script src="js/task-04.js" type="module"></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-1/src/task-05.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 5</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="index.html">Go back</a></p>
12 | 
13 |     <input type="text" id="name-input" placeholder="Please enter your name" />
14 |     <h1>Hello, <span id="name-output">Anonymous</span>!</h1>
15 | 
16 |     <script src="js/task-05.js" type="module"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-2/src/css/common.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 16px;
 7 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 8 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 9 |   -webkit-font-smoothing: antialiased;
10 |   -moz-osx-font-smoothing: grayscale;
11 |   background-color: #fafafa;
12 |   color: #212121;
13 |   line-height: 1.5;
14 | }
15 | 
16 | input {
17 |   padding: 8px;
18 |   font: inherit;
19 | }
20 | 
21 | button {
22 |   padding: 8px 12px;
23 |   cursor: pointer;
24 | }
25 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-2/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Homework 6-2</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <ul>
12 |       <li><a href="task-01.html">Task 1</a></li>
13 |       <li><a href="task-02.html">Task 2</a></li>
14 |       <li><a href="task-03.html">Task 3</a></li>
15 |       <li><a href="task-04.html">Task 4</a></li>
16 |       <li><a href="task-05.html">Task 5</a></li>
17 |     </ul>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-2/src/js/task-01.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/neoversity/v2/06-2/src/js/task-01.js


--------------------------------------------------------------------------------
/neoversity/v2/06-2/src/js/task-02.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/neoversity/v2/06-2/src/js/task-02.js


--------------------------------------------------------------------------------
/neoversity/v2/06-2/src/js/task-03.js:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-2/src/js/task-04.js:
--------------------------------------------------------------------------------
1 | function getRandomHexColor() {
2 |   return `#${Math.floor(Math.random() * 16777215)
3 |     .toString(16)
4 |     .padStart(6, 0)}`;
5 | }
6 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-2/src/js/task-05.js:
--------------------------------------------------------------------------------
1 | function getRandomHexColor() {
2 |   return `#${Math.floor(Math.random() * 16777215)
3 |     .toString(16)
4 |     .padStart(6, 0)}`;
5 | }
6 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-2/src/task-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 6</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |     <style>
10 |       #validation-input {
11 |         border: 2px solid #bdbdbd;
12 |       }
13 | 
14 |       #validation-input.valid {
15 |         border-color: #4caf50;
16 |       }
17 | 
18 |       #validation-input.invalid {
19 |         border-color: #f44336;
20 |       }
21 |     </style>
22 |   </head>
23 |   <body>
24 |     <p><a href="index.html">Go back</a></p>
25 | 
26 |     <input
27 |       type="text"
28 |       id="validation-input"
29 |       data-length="6"
30 |       placeholder="Please enter 6 symbols"
31 |     />
32 | 
33 |     <script src="js/task-01.js" type="module"></script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-2/src/task-02.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 7</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="index.html">Go back</a></p>
12 | 
13 |     <input id="font-size-control" type="range" min="16" max="96" />
14 |     <br />
15 |     <span id="text">Abracadabra!</span>
16 | 
17 |     <script src="js/task-02.js" type="module"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-2/src/task-03.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 8</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |     <style>
10 |       .login-form {
11 |         max-width: 320px;
12 |         display: flex;
13 |         flex-direction: column;
14 |       }
15 | 
16 |       .login-form label {
17 |         margin-bottom: 16px;
18 |       }
19 | 
20 |       .login-form input,
21 |       .login-form button {
22 |         width: 100%;
23 |         padding: 4px;
24 |         font: inherit;
25 |       }
26 |     </style>
27 |   </head>
28 |   <body>
29 |     <p><a href="index.html">Go back</a></p>
30 | 
31 |     <form class="login-form">
32 |       <label>
33 |         Email
34 |         <input type="email" name="email" />
35 |       </label>
36 |       <label>
37 |         Password
38 |         <input type="password" name="password" />
39 |       </label>
40 |       <button type="submit">Login</button>
41 |     </form>
42 | 
43 |     <script src="js/task-03.js" type="module"></script>
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-2/src/task-04.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 9</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |     <style>
10 |       .widget {
11 |         text-align: center;
12 |       }
13 | 
14 |       .widget p {
15 |         margin-top: 0;
16 |         margin-bottom: 16px;
17 |         font-size: 48px;
18 |       }
19 | 
20 |       .widget span {
21 |         font-family: monospace;
22 |       }
23 | 
24 |       .widget button {
25 |         padding: 8px 12px;
26 |         font-size: 20px;
27 |         cursor: pointer;
28 |       }
29 |     </style>
30 |   </head>
31 |   <body>
32 |     <p><a href="index.html">Go back</a></p>
33 | 
34 |     <div class="widget">
35 |       <p>Background color: <span class="color">-</span></p>
36 |       <button type="button" class="change-color">Change color</button>
37 |     </div>
38 | 
39 |     <script src="js/task-04.js" type="module"></script>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/neoversity/v2/06-2/src/task-05.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 10 (optional)</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="index.html">Go back</a></p>
12 | 
13 |     <div id="controls">
14 |       <input type="number" min="1" max="100" step="1" />
15 |       <button type="button" data-create>Create</button>
16 |       <button type="button" data-destroy>Destroy</button>
17 |     </div>
18 | 
19 |     <div id="boxes"></div>
20 | 
21 |     <script src="js/task-05.js" type="module"></script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/v2/06/src/css/common.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 16px;
 7 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 8 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 9 |   -webkit-font-smoothing: antialiased;
10 |   -moz-osx-font-smoothing: grayscale;
11 |   background-color: #fafafa;
12 |   color: #212121;
13 |   line-height: 1.5;
14 | }
15 | 
16 | input {
17 |   padding: 8px;
18 |   font: inherit;
19 | }
20 | 
21 | button {
22 |   padding: 8px 12px;
23 |   cursor: pointer;
24 | }
25 | 


--------------------------------------------------------------------------------
/v2/06/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Homework 6</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <ul>
12 |       <li><a href="task-01.html">Task 1</a></li>
13 |       <li><a href="task-02.html">Task 2</a></li>
14 |       <li><a href="task-03.html">Task 3</a></li>
15 |       <li><a href="task-04.html">Task 4</a></li>
16 |       <li><a href="task-05.html">Task 5</a></li>
17 |       <li><a href="task-06.html">Task 6</a></li>
18 |       <li><a href="task-07.html">Task 7</a></li>
19 |       <li><a href="task-08.html">Task 8</a></li>
20 |       <li><a href="task-09.html">Task 9</a></li>
21 |       <li><a href="task-10.html">Task 10 (optional)</a></li>
22 |     </ul>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/v2/06/src/js/task-01.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/v2/06/src/js/task-01.js


--------------------------------------------------------------------------------
/v2/06/src/js/task-02.js:
--------------------------------------------------------------------------------
1 | const ingredients = [
2 |   'Potatoes',
3 |   'Mushrooms',
4 |   'Garlic',
5 |   'Tomatos',
6 |   'Herbs',
7 |   'Condiments',
8 | ];
9 | 


--------------------------------------------------------------------------------
/v2/06/src/js/task-03.js:
--------------------------------------------------------------------------------
 1 | const images = [
 2 |   {
 3 |     url: 'https://images.pexels.com/photos/140134/pexels-photo-140134.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
 4 |     alt: 'White and Black Long Fur Cat',
 5 |   },
 6 |   {
 7 |     url: 'https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
 8 |     alt: 'Orange and White Koi Fish Near Yellow Koi Fish',
 9 |   },
10 |   {
11 |     url: 'https://images.pexels.com/photos/219943/pexels-photo-219943.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
12 |     alt: 'Group of Horses Running',
13 |   },
14 | ];
15 | 


--------------------------------------------------------------------------------
/v2/06/src/js/task-04.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/v2/06/src/js/task-04.js


--------------------------------------------------------------------------------
/v2/06/src/js/task-05.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/v2/06/src/js/task-05.js


--------------------------------------------------------------------------------
/v2/06/src/js/task-06.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/v2/06/src/js/task-06.js


--------------------------------------------------------------------------------
/v2/06/src/js/task-07.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/v2/06/src/js/task-07.js


--------------------------------------------------------------------------------
/v2/06/src/js/task-08.js:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/v2/06/src/js/task-09.js:
--------------------------------------------------------------------------------
1 | function getRandomHexColor() {
2 |   return `#${Math.floor(Math.random() * 16777215)
3 |     .toString(16)
4 |     .padStart(6, 0)}`;
5 | }
6 | 


--------------------------------------------------------------------------------
/v2/06/src/js/task-10.js:
--------------------------------------------------------------------------------
1 | function getRandomHexColor() {
2 |   return `#${Math.floor(Math.random() * 16777215)
3 |     .toString(16)
4 |     .padStart(6, 0)}`;
5 | }
6 | 


--------------------------------------------------------------------------------
/v2/06/src/task-01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 1</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="index.html">Go back</a></p>
12 | 
13 |     <ul id="categories">
14 |       <li class="item">
15 |         <h2>Animals</h2>
16 | 
17 |         <ul>
18 |           <li>Cat</li>
19 |           <li>Hamster</li>
20 |           <li>Horse</li>
21 |           <li>Parrot</li>
22 |         </ul>
23 |       </li>
24 |       <li class="item">
25 |         <h2>Products</h2>
26 | 
27 |         <ul>
28 |           <li>Bread</li>
29 |           <li>Prasley</li>
30 |           <li>Cheese</li>
31 |         </ul>
32 |       </li>
33 |       <li class="item">
34 |         <h2>Technologies</h2>
35 | 
36 |         <ul>
37 |           <li>HTML</li>
38 |           <li>CSS</li>
39 |           <li>JavaScript</li>
40 |           <li>React</li>
41 |           <li>Node.js</li>
42 |         </ul>
43 |       </li>
44 |     </ul>
45 | 
46 |     <script src="js/task-01.js" type="module"></script>
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/v2/06/src/task-02.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 2</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |     <style>
10 |       .item {
11 |         font-weight: 500;
12 |       }
13 | 
14 |       .item:not(:last-child) {
15 |         margin-bottom: 8px;
16 |       }
17 |     </style>
18 |   </head>
19 |   <body>
20 |     <p><a href="index.html">Go back</a></p>
21 | 
22 |     <ul id="ingredients"></ul>
23 | 
24 |     <script src="js/task-02.js" type="module"></script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/v2/06/src/task-03.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 3</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="index.html">Go back</a></p>
12 | 
13 |     <ul class="gallery"></ul>
14 | 
15 |     <script src="js/task-03.js" type="module"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/v2/06/src/task-04.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 4</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="index.html">Go back</a></p>
12 | 
13 |     <div id="counter">
14 |       <button type="button" data-action="decrement">-1</button>
15 |       <span id="value">0</span>
16 |       <button type="button" data-action="increment">+1</button>
17 |     </div>
18 | 
19 |     <script src="js/task-04.js" type="module"></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/v2/06/src/task-05.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 5</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="index.html">Go back</a></p>
12 | 
13 |     <input type="text" id="name-input" placeholder="Please enter your name" />
14 |     <h1>Hello, <span id="name-output">Anonymous</span>!</h1>
15 | 
16 |     <script src="js/task-05.js" type="module"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/v2/06/src/task-06.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 6</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |     <style>
10 |       #validation-input {
11 |         border: 2px solid #bdbdbd;
12 |       }
13 | 
14 |       #validation-input.valid {
15 |         border-color: #4caf50;
16 |       }
17 | 
18 |       #validation-input.invalid {
19 |         border-color: #f44336;
20 |       }
21 |     </style>
22 |   </head>
23 |   <body>
24 |     <p><a href="index.html">Go back</a></p>
25 | 
26 |     <input
27 |       type="text"
28 |       id="validation-input"
29 |       data-length="6"
30 |       placeholder="Please enter 6 symbols"
31 |     />
32 | 
33 |     <script src="js/task-06.js" type="module"></script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/v2/06/src/task-07.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 7</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="index.html">Go back</a></p>
12 | 
13 |     <input id="font-size-control" type="range" min="16" max="96" />
14 |     <br />
15 |     <span id="text">Abracadabra!</span>
16 | 
17 |     <script src="js/task-07.js" type="module"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/v2/06/src/task-08.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 8</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |     <style>
10 |       .login-form {
11 |         max-width: 320px;
12 |         display: flex;
13 |         flex-direction: column;
14 |       }
15 | 
16 |       .login-form label {
17 |         margin-bottom: 16px;
18 |       }
19 | 
20 |       .login-form input,
21 |       .login-form button {
22 |         width: 100%;
23 |         padding: 4px;
24 |         font: inherit;
25 |       }
26 |     </style>
27 |   </head>
28 |   <body>
29 |     <p><a href="index.html">Go back</a></p>
30 | 
31 |     <form class="login-form">
32 |       <label>
33 |         Email
34 |         <input type="email" name="email" />
35 |       </label>
36 |       <label>
37 |         Password
38 |         <input type="password" name="password" />
39 |       </label>
40 |       <button type="submit">Login</button>
41 |     </form>
42 | 
43 |     <script src="js/task-08.js" type="module"></script>
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/v2/06/src/task-09.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 9</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |     <style>
10 |       .widget {
11 |         text-align: center;
12 |       }
13 | 
14 |       .widget p {
15 |         margin-top: 0;
16 |         margin-bottom: 16px;
17 |         font-size: 48px;
18 |       }
19 | 
20 |       .widget span {
21 |         font-family: monospace;
22 |       }
23 | 
24 |       .widget button {
25 |         padding: 8px 12px;
26 |         font-size: 20px;
27 |         cursor: pointer;
28 |       }
29 |     </style>
30 |   </head>
31 |   <body>
32 |     <p><a href="index.html">Go back</a></p>
33 | 
34 |     <div class="widget">
35 |       <p>Background color: <span class="color">-</span></p>
36 |       <button type="button" class="change-color">Change color</button>
37 |     </div>
38 | 
39 |     <script src="js/task-09.js" type="module"></script>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/v2/06/src/task-10.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 10 (optional)</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="index.html">Go back</a></p>
12 | 
13 |     <div id="controls">
14 |       <input type="number" min="1" max="100" step="1" />
15 |       <button type="button" data-create>Create</button>
16 |       <button type="button" data-destroy>Destroy</button>
17 |     </div>
18 | 
19 |     <div id="boxes"></div>
20 | 
21 |     <script src="js/task-10.js" type="module"></script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/v2/07/README.en.md:
--------------------------------------------------------------------------------
 1 | **Read in other languages: [Русский](README.md), [Українська](README.ua.md), [English](README.en.md), [Español](README.es.md), [Polski](README.pl.md).**
 2 | 
 3 | # Acceptance criteria
 4 | 
 5 | - `goit-js-hw-07` repository created.
 6 | - In your submitted homework, there are two links: One to your source files and one to your working page on `GitHub Pages`.
 7 | - During live page visits, there are no errors or warnings generated in the console.
 8 | - Clear and descriptive names of variables and functions.
 9 | - Code formatted with `Prettier`.
10 | 
11 | ## Start files
12 | 
13 | - In the [src folder](./src), you will find start files with basic markup and ready-made styles. Copy them to your project. To do this, download this entire repository as an archive or use the [DownGit service](https://downgit.github.io/) to download a separate folder from the repository.
14 | - In the `gallery-items.js` file, there is an array called `galleryItems`, which contains objects with information about Images: small (preview), original (large) and description. It has already been added to each of the project's JS files.
15 | 
16 | ## Task 1 - image gallery
17 | 
18 | Create a gallery with the ability to click on its items and view full size images in a modal window. Check out the demo video of the gallery.
19 | 
20 | https://user-images.githubusercontent.com/17479434/127711719-4e293f5b-fbaa-4851-8671-fc841963d961.mp4
21 | 
22 | Do this task in the `01-gallery.html` and `01-gallery.js` files. Break it down into several subtasks:
23 | 
24 | 1. Creating and rendering markup from the `galleryItems` data array and provided gallery item template.
25 | 2. Implementing delegation to `ul.gallery` and getting the `url` of a large image.
26 | 3. Adding the script and styles of the modal window library [basicLightbox](https://basiclightbox.electerious.com/). Use the [jsdelivrCDN](https://www.jsdelivr.com/package/npm/basiclightbox?path=dist) service and add links to the minified (`.min`) library files to your project.
27 | 4. Opening a modal window by clicking on a gallery item. To do this, check out the [documentation](https://github.com/electerious/basicLightbox#readme) and [examples](https://basiclightbox.electerious.com/).
28 | 5. Replacing the value of the `src` attribute of the `<img>` element in a modal window before opening. Use the ready-made modal window markup with the image from the examples of the [basicLightbox](https://basiclightbox.electerious.com/) library.
29 | 
30 | ### Gallery item markup
31 | 
32 | The link to the original image must be stored in the `source` data attribute on the `<img>` element and specified in the link's `href`. Do not add any HTML tags or CSS classes other than those in this template.
33 | 
34 | ```html
35 | <li class="gallery__item">
36 |   <a class="gallery__link" href="large-image.jpg">
37 |     <img
38 |       class="gallery__image"
39 |       src="small-image.jpg"
40 |       data-source="large-image.jpg"
41 |       alt="Image description"
42 |     />
43 |   </a>
44 | </li>
45 | ```
46 | 
47 | Please note that the image is wrapped in a link, which means that, when clicked, the user will be redirected to another page by default. Disable this behavior by default.
48 | 
49 | ### Closing from keyboard
50 | 
51 | > ⚠️ The following features are optional, but they will be good for additional practice.
52 | 
53 | Add functionality for modal window closing upon pressing the `Escape` key. Make keyboard listening available only while the modal window is open. In the [basicLightbox](https://basiclightbox.electerious.com/) library, there is a method to close the modal window programmatically.
54 | 
55 | ## Task 2 - `SimpleLightbox` library
56 | 
57 | Create the same gallery as in the first task, but using the [SimpleLightbox](https://simplelightbox.com/) library, which will handle image clicks, modal opening and closing, and image scrolling with the keyboard.
58 | 
59 | https://user-images.githubusercontent.com/17479434/127714821-4b7527c8-01db-42d3-83f0-8c1578561982.mp4
60 | 
61 | It is necessary to slightly change the gallery card markup; use this template.
62 | 
63 | ```html
64 | <li class="gallery__item">
65 |    <a class="gallery__link" href="large-image.jpg">
66 |       <img class="gallery__image" src="small-image.jpg" alt="Image description" />
67 |    </a>
68 | </li>
69 | ```
70 | 
71 | Do this task in the `02-lightbox.html` and `02-lightbox.js` files. Break it down into several subtasks:
72 | 
73 | 1. Creating and rendering markup from the `galleryItems` data array and provided gallery element template. Use the ready-made code from the first task.
74 | 2. Adding the script and library styles using the [cdnjs](https://cdnjs.com/libraries/simplelightbox) CDN service. You need to add links to two files: `simple-lightbox.min.js` and `simple-lightbox.min.css`.
75 | 3. Library initialization after gallery items are created and added to `ul.gallery`. To do this, read the [SimpleLightbox](https://simplelightbox.com/) documentation - first of all, the Usage and Markup sections.
76 | 4. Look in the documentation for the Options section and add an image caption display from the `alt` attribute. Let the caption be at the bottom and appear 250 milliseconds after image opening.
77 | 


--------------------------------------------------------------------------------
/v2/07/README.pl.md:
--------------------------------------------------------------------------------
  1 | **Read in other languages: [Русский](README.md), [Українська](README.ua.md),
  2 | [English](README.en.md), [Español](README.es.md), [Polski](README.pl.md).**
  3 | 
  4 | # Kryteria przyjęcia
  5 | 
  6 | - Utworzono repozytorium `goit-js-hw-07`.
  7 | - Przy oddaniu pracy domowej dołączono linki: do plików źródłowych i strony 
  8 |   roboczej na `GitHub Pages`.
  9 | - Wiersz poleceń nie zawiera błędów i ostrzeżeń.
 10 | - Nazwy zmiennych i funkcji są zrozumiałe, opisowe.
 11 | - Sformatowano kod `Prettier`.
 12 | 
 13 | ## Pliki startowe
 14 | 
 15 | - W [folderze src](./src) znajdziesz pliki startowe z gotowym znacznikiem i gotowymi
 16 |   stylami. Skopiuj je do swojego projektu. Aby to zrobić, pobierz całe repozytorium jako 
 17 |   archiwum lub użyj [serwisu DownGit](https://downgit.github.io/) aby
 18 |   pobrać oddzielny folder z repozytorium.
 19 | - W pliku `gallery-items.js` znajduje się tablica `galleryItems`, która zawiera
 20 |   obiekty z informacją o obrazkach: małe (miniatura), oryginalne
 21 |   (duże) i opis. Już połączyliśmy ją z każdym z plików JS projektu.
 22 | 
 23 | ## Zadanie 1 - galeria obrazów
 24 | 
 25 | Utwórz galerię z możliwością kliknięcia w jej elementy i przeglądania pełnego
 26 | obrazu w oknie modalnym. Obejrzyj wersję demonstracyjną wideo o działaniu galerii.
 27 | 
 28 | https://user-images.githubusercontent.com/17479434/127711719-4e293f5b-fbaa-4851-8671-fc841963d961.mp4
 29 | 
 30 | Wykonuj to zadanie w plikach `01-gallery.html` i `01-gallery.js`. Rozbij je na
 31 | kilka podzadań:
 32 | 
 33 | 1. Tworzenie i renderowanie znacznika zgodnie z tablicą danych `galleryItems` i
 34 |    dostarczonym szablonem elementu galerii.
 35 | 2. Implementacja delegowania na `ul.gallery` i otrzymanie `url` większego
 36 |    obrazu.
 37 | 3. Połączenie skryptu i stylów biblioteki okna modalnego
 38 |    [basicLightbox](https://basiclightbox.electerious.com/). Użyj
 39 |    [CDN serwisu jsdelivr](https://www.jsdelivr.com/package/npm/basiclightbox?path=dist)
 40 |    i dodaj do projektu linki do minimalizowania (`.min`) plików biblioteki.
 41 | 4. Otworzenie okna modalnego po kliknięciu w element galerii. Aby to zrobić, zapoznaj się z
 42 |    [dokumentacją](https://github.com/electerious/basicLightbox#readme) i
 43 |    [przykładami](https://basiclightbox.electerious.com/).
 44 | 5. Zmiana wartości atrybutu `src` elementu `<img>` w oknie modalnym przed
 45 |    otworzeniem. Użyj gotowego znacznika okna modalnego z obrazem z
 46 |    przykładów biblioteki [basicLightbox](https://basiclightbox.electerious.com/).
 47 | 
 48 | ### Znacznik elementu galerii
 49 | 
 50 | Link do oryginalnego obrazka powinien być przechowywany w atrybucie data `source` w
 51 | elemencie `<img>`, i ukazywać się w `href` linku. Nie dodawaj innych tagów HTML
 52 | lub klas CSS oprócz tych, które znajdują się w tym szablonie.
 53 | 
 54 | ```html
 55 | <ul class="gallery__item">
 56 |   <a class="gallery__link" href="large-image.jpg">
 57 |     <img
 58 |       class="gallery__image"
 59 |       src="small-image.jpg"
 60 |       data-source="large-image.jpg"
 61 |       alt="Image description"
 62 |     />
 63 |   </a>
 64 | </ul>
 65 | ```
 66 | 
 67 | Zwróć uwagę na to, że obrazek zamieniono w link, a więc po
 68 | domyślnym kliknięciu użytkownik zostanie przekierowany na inną stronę. Zablokuj to
 69 | postępowanie domyślnie.
 70 | 
 71 | 
 72 | ### Zamknięcie z klawiatury
 73 | 
 74 | > ⚠️ Następna funkcja nie jest obowiązkowa przy oddawaniu zadania, ale będzie dobrą
 75 | > dodatkową praktyką.
 76 | 
 77 | Dodaj zamknięcie okna modalnego po naciśnięciu klawiszy `Escape`. Zrób tak, aby
 78 | nasłuchiwanie klawiatury było aktywne tylko wtedy, gdy otwarte jest okno modalne. W bibliotece
 79 | [basicLightbox](https://basiclightbox.electerious.com/) istnieje metoda na
 80 | programowe zamknięcie okna modalnego.
 81 | 
 82 | ## Zadanie 2 - biblioteka `SimpleLightbox`
 83 | 
 84 | Utwórz taką samą galerię jak w zadaniu pierwszym, używając jednak biblioteki
 85 | [SimpleLightbox](https://simplelightbox.com/), która zajmie się opracowaniem
 86 | kliknięć w obrazki, otwieraniem i zamykaniem okna modalnego oraz
 87 | przewijaniem obrazków za pomocą klawiatury.
 88 | 
 89 | https://user-images.githubusercontent.com/17479434/127714821-4b7527c8-01db-42d3-83f0-8c1578561982.mp4
 90 | 
 91 | Konieczna jest nieznaczna zmiana znacznika galerii, użyj tego szablonu.
 92 | 
 93 | ```html
 94 | <li class="gallery__item">
 95 |    <a class="gallery__link" href="large-image.jpg">
 96 |       <img class="gallery__image" src="small-image.jpg" alt="Image description" />
 97 |    </a>
 98 | </li>
 99 | ```
100 | 
101 | Wykonuj to zadanie w plikach `02-lightbox.html` i `02-lightbox.js`. Rozbij je
102 | na kilka podzadań:
103 | 
104 | 1. Tworzenie i renderowanie znacznika zgodnie z tablicą danych `galleryItems` i
105 |    dostarczonym szablonem elementu galerii. Użyj gotowego kodu z zadania
106 |    pierwszego.
107 | 2. Połączenie skryptu i stylów biblioteki poprzez użycie
108 |    [CDN serwisu cdnjs](https://cdnjs.com/libraries/simplelightbox). Koniecznym jest
109 |    dodanie linków do dwóch plików: `simple-lightbox.min.js` i
110 |    `simple-lightbox.min.css`.
111 | 3. Inicjalizacja biblioteki po utworzeniu elementów galerii i dodaniu ich
112 |    do `ul.gallery`. Aby to zrobić, zapoznaj się z dokumentacją
113 |    [SimpleLightbox](https://simplelightbox.com/) - najpierw sekcje
114 |    «Usage» i «Markup».
115 | 4. W dokumentacji zwróć uwagę na sekcję «Options» i dodaj wyświetlanie podpisów do
116 |    obrazków z atrybutu `alt`. Niech podpis będzie pod spodem i pojawia się po
117 |    250 milisekundach po otwarciu obrazka.
118 | 


--------------------------------------------------------------------------------
/v2/07/README.ua.md:
--------------------------------------------------------------------------------
 1 | **Read in other languages: [Русский](README.md), [Українська](README.ua.md),
 2 | [English](README.en.md), [Español](README.es.md), [Polski](README.pl.md).**
 3 | 
 4 | # Критерії приймання
 5 | 
 6 | - Створено репозиторій `goit-js-hw-07`.
 7 | - Домашня робота містить два посилання: на вихідні файли і робочу сторінку на `GitHub Pages`.
 8 | - В консолі відсутні помилки і попередження під час відкриття живої сторінки завдання.
 9 | - Імена змінних і функцій - зрозумілі та описові.
10 | - Код відформатований за допомогою `Prettier`.
11 | 
12 | ## Стартові файли
13 | 
14 | - У [папці src](./src) знайдеш стартові файли з базовою розміткою і готовими стилями. Скопіюй їх собі у проект. Для цього завантаж цей репозиторій як архів або використовуй [сервіс DownGit](https://downgit.github.io/) для завантаження окремої папки з репозиторія.
15 | - Файл `gallery-items.js` містить масив `galleryItems`, який містить об'єкти з інформацією про зображення: маленьке (прев`ю), оригінальне (велике) і опис. Ми вже підключили його до кожного з JS-файлів проекту.
16 | 
17 | ## Завдання 1 - галерея зображень
18 | 
19 | Створи галерею з можливістю кліку по її елементах і перегляду повнорозмірного зображення у модальному вікні. Подивися демо відео роботи галереї.
20 | 
21 | https://user-images.githubusercontent.com/17479434/127711719-4e293f5b-fbaa-4851-8671-fc841963d961.mp4
22 | 
23 | Виконуй це завдання у файлах `01-gallery.html` і `01-gallery.js`. Розбий його на декілька підзавдань:
24 | 
25 | 1. Створення і рендер розмітки на підставі масиву даних `galleryItems` і наданого шаблону елемента галереї.
26 | 2. Реалізація делегування на `ul.gallery` і отримання `url` великого зображення.
27 | 3. Підключення скрипту і стилів бібліотеки модального вікна [basicLightbox](https://basiclightbox.electerious.com/). Використовуй [CDN сервіс jsdelivr](https://www.jsdelivr.com/package/npm/basiclightbox?path=dist) і додай у проект посилання на мініфіковані (`.min`) файли бібліотеки.
28 | 4. Відкриття модального вікна по кліку на елементі галереї. Для цього ознайомся з [документацією](https://github.com/electerious/basicLightbox#readme) і [прикладами](https://basiclightbox.electerious.com/).
29 | 5.  Заміна значення атрибута `src` елемента `<img>` в модальному вікні перед відкриттям. Використовуй готову розмітку модального вікна із зображенням з прикладів бібліотеки [basicLightbox](https://basiclightbox.electerious.com/).
30 | 
31 | ### Розмітка елемента галереї
32 | 
33 | Посилання на оригінальне зображення повинно зберігатися в data-атрибуті `source` на елементі `<img>`, і вказуватися в `href` посилання. Не додавай інші HTML теги або CSS класи, крім тих, що містяться в цьому шаблоні.
34 | 
35 | ```html
36 | <ul class="gallery__item">
37 |   <a class="gallery__link" href="large-image.jpg">
38 |     <img
39 |       class="gallery__image"
40 |       src="small-image.jpg"
41 |       data-source="large-image.jpg"
42 |       alt="Image description"
43 |     />
44 |   </a>
45 | </ul>
46 | ```
47 | 
48 | Зверни увагу на те, що зображення обгорнуте посиланням, отже по кліку за замовчуванням користувач буде перенаправлений на іншу сторінку. Заборони цю поведінку за замовчуванням.
49 | 
50 | ### Закриття з клавіатури
51 | 
52 | > ⚠️ Наступний функціонал не обов'язковий для здавання завдання, але буде хорошою додатковою практикою.
53 | 
54 | Додай закриття модального вікна після натискання клавіші `Escape`. Зроби так, щоб прослуховування клавіатури було тільки доти, доки відкрите модальне вікно. Бібліотекаи [basicLightbox](https://basiclightbox.electerious.com/) містить метод для програмного закриття модального вікна.
55 | 
56 | ## Завдання 2 - бібліотека `SimpleLightbox`
57 | 
58 | Зроби таку саму галерею як в першому завданні, але використовуючи бібліотеку [SimpleLightbox](https://simplelightbox.com/), яка візьме на себе обробку кліків по зображеннях, відкриття і закриття модального вікна, а також гортання зображень за допомогою клавіатури.
59 | 
60 | https://user-images.githubusercontent.com/17479434/127714821-4b7527c8-01db-42d3-83f0-8c1578561982.mp4
61 | 
62 | Необхідно трохи змінити розмітку картки галереї, використовуй цей шаблон.
63 | 
64 | ```html
65 | <li class="gallery__item">
66 |    <a class="gallery__link" href="large-image.jpg">
67 |       <img class="gallery__image" src="small-image.jpg" alt="Image description" />
68 |    </a>
69 | </li>
70 | ```
71 | 
72 | Виконуй це завдання у файлах `02-lightbox.html` і `02-lightbox.js`. Розбий його на декілька підзавдань:
73 | 
74 | 1. Створення і рендер розмітки на підставі масиву даних `galleryItems` і наданого шаблону елемента галереї. Використовуй готовий код з першого завдання.
75 | 2. Підключення скрипту і стилів бібліотеки, використовуючи [CDN сервіс cdnjs](https://cdnjs.com/libraries/simplelightbox). Необхідно додати посилання на два файли: `simple-lightbox.min.js` і `simple-lightbox.min.css`.
76 | 3. Ініціалізація бібліотеки після створення і додання елементів галереї у `ul.gallery`. Для цього ознайомся з документацією [SimpleLightbox](https://simplelightbox.com/) - насамперед секції «Usage» і «Markup».
77 | 4. Подивися в документації секцію «Options» і додай відображення підписів до зображень з атрибута `alt`. Нехай підпис буде знизу і з'являється через 250 мілісекунд після відкриття зображення.
78 | 


--------------------------------------------------------------------------------
/v2/07/src/01-gallery.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Image gallery</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |     <link rel="stylesheet" href="css/styles.css" />
10 |   </head>
11 |   <body>
12 |     <p><a href="index.html">Go back</a></p>
13 | 
14 |     <!-- Add gallery items to this list -->
15 |     <ul class="gallery"></ul>
16 | 
17 |     <script src="js/01-gallery.js" type="module"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/v2/07/src/02-lightbox.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>SimpleLightbox library</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |     <link rel="stylesheet" href="css/styles.css" />
10 |   </head>
11 |   <body>
12 |     <p><a href="index.html">Go back</a></p>
13 | 
14 |     <!-- Add gallery items to this list -->
15 |     <ul class="gallery"></ul>
16 | 
17 |     <script src="js/02-lightbox.js" type="module"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/v2/07/src/css/common.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 16px;
 7 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 8 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 9 |   -webkit-font-smoothing: antialiased;
10 |   -moz-osx-font-smoothing: grayscale;
11 |   background-color: #fafafa;
12 |   color: #212121;
13 |   line-height: 1.5;
14 | }
15 | 
16 | input {
17 |   padding: 8px;
18 |   font: inherit;
19 | }
20 | 
21 | button {
22 |   padding: 8px 12px;
23 |   cursor: pointer;
24 | }
25 | 


--------------------------------------------------------------------------------
/v2/07/src/css/styles.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 3 |   --animation-duration: 250ms;
 4 | }
 5 | 
 6 | .gallery {
 7 |   display: grid;
 8 |   max-width: 1140px;
 9 |   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
10 |   grid-auto-rows: 240px;
11 |   grid-gap: 12px;
12 |   justify-content: center;
13 |   padding: 0;
14 |   list-style: none;
15 |   margin-left: auto;
16 |   margin-right: auto;
17 | }
18 | 
19 | .gallery__item {
20 |   position: relative;
21 |   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
22 |     0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
23 | }
24 | 
25 | .gallery__image:hover {
26 |   transform: scale(1.03);
27 | }
28 | 
29 | .gallery__image {
30 |   height: 100%;
31 |   width: 100%;
32 |   object-fit: cover;
33 |   transition: transform var(--animation-duration) var(--timing-function);
34 | }
35 | 
36 | .gallery__link {
37 |   display: block;
38 |   text-decoration: none;
39 |   height: 100%;
40 | }
41 | 
42 | .gallery__link:hover {
43 |   cursor: zoom-in;
44 | }
45 | 


--------------------------------------------------------------------------------
/v2/07/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Homework 7</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <ul>
12 |       <li><a href="01-gallery.html">Image gallery</a></li>
13 |       <li><a href="02-lightbox.html">SimpleLightbox library</a></li>
14 |     </ul>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/v2/07/src/js/01-gallery.js:
--------------------------------------------------------------------------------
1 | import { galleryItems } from './gallery-items.js';
2 | // Change code below this line
3 | 
4 | console.log(galleryItems);
5 | 


--------------------------------------------------------------------------------
/v2/07/src/js/02-lightbox.js:
--------------------------------------------------------------------------------
1 | import { galleryItems } from './gallery-items.js';
2 | // Change code below this line
3 | 
4 | console.log(galleryItems);
5 | 


--------------------------------------------------------------------------------
/v2/07/src/js/gallery-items.js:
--------------------------------------------------------------------------------
 1 | export const galleryItems = [
 2 |   {
 3 |     preview:
 4 |       'https://cdn.pixabay.com/photo/2019/05/14/16/43/rchids-4202820__480.jpg',
 5 |     original:
 6 |       'https://cdn.pixabay.com/photo/2019/05/14/16/43/rchids-4202820_1280.jpg',
 7 |     description: 'Hokkaido Flower',
 8 |   },
 9 |   {
10 |     preview:
11 |       'https://cdn.pixabay.com/photo/2019/05/14/22/05/container-4203677__340.jpg',
12 |     original:
13 |       'https://cdn.pixabay.com/photo/2019/05/14/22/05/container-4203677_1280.jpg',
14 |     description: 'Container Haulage Freight',
15 |   },
16 |   {
17 |     preview:
18 |       'https://cdn.pixabay.com/photo/2019/05/16/09/47/beach-4206785__340.jpg',
19 |     original:
20 |       'https://cdn.pixabay.com/photo/2019/05/16/09/47/beach-4206785_1280.jpg',
21 |     description: 'Aerial Beach View',
22 |   },
23 |   {
24 |     preview:
25 |       'https://cdn.pixabay.com/photo/2016/11/18/16/19/flowers-1835619__340.jpg',
26 |     original:
27 |       'https://cdn.pixabay.com/photo/2016/11/18/16/19/flowers-1835619_1280.jpg',
28 |     description: 'Flower Blooms',
29 |   },
30 |   {
31 |     preview:
32 |       'https://cdn.pixabay.com/photo/2018/09/13/10/36/mountains-3674334__340.jpg',
33 |     original:
34 |       'https://cdn.pixabay.com/photo/2018/09/13/10/36/mountains-3674334_1280.jpg',
35 |     description: 'Alpine Mountains',
36 |   },
37 |   {
38 |     preview:
39 |       'https://cdn.pixabay.com/photo/2019/05/16/23/04/landscape-4208571__340.jpg',
40 |     original:
41 |       'https://cdn.pixabay.com/photo/2019/05/16/23/04/landscape-4208571_1280.jpg',
42 |     description: 'Mountain Lake Sailing',
43 |   },
44 |   {
45 |     preview:
46 |       'https://cdn.pixabay.com/photo/2019/05/17/09/27/the-alps-4209272__340.jpg',
47 |     original:
48 |       'https://cdn.pixabay.com/photo/2019/05/17/09/27/the-alps-4209272_1280.jpg',
49 |     description: 'Alpine Spring Meadows',
50 |   },
51 |   {
52 |     preview:
53 |       'https://cdn.pixabay.com/photo/2019/05/16/21/10/landscape-4208255__340.jpg',
54 |     original:
55 |       'https://cdn.pixabay.com/photo/2019/05/16/21/10/landscape-4208255_1280.jpg',
56 |     description: 'Nature Landscape',
57 |   },
58 |   {
59 |     preview:
60 |       'https://cdn.pixabay.com/photo/2019/05/17/04/35/lighthouse-4208843__340.jpg',
61 |     original:
62 |       'https://cdn.pixabay.com/photo/2019/05/17/04/35/lighthouse-4208843_1280.jpg',
63 |     description: 'Lighthouse Coast Sea',
64 |   },
65 | ];
66 | 


--------------------------------------------------------------------------------
/v2/08/README.en.md:
--------------------------------------------------------------------------------
 1 | **Read in other languages: [Русский](README.md), [Українська](README.ua.md), [English](README.en.md), [Español](README.es.md), [Polski](README.pl.md).**
 2 | 
 3 | # Acceptance criteria
 4 | 
 5 | - `goit-js-hw-08` repository created.
 6 | - In your submitted homework, there are two links: One to your source files and one to your working page on `GitHub Pages`.
 7 | - During live page visits, there are no errors or warnings generated in the console.
 8 | - Project built with [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 9 | - Code formatted with `Prettier`.
10 | 
11 | ## Start files
12 | 
13 | In the [src folder](./src), you will find start files with ready-made markup, styles, and added script files for each task. Copy them to your project completely, replacing the `src` folder in [parcel-project-template](https://github.com/goitacademy/parcel-project-template). To do this, download this entire repository as an archive or use the [DownGit service](https://downgit.github.io/) to download a separate folder from the repository.
14 | 
15 | ## Task 1 - `SimpleLightbox` library
16 | 
17 | Do this task in the `01-gallery.html` and `01-gallery.js` files. Break it down into several subtasks:
18 | 
19 | 1. Add the [SimpleLightbox](https://simplelightbox.com/) library as a project dependency using `npm` (the CDN link from your past work is no longer needed).
20 | 2. Use your JavaScript code from the previous homework, but refactor it given that the library was installed via `npm` (import/export syntax).
21 | 
22 | In order to add the CSS code of the library to the project, you need to add one more import, aside from the one described in the documentation.
23 | 
24 | ```js
25 | // Described in import SimpleLightbox from 'simplelightbox' documentation;
26 | // Additional styles import: import 'simplelightbox/dist/simple-lightbox.min.css';
27 | ```
28 | 
29 | ## Task 2 - video player
30 | 
31 | In HTML, there is an `<iframe>` tag with video for Vimeo player. Write a script that will save the current video playback time to local storage and, upon page reload, continue to play the video from that time.
32 | 
33 | ```html
34 | <iframe
35 |   id="vimeo-player"
36 |   src="https://player.vimeo.com/video/236203659"
37 |   width="640"
38 |   height="360"
39 |   frameborder="0"
40 |   allowfullscreen
41 |   allow="autoplay; encrypted-media"
42 | ></iframe>
43 | ```
44 | 
45 | Do this task in the `02-video.html` and `02-video.js` files. Break it down into several subtasks:
46 | 
47 | 1. Check out the [documentation](https://github.com/vimeo/player.js/#vimeo-player-api) of the Vimeo player library.
48 | 2. Add the library as a project dependency via `npm`.
49 | 3. Initialize the player in the script file as described in the [pre-existing player](https://github.com/vimeo/player.js/#pre-existing-player) section, but note that you have added the player as an npm package, not via CDN.
50 | 4. Read the documentation of the [on()](https://github.com/vimeo/player.js/#onevent-string-callback-function-void) method and start tracking the [timeupdate](https://github.com/vimeo/player.js/#events) event - playback time update.
51 | 5. Save playback time to local storage. Let the key for the storage be the `"videoplayer-current-time"` string.
52 | 6. When reloading the page, use the [setCurrentTime()](https://github.com/vimeo/player.js/#setcurrenttimeseconds-number-promisenumber-rangeerrorerror) method to resume playback from the saved position.
53 | 7. Add the [lodash.throttle](https://www.npmjs.com/package/lodash.throttle) library to the project and make sure that the playback time is updated in the storage once per second or less frequently.
54 | 
55 | ## Task 3 - feedback form
56 | 
57 | In HTML, there is form markup. Write a script that will save field values to local storage when the user types something.
58 | 
59 | ```html
60 | <form class="feedback-form" autocomplete="off">
61 |   <label>
62 |     Email
63 |     <input type="email" name="email" autofocus />
64 |   </label>
65 |   <label>
66 |     Message
67 |     <textarea name="message" rows="8"></textarea>
68 |   </label>
69 |   <button type="submit">Submit</button>
70 | </form>
71 | ```
72 | 
73 | Do this task in the `03-feedback.html` and `03-feedback.js` files. Break it down into several subtasks:
74 | 
75 | 1. Track the `input` event on the form, and each time write to local storage an object with the `email` and `message` fields, in which you save the current values of the form fields. Let the key for the storage be the `"feedback-form-state"` string.
76 | 2. When loading the page, check the state of the storage, and if it has stored some data, use it to fill in the form fields. Otherwise, the fields must be empty.
77 | 3. When submitting the form, clear the storage and form fields and also display the object with the `email` and `message` fields, as well as their current values, in the console.
78 | 4. Make sure that the storage is updated no more than once every 500 milliseconds. To do this, add the [lodash.throttle](https://www.npmjs.com/package/lodash.throttle) library to the project and use it.
79 | 


--------------------------------------------------------------------------------
/v2/08/README.es.md:
--------------------------------------------------------------------------------
  1 | **Read in other languages: [Русский](README.md), [Українська](README.ua.md),
  2 | [English](README.en.md), [Español](README.es.md), [Polski](README.pl.md).**
  3 | 
  4 | # Criterios de admisión
  5 | 
  6 | - Se ha creado el repositorio `goit-js-hw-08`.
  7 | - Al entregar las tareas, existen dos enlaces: a los archivos de origen y el trabajo 
  8 |   en la página de `GitHub Pages`.
  9 | - Al visitar la página de trabajos en vivo, no hay errores ni advertencias en la consola.
 10 | - El proyecto está construido con la ayuda de
 11 |   [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 12 | - El código es formateado por `Prettier`.
 13 | 
 14 | ## Archivos de inicio
 15 | 
 16 | En la [carpeta src](./src) encontrará archivos de inicio con diseño, estilos y
 17 | archivos de script conectados para cada trabajo. Cópielos en su proyecto,
 18 | reemplazando completamente la carpeta `src` en
 19 | [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 20 | Para eso, descargue todo el repositorio como un archivo o use el
 21 | [servicio DownGit](https://downgit.github.io/) para descargar una carpeta individual del
 22 | depósito.
 23 | 
 24 | ## Tarea 1 - biblioteca `SimpleLightbox`
 25 | 
 26 | Realice esta tarea en los archivos `01-gallery.html` y `01-gallery.js`. Divídalo en
 27 | varias subtareas:
 28 | 
 29 | 1. Añada una biblioteca [SimpleLightbox](https://simplelightbox.com/) como
 30 |    dependencia del proyecto usando `npm` (el enlace CDN de su último trabajo
 31 |    ya no es necesario).
 32 | 2. Use el código JavaScript de su tarea anterior, pero refactorice
 33 |    teniendo en cuenta que la biblioteca fue instalada a través de `npm`.
 34 |    (sintaxis de import/export).
 35 | 
 36 | Para incluir el código CSS de la biblioteca en el proyecto, es necesario añadir otro
 37 | import más, además de la descrita en la documentación.
 38 | 
 39 | ```js
 40 | // Descrito en la documentación
 41 | import SimpleLightbox from 'simplelightbox';
 42 | // Importación adicional de estilos
 43 | import 'simplelightbox/dist/simple-lightbox.min.css';
 44 | ```
 45 | 
 46 | ## Tarea 2 - reproductor de vídeo
 47 | 
 48 | El HTML tiene un `<iframe>` con un vídeo para el reproductor de Vimeo. Escriba un script que
 49 | guarda el tiempo de reproducción del vídeo actual en el almacenamiento local y en la
 50 | recarga de la página, continúa reproduciendo el vídeo desde ese momento.
 51 | 
 52 | ```html
 53 | <iframe
 54 |   id="vimeo-player"
 55 |   src="https://player.vimeo.com/video/236203659"
 56 |   width="640"
 57 |   height="360"
 58 |   frameborder="0"
 59 |   allowfullscreen
 60 |   allow="autoplay; encrypted-media"
 61 | ></iframe>
 62 | ```
 63 | 
 64 | Ejecute esta tarea en los archivos `02-video.html' y `02-video.js'. Divídalo en
 65 | varias subtareas:
 66 | 
 67 | 1. Ver más información sobre la
 68 |    [documentación](https://github.com/vimeo/player.js/#vimeo-player-api)
 69 |    de la biblioteca del reproductor Vimeo.
 70 | 2. Añada la biblioteca como dependencia del proyecto a través de `npm`.
 71 | 3. Inicialice el reproductor en el archivo de script como se describe en la sección
 72 |    [pre-existing player](https://github.com/vimeo/player.js/#pre-existing-player),
 73 |    pero tenga en cuenta que ha añadido el reproductor como un paquete npm, y no vía CDN.
 74 | 4. Ordene la documentación del método
 75 |    [on()](https://github.com/vimeo/player.js/#onevent-string-callback-function-void)
 76 |    y empiece a seguir el evento
 77 |    [timeupdate](https://github.com/vimeo/player.js/#events), actualización del
 78 |    tiempo de reproducción.
 79 | 5. Guarde el tiempo de reproducción en el almacenamiento local. Deje que la clave sea
 80 |    la secuencia `"videoplayer-current-time"`.
 81 | 6. Al recargar la página, use el método
 82 |    [setCurrentTime()](https://github.com/vimeo/player.js/#setcurrenttimeseconds-number-promisenumber-rangeerrorerror)
 83 |    para reanudar la reproducción desde la posición guardada.
 84 | 7. Añada una biblioteca al proyecto
 85 |    [lodash.throttle](https://www.npmjs.com/package/lodash.throttle) y asegúrese
 86 |    que el tiempo de reproducción se actualice en la memoria no más de una vez por
 87 |    por segundo.
 88 | 
 89 | ## Tarea 3 - formulario Feedback
 90 | 
 91 | HTML tiene un diseño de formulario. Escriba un script que guarde los valores de los espacios
 92 | en el almacenamiento local cuando el usuario escriba algo.
 93 | 
 94 | ```html
 95 | <form class="feedback-form" autocomplete="off">
 96 |   <label>
 97 |     Email
 98 |     <input type="email" name="email" autofocus />
 99 |   </label>
100 |   <label>
101 |     Message
102 |     <textarea name="message" rows="8"></textarea>
103 |   </label>
104 |   <button type="submit">Submit</button>
105 | </form>
106 | ```
107 | 
108 | Ejecute esta tarea en los archivos `03-feedback.html` y `03-feedback.js`. Desglose
109 | en varias subtareas:
110 | 
111 | 1. Monitorizar el evento `input` en el formulario, y cada vez escribir en el almacenamiento
112 |    local en un objeto con los espacios `email` y `message`, en los que se almacenan los
113 |    valores de los espacios del formulario. Dejemos que la clave del repositorio sea la secuencia
114 |    `"feedback-form-state"`.
115 | 2. Cuando la página se cargue, compruebe el estado del almacenamiento y si hay
116 |    datos guardados, rellene los espacios del formulario con ellos. En caso contrario, los espacios deben estar
117 |    vacíos.
118 | 3. Al enviar el formulario, borre el almacenamiento y los campos del formulario, y emita un objeto con
119 |    los espacios `email` y `message` y sus valores actuales a la consola.
120 | 4. Asegúrese de que el repositorio no se actualice con más frecuencia que una vez cada 500 milisegundos.
121 |    Para eso, añada al proyecto y use la biblioteca
122 |    [lodash.throttle](https://www.npmjs.com/package/lodash.throttle).
123 | 


--------------------------------------------------------------------------------
/v2/08/README.md:
--------------------------------------------------------------------------------
  1 | **Read in other languages: [Русский](README.md), [Українська](README.ua.md),
  2 | [English](README.en.md), [Español](README.es.md), [Polski](README.pl.md).**
  3 | 
  4 | # Критерии приема
  5 | 
  6 | - Создан репозиторий `goit-js-hw-08`.
  7 | - При сдаче домашней работы есть две ссылки: на исходные файлы и рабочую
  8 |   страницу на `GitHub Pages`.
  9 | - При посещении живой страницы задания, в консоли нету ошибок и предупреждений.
 10 | - Проект собран с помощью
 11 |   [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 12 | - Код отформатирован `Prettier`.
 13 | 
 14 | ## Стартовые файлы
 15 | 
 16 | [Скачай стартовые файлы](https://downgit.github.io/#/home?url=https://github.com/goitacademy/javascript-homework/tree/main/v2/08/src)
 17 | с готовой разметкой, стилями и подключенными файлами скриптов для каждого
 18 | задания. Скопируй их себе в проект, полностью заменив папку `src` в
 19 | [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 20 | 
 21 | ## Задание 1 - библиотека `SimpleLightbox`
 22 | 
 23 | Выполняй это задание в файлах `01-gallery.html` и `01-gallery.js`. Разбей его на
 24 | несколько подзадач:
 25 | 
 26 | 1. Добавь библиотеку [SimpleLightbox](https://simplelightbox.com/) как
 27 |    зависимость проекта используя `npm` (ссылка на CDN из твоей прошлой работы
 28 |    больше не нужна).
 29 | 2. Используй свой JavaScript код из предыдущей домашней работы, но выполни
 30 |    рефакторинг с учетом того, что библиотека была установлена через `npm`
 31 |    (синтаксис import/export).
 32 | 
 33 | Для того чтобы подключить CSS код библиотеки в проект, необходимо добавить еще
 34 | один импорт, кроме того который описан в документации.
 35 | 
 36 | ```js
 37 | // Описан в документации
 38 | import SimpleLightbox from 'simplelightbox';
 39 | // Дополнительный импорт стилей
 40 | import 'simplelightbox/dist/simple-lightbox.min.css';
 41 | ```
 42 | 
 43 | ## Задание 2 - видео плеер
 44 | 
 45 | В HTML есть `<iframe>` с видео для Vimeo плеера. Напиши скрипт который будет
 46 | сохранять текущее время воспроизведения видео в локальное хранилище и, при
 47 | перезагрузке страницы, продолжать воспроизводить видео с этого времени.
 48 | 
 49 | ```html
 50 | <iframe
 51 |   id="vimeo-player"
 52 |   src="https://player.vimeo.com/video/236203659"
 53 |   width="640"
 54 |   height="360"
 55 |   frameborder="0"
 56 |   allowfullscreen
 57 |   allow="autoplay; encrypted-media"
 58 | ></iframe>
 59 | ```
 60 | 
 61 | Выполняй это задание в файлах `02-video.html` и `02-video.js`. Разбей его на
 62 | несколько подзадач:
 63 | 
 64 | 1. Ознакомься с
 65 |    [документацией](https://github.com/vimeo/player.js/#vimeo-player-api)
 66 |    библиотеки Vimeo плеера.
 67 | 2. Добавь библиотеку как зависимость проекта через `npm`.
 68 | 3. Инициализируй плеер в файле скрипта как это описано в секции
 69 |    [pre-existing player](https://github.com/vimeo/player.js/#pre-existing-player),
 70 |    но учти что у тебя плеер добавлен как npm пакет, а не через CDN.
 71 | 4. Разбери документацию метода
 72 |    [on()](https://github.com/vimeo/player.js/#onevent-string-callback-function-void)
 73 |    и начни отслеживать событие
 74 |    [timeupdate](https://github.com/vimeo/player.js/#events) - обновление времени
 75 |    воспроизведения.
 76 | 5. Сохраняй время воспроизведения в локальное хранилище. Пусть ключом для
 77 |    хранилища будет строка `"videoplayer-current-time"`.
 78 | 6. При перезагрузке страницы воспользуйся методом
 79 |    [setCurrentTime()](https://github.com/vimeo/player.js/#setcurrenttimeseconds-number-promisenumber-rangeerrorerror)
 80 |    для того чтобы возобновить воспроизведение с сохраненной позиции.
 81 | 7. Добавь в проект бибилотеку
 82 |    [lodash.throttle](https://www.npmjs.com/package/lodash.throttle) и сделай
 83 |    так, чтобы время воспроизведения обновлялось в хранилище не чаще чем раз в
 84 |    секунду.
 85 | 
 86 | ## Задание 3 - форма обратной связи
 87 | 
 88 | В HTML есть разметка формы. Напиши скрипт который будет сохранять значения полей
 89 | в локальное хранилище когда пользователь что-то печатает.
 90 | 
 91 | ```html
 92 | <form class="feedback-form" autocomplete="off">
 93 |   <label>
 94 |     Email
 95 |     <input type="email" name="email" autofocus />
 96 |   </label>
 97 |   <label>
 98 |     Message
 99 |     <textarea name="message" rows="8"></textarea>
100 |   </label>
101 |   <button type="submit">Submit</button>
102 | </form>
103 | ```
104 | 
105 | Выполняй это задание в файлах `03-feedback.html` и `03-feedback.js`. Разбей его
106 | на несколько подзадач:
107 | 
108 | 1. Отслеживай на форме событие `input`, и каждый раз записывай в локальное
109 |    хранилище объект с полями `email` и `message`, в которых сохраняй текущие
110 |    значения полей формы. Пусть ключом для хранилища будет строка
111 |    `"feedback-form-state"`.
112 | 2. При загрузке страницы проверяй состояние хранилища, и если там есть
113 |    сохраненные данные, заполняй ими поля формы. В противном случае поля должны
114 |    быть пустыми.
115 | 3. При сабмите формы очищай хранилище и поля формы, а также выводи объект с
116 |    полями `email`, `message` и текущими их значениями в консоль.
117 | 4. Сделай так, чтобы хранилище обновлялось не чаще чем раз в 500 миллисекунд.
118 |    Для этого добавь в проект и используй библиотеку
119 |    [lodash.throttle](https://www.npmjs.com/package/lodash.throttle).
120 | 


--------------------------------------------------------------------------------
/v2/08/README.pl.md:
--------------------------------------------------------------------------------
  1 | **Read in other languages: [Русский](README.md), [Українська](README.ua.md),
  2 | [English](README.en.md), [Español](README.es.md), [Polski](README.pl.md).**
  3 | 
  4 | # Kryteria przyjęcia
  5 | 
  6 | - Utworzono repozytorium `goit-js-hw-08`.
  7 | - Przy oddaniu pracy domowej dołączono linki: do plików źródłowych i strony
  8 |   roboczej na `GitHub Pages`.
  9 | - Wiersz poleceń nie zawiera błędów i ostrzeżeń.
 10 | - Projekt utworzono z pomocą
 11 |   [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 12 | - Sformatowano kod `Prettier`.
 13 | 
 14 | ## Pliki startowe
 15 | 
 16 | W [folderze src](./src) znajdziesz pliki startowe z gotowym znacznikiem, stylami
 17 | i połączonymi plikami skryptów dla każdego zadania. Skopiuj je do swojego
 18 | projektu, całkowicie zamieniając folder `src` w
 19 | [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 20 | Aby to zrobić, pobierz całe repozytorium jako archiwum lub użyj
 21 | [serwisu DownGit](https://downgit.github.io/) aby pobrać oddzielny folder z
 22 | repozytorium.
 23 | 
 24 | ## Zadanie 1 - biblioteka `SimpleLightbox`
 25 | 
 26 | Wykonuj to zadanie w plikach `01-gallery.html` i `01-gallery.js`. Rozbij je na
 27 | kilka podzadań:
 28 | 
 29 | 1. Dodaj bibliotekę [SimpleLightbox](https://simplelightbox.com/) jako zależność
 30 |    projektu używając `npm` (link do CDN z Twojej poprzedniej pracy nie jest już
 31 |    potrzebny).
 32 | 2. Użyj swojego kodu JavaScript z poprzedniej pracy domowej, ale zrealizuj
 33 |    refaktoryzację uwzględniając to, że biblioteka została zainstalowana przez
 34 |    `npm` (składnia import/export).
 35 | 
 36 | Aby umieścić kod CSS biblioteki w projekcie, należy dodać jeszcze jeden import,
 37 | oprócz tego opisanego w dokumentacji.
 38 | 
 39 | ```js
 40 | // Opisany w dokumentacji
 41 | import SimpleLightbox from 'simplelightbox';
 42 | // Dodatkowy import stylów
 43 | import 'simplelightbox/dist/simple-lightbox.min.css';
 44 | ```
 45 | 
 46 | ## Zadanie 2 - odtwarzacz wideo
 47 | 
 48 | W HTML znajduje się `<iframe>` z wideo na Vimeo. Napisz skrypt, który będzie
 49 | zapisywał aktualny czas odtwarzania wideo w local storage i, podczas
 50 | przeładowywania strony, kontynuuje odtwarzanie wideo od danego momentu.
 51 | 
 52 | ```html
 53 | <iframe
 54 |   id="vimeo-player"
 55 |   src="https://player.vimeo.com/video/236203659"
 56 |   width="640"
 57 |   height="360"
 58 |   frameborder="0"
 59 |   allowfullscreen
 60 |   allow="autoplay; encrypted-media"
 61 | ></iframe>
 62 | ```
 63 | 
 64 | Wykonuj to zadanie w plikach `02-video.html` i `02-video.js`. Rozbij je na kilka
 65 | podzadań:
 66 | 
 67 | 1. Zapoznaj się z
 68 |    [dokumentacją](https://github.com/vimeo/player.js/#vimeo-player-api)
 69 |    biblioteki odtwarzacza Vimeo.
 70 | 2. Dodaj bibliotekę jako zależność projektu poprzez `npm`.
 71 | 3. Inicjalizuj odtwarzacz w pliku skryptu tak, jak opisano w sekcji
 72 |    [pre-existing player](https://github.com/vimeo/player.js/#pre-existing-player),
 73 |    ale weź pod uwagę to, że odtwarzacz dodano jako pakiet npm, a nie poprzez
 74 |    CDN.
 75 | 4. Zbadaj dokumentację metody
 76 |    [on()](https://github.com/vimeo/player.js/#onevent-string-callback-function-void)
 77 |    i zacznij śledzić zdarzenie
 78 |    [timeupdate](https://github.com/vimeo/player.js/#events) - aktualizacja czasu
 79 |    odtwarzania.
 80 | 5. Zapisuj czas odtwarzania w local storage. Niech kluczem do storage będzie
 81 |    `"videoplayer-current-time"`.
 82 | 6. Do przeładowywania strony używaj metody
 83 |    [setCurrentTime()](https://github.com/vimeo/player.js/#setcurrenttimeseconds-number-promisenumber-rangeerrorerror)
 84 |    aby wznowić odtwarzanie od zapisanego momentu.
 85 | 7. Dodaj do projektu bibliotekę
 86 |    [lodash.throttle](https://www.npmjs.com/package/lodash.throttle) i zrób tak,
 87 |    aby czas odtwarzania aktualizował się w storage nie częściej niż raz na
 88 |    sekundę.
 89 | 
 90 | ## Zadanie 3 - formularz kontaktowy
 91 | 
 92 | W HTML znajduje się znacznik formularza. Napisz skrypt, który będzie zapisywał
 93 | wartości pól w local storage, gdy użytkownik coś wpisuje.
 94 | 
 95 | ```html
 96 | <form class="feedback-form" autocomplete="off">
 97 |   <label>
 98 |     Email
 99 |     <input type="email" name="email" autofocus />
100 |   </label>
101 |   <label>
102 |     Message
103 |     <textarea name="message" rows="8"></textarea>
104 |   </label>
105 |   <button type="submit">Submit</button>
106 | </form>
107 | ```
108 | 
109 | Wykonuj to zadanie w plikach `03-feedback.html` i `03-feedback.js`. Rozbij je na
110 | kilka podzadań:
111 | 
112 | 1. Śledź w formularzu zdarzenie `input`, i za każdym razem zapisuj w local
113 |    storage obiekt z polami `email` i `message`, w których przechowuj aktualne
114 |    wartości pól formularza. Niech kluczem do storage będzie
115 |    `"feedback-form-state"`.
116 | 2. Podczas przeładowywania strony sprawdzaj stan storage i jeśli są tam zapisane
117 |    dane, wypełniaj nimi pola formularza. W przeciwnym wypadku pola powinny być
118 |    puste.
119 | 3. Po wysłaniu formularza wyczyść storage i pola formularza, a także wprowadź
120 |    obiekt z polami `email`, `message` i ich aktualnymi wartościami do wiersza
121 |    poleceń.
122 | 4. Zrób tak, aby storage aktualizował się nie częściej niż raz na 500
123 |    milisekund. Aby to zrobić, użyj biblioteki
124 |    [lodash.throttle](https://www.npmjs.com/package/lodash.throttle) i dodaj ją
125 |    do projektu.
126 | 


--------------------------------------------------------------------------------
/v2/08/README.ua.md:
--------------------------------------------------------------------------------
  1 | **Read in other languages: [Русский](README.md), [Українська](README.ua.md),
  2 | [English](README.en.md), [Español](README.es.md), [Polski](README.pl.md).**
  3 | 
  4 | # Критерії приймання
  5 | 
  6 | - Створено репозиторій `goit-js-hw-08`.
  7 | - Домашня робота містить два посилання: на вихідні файли і робочу сторінку на
  8 |   `GitHub Pages`.
  9 | - В консолі відсутні помилки і попередження під час відкриття живої сторінки
 10 |   завдання.
 11 | - Проект зібраний за допомогою
 12 |   [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 13 | - Код відформатований за допомогою `Prettier`.
 14 | 
 15 | ## Стартові файли
 16 | 
 17 | У [папці src](./src) знайдеш стартові файли з готовою розміткою, стилями і
 18 | підключеними файлами скриптів для кожного завдання. Скопіюй їх собі у проект,
 19 | повністю замінивши папку `src` в
 20 | [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 21 | Для цього завантаж увесь цей репозиторій як архів або використовуй
 22 | [сервіс DownGit](https://downgit.github.io/) для завантаження окремої папки з
 23 | репозиторія.
 24 | 
 25 | ## Завдання 1 - бібліотека `SimpleLightbox`
 26 | 
 27 | Виконуй це завдання у файлах `01-gallery.html` і `01-gallery.js`. Розбий його на
 28 | декілька підзавдань:
 29 | 
 30 | 1. Додай бібліотеку [SimpleLightbox](https://simplelightbox.com/) як залежність
 31 |    проекту, використовуючи `npm` (посилання на CDN з твоєї минулої роботи більше
 32 |    не потрібне).
 33 | 2. Використовуй свій JavaScript код з попередньої домашньої роботи, але виконай
 34 |    рефакторинг з урахуванням того, що бібліотека була встановлена через `npm`
 35 |    (синтаксис import/export).
 36 | 
 37 | Для того щоб підключити CSS код бібліотеки в проект, необхідно додати ще один
 38 | імпорт, крім того, що описаний в документації.
 39 | 
 40 | ```js
 41 | // Описаний в документації
 42 | import SimpleLightbox from 'simplelightbox';
 43 | // Додатковий імпорт стилів
 44 | import 'simplelightbox/dist/simple-lightbox.min.css';
 45 | ```
 46 | 
 47 | ## Завдання 2 - відеоплеєр
 48 | 
 49 | HTML містить `<iframe>` з відео для Vimeo плеєра. Напиши скрипт, який буде
 50 | зберігати поточний час відтворення відео у локальне сховище і, після
 51 | перезавантаження сторінки, продовжувати відтворювати відео з цього часу.
 52 | 
 53 | ```html
 54 | <iframe
 55 |   id="vimeo-player"
 56 |   src="https://player.vimeo.com/video/236203659"
 57 |   width="640"
 58 |   height="360"
 59 |   frameborder="0"
 60 |   allowfullscreen
 61 |   allow="autoplay; encrypted-media"
 62 | ></iframe>
 63 | ```
 64 | 
 65 | Виконуй це завдання у файлах `02-video.html` і `02-video.js`. Розбий його на
 66 | декілька підзавдань:
 67 | 
 68 | 1. Ознайомся з
 69 |    [документацією](https://github.com/vimeo/player.js/#vimeo-player-api)
 70 |    бібліотеки Vimeo плеєра.
 71 | 2. Додай бібліотеку як залежність проекту через `npm`.
 72 | 3. Ініціалізуй плеєр у файлі скрипта як це описано в секції
 73 |    [pre-existing player](https://github.com/vimeo/player.js/#pre-existing-player),
 74 |    але враховуй, що у тебе плеєр доданий як npm пакет, а не через CDN.
 75 | 4. Вивчи документацію методу
 76 |    [on()](https://github.com/vimeo/player.js/#onevent-string-callback-function-void)
 77 |    і почни відстежувати подію
 78 |    [timeupdate](https://github.com/vimeo/player.js/#events) - оновлення часу
 79 |    відтворення.
 80 | 5. Зберігай час відтворення у локальне сховище. Нехай ключем для сховища буде
 81 |    рядок `"videoplayer-current-time"`.
 82 | 6. Під час перезавантаження сторінки скористайся методом
 83 |    [setCurrentTime()](https://github.com/vimeo/player.js/#setcurrenttimeseconds-number-promisenumber-rangeerrorerror)
 84 |    з метою відновлення відтворення зі збереженої позиції.
 85 | 7. Додай до проекту бібілотеку
 86 |    [lodash.throttle](https://www.npmjs.com/package/lodash.throttle) і зроби так,
 87 |    щоб час відтворення оновлювався у сховищі не частіше, ніж раз на секунду.
 88 | 
 89 | ## Завдання 3 - форма зворотного зв'язку
 90 | 
 91 | HTML містить розмітку форми. Напиши скрипт, який буде зберігати значення полів у
 92 | локальне сховище, коли користувач щось друкує.
 93 | 
 94 | ```html
 95 | <form class="feedback-form" autocomplete="off">
 96 |   <label>
 97 |     Email
 98 |     <input type="email" name="email" autofocus />
 99 |   </label>
100 |   <label>
101 |     Message
102 |     <textarea name="message" rows="8"></textarea>
103 |   </label>
104 |   <button type="submit">Submit</button>
105 | </form>
106 | ```
107 | 
108 | Виконуй це завдання у файлах `03-feedback.html` і `03-feedback.js`. Розбий його
109 | на декілька підзавдань:
110 | 
111 | 1. Відстежуй на формі подію `input`, і щоразу записуй у локальне сховище об'єкт
112 |    з полями `email` і `message`, у яких зберігай поточні значення полів форми.
113 |    Нехай ключем для сховища буде рядок `"feedback-form-state"`.
114 | 2. Під час завантаження сторінки перевіряй стан сховища, і якщо там є збережені
115 |    дані, заповнюй ними поля форми. В іншому випадку поля повинні бути порожніми.
116 | 3. Під час сабміту форми очищуй сховище і поля форми, а також виводь у консоль
117 |    об'єкт з полями `email`, `message` та їхніми поточними значеннями.
118 | 4. Зроби так, щоб сховище оновлювалось не частіше, ніж раз на 500 мілісекунд.
119 |    Для цього додай до проекту і використовуй бібліотеку
120 |    [lodash.throttle](https://www.npmjs.com/package/lodash.throttle).
121 | 


--------------------------------------------------------------------------------
/v2/08/src/01-gallery.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>SimpleLightbox library</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |     <link rel="stylesheet" href="css/01-gallery.css" />
10 |   </head>
11 |   <body>
12 |     <p><a href="index.html">Go back</a></p>
13 | 
14 |     <!-- Add gallery items to this list -->
15 |     <ul class="gallery"></ul>
16 | 
17 |     <script src="js/01-gallery.js" type="module"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/v2/08/src/02-video.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Video playback</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="index.html">Go back</a></p>
12 | 
13 |     <iframe
14 |       id="vimeo-player"
15 |       src="https://player.vimeo.com/video/236203659"
16 |       width="640"
17 |       height="360"
18 |       frameborder="0"
19 |       allowfullscreen
20 |       allow="autoplay; encrypted-media"
21 |     ></iframe>
22 | 
23 |     <script src="js/02-video.js" type="module"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/v2/08/src/03-feedback.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Feedback form</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |     <link rel="stylesheet" href="css/03-feedback.css" />
10 |   </head>
11 |   <body>
12 |     <p><a href="index.html">Go back</a></p>
13 | 
14 |     <form class="feedback-form" autocomplete="off">
15 |       <label>
16 |         Email
17 |         <input type="email" name="email" autofocus />
18 |       </label>
19 |       <label>
20 |         Message
21 |         <textarea name="message" rows="8"></textarea>
22 |       </label>
23 |       <button type="submit">Submit</button>
24 |     </form>
25 | 
26 |     <script src="js/03-feedback.js" type="module"></script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/v2/08/src/css/01-gallery.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 3 |   --animation-duration: 250ms;
 4 | }
 5 | 
 6 | .gallery {
 7 |   display: grid;
 8 |   max-width: 1140px;
 9 |   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
10 |   grid-auto-rows: 240px;
11 |   grid-gap: 12px;
12 |   justify-content: center;
13 |   margin-left: auto;
14 |   margin-right: auto;
15 | }
16 | 
17 | .gallery__item {
18 |   position: relative;
19 |   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
20 |     0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
21 | }
22 | 
23 | .gallery__image:hover {
24 |   transform: scale(1.03);
25 | }
26 | 
27 | .gallery__image {
28 |   height: 100%;
29 |   width: 100%;
30 |   object-fit: cover;
31 |   transition: transform var(--animation-duration) var(--timing-function);
32 | }
33 | 
34 | .gallery__link {
35 |   display: block;
36 |   text-decoration: none;
37 |   height: 100%;
38 | }
39 | 
40 | .gallery__link:hover {
41 |   cursor: zoom-in;
42 | }
43 | 


--------------------------------------------------------------------------------
/v2/08/src/css/03-feedback.css:
--------------------------------------------------------------------------------
 1 | .feedback-form {
 2 |   display: flex;
 3 |   flex-direction: column;
 4 |   max-width: 480px;
 5 |   padding: 12px;
 6 |   background-color: #fff;
 7 |   border: 1px solid rgba(0, 0, 0, 0.12);
 8 |   border-radius: 4px;
 9 | }
10 | 
11 | .feedback-form label {
12 |   display: flex;
13 |   flex-direction: column;
14 |   margin-bottom: 16px;
15 | }
16 | 
17 | .feedback-form button {
18 |   padding: 8px 12px;
19 |   font: inherit;
20 |   cursor: pointer;
21 | }
22 | 
23 | input,
24 | textarea {
25 |   padding: 8px;
26 |   font: inherit;
27 | }
28 | 
29 | textarea {
30 |   resize: none;
31 | }
32 | 


--------------------------------------------------------------------------------
/v2/08/src/css/common.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 7 |     Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
 8 |   -webkit-font-smoothing: antialiased;
 9 |   -moz-osx-font-smoothing: grayscale;
10 |   background-color: #fafafa;
11 |   color: #212121;
12 |   line-height: 1.5;
13 | }
14 | 
15 | img {
16 |   display: block;
17 |   max-width: 100%;
18 | }
19 | 


--------------------------------------------------------------------------------
/v2/08/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Homework 8</title>
 8 |     <link rel="stylesheet" href="css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <ul>
12 |       <li><a href="01-gallery.html">Image gallery</a></li>
13 |       <li><a href="02-video.html">Video playback</a></li>
14 |       <li><a href="03-feedback.html">Feedback form</a></li>
15 |     </ul>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/v2/08/src/js/01-gallery.js:
--------------------------------------------------------------------------------
1 | // Add imports above this line
2 | import { galleryItems } from './gallery-items';
3 | // Change code below this line
4 | 
5 | console.log(galleryItems);
6 | 


--------------------------------------------------------------------------------
/v2/08/src/js/02-video.js:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/v2/08/src/js/03-feedback.js:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/v2/08/src/js/gallery-items.js:
--------------------------------------------------------------------------------
 1 | export const galleryItems = [
 2 |   {
 3 |     preview:
 4 |       'https://cdn.pixabay.com/photo/2019/05/14/16/43/rchids-4202820__480.jpg',
 5 |     original:
 6 |       'https://cdn.pixabay.com/photo/2019/05/14/16/43/rchids-4202820_1280.jpg',
 7 |     description: 'Hokkaido Flower',
 8 |   },
 9 |   {
10 |     preview:
11 |       'https://cdn.pixabay.com/photo/2019/05/14/22/05/container-4203677__340.jpg',
12 |     original:
13 |       'https://cdn.pixabay.com/photo/2019/05/14/22/05/container-4203677_1280.jpg',
14 |     description: 'Container Haulage Freight',
15 |   },
16 |   {
17 |     preview:
18 |       'https://cdn.pixabay.com/photo/2019/05/16/09/47/beach-4206785__340.jpg',
19 |     original:
20 |       'https://cdn.pixabay.com/photo/2019/05/16/09/47/beach-4206785_1280.jpg',
21 |     description: 'Aerial Beach View',
22 |   },
23 |   {
24 |     preview:
25 |       'https://cdn.pixabay.com/photo/2016/11/18/16/19/flowers-1835619__340.jpg',
26 |     original:
27 |       'https://cdn.pixabay.com/photo/2016/11/18/16/19/flowers-1835619_1280.jpg',
28 |     description: 'Flower Blooms',
29 |   },
30 |   {
31 |     preview:
32 |       'https://cdn.pixabay.com/photo/2018/09/13/10/36/mountains-3674334__340.jpg',
33 |     original:
34 |       'https://cdn.pixabay.com/photo/2018/09/13/10/36/mountains-3674334_1280.jpg',
35 |     description: 'Alpine Mountains',
36 |   },
37 |   {
38 |     preview:
39 |       'https://cdn.pixabay.com/photo/2019/05/16/23/04/landscape-4208571__340.jpg',
40 |     original:
41 |       'https://cdn.pixabay.com/photo/2019/05/16/23/04/landscape-4208571_1280.jpg',
42 |     description: 'Mountain Lake Sailing',
43 |   },
44 |   {
45 |     preview:
46 |       'https://cdn.pixabay.com/photo/2019/05/17/09/27/the-alps-4209272__340.jpg',
47 |     original:
48 |       'https://cdn.pixabay.com/photo/2019/05/17/09/27/the-alps-4209272_1280.jpg',
49 |     description: 'Alpine Spring Meadows',
50 |   },
51 |   {
52 |     preview:
53 |       'https://cdn.pixabay.com/photo/2019/05/16/21/10/landscape-4208255__340.jpg',
54 |     original:
55 |       'https://cdn.pixabay.com/photo/2019/05/16/21/10/landscape-4208255_1280.jpg',
56 |     description: 'Nature Landscape',
57 |   },
58 |   {
59 |     preview:
60 |       'https://cdn.pixabay.com/photo/2019/05/17/04/35/lighthouse-4208843__340.jpg',
61 |     original:
62 |       'https://cdn.pixabay.com/photo/2019/05/17/04/35/lighthouse-4208843_1280.jpg',
63 |     description: 'Lighthouse Coast Sea',
64 |   },
65 | ];
66 | 


--------------------------------------------------------------------------------
/v2/09/src/01-color-switcher.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Color switcher</title>
 7 |     <link rel="stylesheet" href="css/common.css" />
 8 |   </head>
 9 |   <body>
10 |     <p><a href="index.html">Go back</a></p>
11 | 
12 |     <button type="button" data-start>Start</button>
13 |     <button type="button" data-stop>Stop</button>
14 | 
15 |     <script src="js/01-color-switcher.js" type="module"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/v2/09/src/02-timer.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Countdown timer</title>
 7 |     <link rel="stylesheet" href="css/common.css" />
 8 |   </head>
 9 |   <body>
10 |     <p><a href="index.html">Go back</a></p>
11 | 
12 |     <input type="text" id="datetime-picker" />
13 |     <button type="button" data-start>Start</button>
14 | 
15 |     <div class="timer">
16 |       <div class="field">
17 |         <span class="value" data-days>00</span>
18 |         <span class="label">Days</span>
19 |       </div>
20 |       <div class="field">
21 |         <span class="value" data-hours>00</span>
22 |         <span class="label">Hours</span>
23 |       </div>
24 |       <div class="field">
25 |         <span class="value" data-minutes>00</span>
26 |         <span class="label">Minutes</span>
27 |       </div>
28 |       <div class="field">
29 |         <span class="value" data-seconds>00</span>
30 |         <span class="label">Seconds</span>
31 |       </div>
32 |     </div>
33 | 
34 |     <script src="js/02-timer.js" type="module"></script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/v2/09/src/03-promises.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Promise generator</title>
 7 |     <link rel="stylesheet" href="css/common.css" />
 8 |   </head>
 9 |   <body>
10 |     <p><a href="index.html">Go back</a></p>
11 | 
12 |     <form class="form">
13 |       <label>
14 |         First delay (ms)
15 |         <input type="number" name="delay" required />
16 |       </label>
17 |       <label>
18 |         Delay step (ms)
19 |         <input type="number" name="step" required />
20 |       </label>
21 |       <label>
22 |         Amount
23 |         <input type="number" name="amount" required />
24 |       </label>
25 |       <button type="submit">Create promises</button>
26 |     </form>
27 | 
28 |     <script src="js/03-promises.js" type="module"></script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/v2/09/src/css/common.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 7 |     Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
 8 |   -webkit-font-smoothing: antialiased;
 9 |   -moz-osx-font-smoothing: grayscale;
10 |   background-color: #fafafa;
11 |   color: #212121;
12 |   line-height: 1.5;
13 | }
14 | 
15 | img {
16 |   display: block;
17 |   max-width: 100%;
18 | }
19 | 


--------------------------------------------------------------------------------
/v2/09/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Homework 9</title>
 7 |     <link rel="stylesheet" href="css/common.css" />
 8 |   </head>
 9 |   <body>
10 |     <ul>
11 |       <li><a href="01-color-switcher.html">Color switcher</a></li>
12 |       <li><a href="02-timer.html">Countdown timer</a></li>
13 |       <li><a href="03-promises.html">Promise generator</a></li>
14 |     </ul>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/v2/09/src/js/01-color-switcher.js:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/v2/09/src/js/02-timer.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/v2/09/src/js/02-timer.js


--------------------------------------------------------------------------------
/v2/09/src/js/03-promises.js:
--------------------------------------------------------------------------------
1 | function createPromise(position, delay) {
2 |   const shouldResolve = Math.random() > 0.3;
3 |   if (shouldResolve) {
4 |     // Fulfill
5 |   } else {
6 |     // Reject
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/v2/10/README.en.md:
--------------------------------------------------------------------------------
 1 | **Read in other languages: [Русский](README.md), [Українська](README.ua.md), [English](README.en.md), [Español](README.es.md), [Polski](README.pl.md).**
 2 | 
 3 | # Acceptance criteria
 4 | 
 5 | - `goit-js-hw-10` repository created.
 6 | - In your submitted homework, there are two links: One to your source files and one to your working page on `GitHub Pages`.
 7 | - During live page visits, there are no errors or warnings generated in the console.
 8 | - Project built with [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 9 | - Code formatted with `Prettier`.
10 | 
11 | ## Start files
12 | 
13 | In the [src folder](./src), you will find start files. Copy them to your project completely, replacing the `src` folder in [parcel-project-template](https://github.com/goitacademy/parcel-project-template). To do this, download this entire repository as an archive or use the [DownGit service](https://downgit.github.io/) to download a separate folder from the repository.
14 | 
15 | ## Task - country search
16 | 
17 | Create a front-end part of the application to search for information about countries by their partial or full names. Check out the [demo video](https://user-images.githubusercontent.com/17479434/131147741-7700e8c5-8744-4eea-8a8e-1c3d4635248a.mp4) of the app.
18 | 
19 | ### HTTP requests
20 | 
21 | Use the public API [Rest Countries](https://restcountries.com/), namely [resource name](https://restcountries.com/#api-endpoints-v3-name), which returns an array of country objects that match the search criteria. Add at least some decoration to the interface elements.
22 | 
23 | Write a function, `fetchCountries(name)`, that makes an HTTP request to [resource name](https://restcountries.com/#api-endpoints-v3-name) and returns a promise with an array of countries - the result of your request. Move it to a separate file called `fetchCountries.js` and make a named export.
24 | 
25 | ### Field filtering
26 | 
27 | The back-end returns objects with some properties most of which you do not need. To reduce the amount of data transferred, add a string of request parameters - this is how this back-end implements field filtering. Check out the [filter syntax documentation](https://restcountries.com/#filter-response).
28 | 
29 | You only need the following properties:
30 | 
31 | - `name.official` - full name of the country
32 | - `capital` - capital
33 | - `population` - population
34 | - `flags.svg` - link to flag images
35 | - `languages` - array of languages
36 | 
37 | ### Search box
38 | 
39 | The user enters the name of the country to search for in the `input#search-box` text field. HTTP requests are made by typing the country name, that is, on the `input` event. However, you cannot make a request every time a key is pressed, since many requests will be made at the same time, and they will be executed in an unpredictable order.
40 | 
41 | It is necessary to use the `Debounce` technique on the event handler and make an HTTP request `300ms` after the user has stopped typing text. Use the [lodash.debounce](https://www.npmjs.com/package/lodash.debounce) package.
42 | 
43 | If the user clears the search box completely, the HTTP request is not executed, and the country list markup or country information disappears.
44 | 
45 | Sanitize the entered line using the `trim()` method, which will solve the problem when there are only spaces in the input field or at the beginning/end of the line.
46 | 
47 | ### Interface
48 | 
49 | If the back-end returns more than 10 countries, a notification appears in the interface saying that the name should be more specific. For notifications, use the [notiflix library](https://github.com/notiflix/Notiflix#readme) and display this line: `"Too many matches found. Please enter a more specific name."`.
50 | 
51 | ![Too many matches alert](./preview/too-many-matches.png)
52 | 
53 | If the back-end returns from 2 to 10 countries, a list of found countries is displayed under the text field. Each list item consists of a flag and country name.
54 | 
55 | ![Country list UI](./preview/country-list.png)
56 | 
57 | If the request results in an array with one country, the interface displays the card markup with information about the country: flag, name, capital, population and languages.
58 | 
59 | ![Country info UI](./preview/country-info.png)
60 | 
61 | > ⚠️ It is enough for the app to work for most countries. Some countries, such as `Sudan`, can be problematic because the name of the country is part of the name of another country, `South Sudan`. Do not worry about these exceptions.
62 | 
63 | ## Error handling
64 | 
65 | If the user enters the name of a country that does not exist, the back-end will return not an empty array, but an error with the status code `404` - not found. If you do not handle this, the user will never know that the search has not returned any results. Add a notification, "Oops, there is no country with that name"`, in case of an error using the [notiflix library](https://github.com/notiflix/Notiflix#readme).
66 | 
67 | ![Error alert](./preview/error-alert.png)
68 | 
69 | > ⚠️ Remember that `fetch` does not treat 404 as an error, so you need to explicitly reject the promise in order to catch and handle the error.
70 | 


--------------------------------------------------------------------------------
/v2/10/README.es.md:
--------------------------------------------------------------------------------
  1 | **Read in other languages: [Русский](README.md), [Українська](README.ua.md),
  2 | [English](README.en.md), [Español](README.es.md), [Polski](README.pl.md).**
  3 | 
  4 | # Criterios de admisión
  5 | 
  6 | - Se ha creado el repositorio `goit-js-hw-10`.
  7 | - Al entregar las tareas, existen dos enlaces: a los archivos de origen y el trabajo 
  8 |   en la página de `GitHub Pages`.
  9 | - Al visitar la página de trabajos en vivo, no hay errores ni advertencias en la consola.
 10 | - El proyecto está construido con la ayuda de
 11 |   [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 12 | - El código es formateado por `Prettier`.
 13 | 
 14 | ## Archivos de inicio
 15 | 
 16 | En la [carpeta src](./src)  encontrará los archivos de inicio. Cópielos en su proyecto,
 17 | reemplazando completamente la carpeta `src` en
 18 | [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 19 | Para eso, descargue todo el repositorio como un archivo o use el
 20 | [servicio DownGit](https://downgit.github.io/) para descargar una carpeta individual del
 21 | repositorio.
 22 | 
 23 | ## Tarea - búsqueda de países
 24 | 
 25 | Cree la parte del frontend de una aplicación de búsqueda sobre los datos de países por su parte o el
 26 | nombre completo. Mire en
 27 | [vídeo demo](https://user-images.githubusercontent.com/17479434/131147741-7700e8c5-8744-4eea-8a8e-1c3d4635248a.mp4)
 28 | aplicaciones.
 29 | 
 30 | ### Consultas HTTP
 31 | 
 32 | Use la API pública [Rest Countries](https://restcountries.com/), es decir
 33 | [resource name](https://restcountries.com/#api-endpoints-v3-name), que devuelve
 34 | el array de los objetos de los países que cumplen los criterios de búsqueda. Añada un diseño
 35 | mínimo a los elementos de la interfaz.
 36 | 
 37 | Escriba la función `fetchCountries(name)` a cual hace una petición HTTP a
 38 | [ресурс name](https://restcountries.com/#api-endpoints-v3-name) y devuelve
 39 | promise con el array de los países, el resultado de la consulta. Colóquelo en un archivo separado
 40 | `fetchCountries.js` y haga una exportación con nombre.
 41 | 
 42 | ### Filtración de ámbitos
 43 | 
 44 | La respuesta del backend devuelve objetos, la mayoría de los cuales no
 45 |  Para poder reducir la cantidad de datos transferidos, añada una secuencia de parámetros
 46 | de consulta, así como este backend implementa el filtrado de los ámbitos. Heche un vistazo a la
 47 | [documentación de la sintaxis del filtro](https://restcountries.com/#filter-response).
 48 | 
 49 | Sólo necesita las siguientes propiedades:
 50 | 
 51 | - `name.official` - nombre completo del país
 52 | - `capital` - capital
 53 | - `population` - población
 54 | - `flags.svg` - enlace a la imagen de la bandera
 55 | - `languages` - array de idiomas
 56 | 
 57 | ### Ámbitos de búsqueda
 58 | 
 59 | El nombre del país a buscar es introducido por el usuario en la casilla de texto
 60 | `input#search-box`. Las consultas HTTP se realizan cuando se escribe el nombre del país, es decir, 
 61 | mediante el evento `input`. Pero no puede hacer una consulta cada vez que pulse la tecla
 62 | porque habrá muchas consultas a la vez y se ejecutarán en un orden 
 63 | imprevisible.
 64 | 
 65 | Debe aplicar un truco `Debounce` en el manejador de eventos y hacer
 66 | una petición HTTP `300ms después de que el usuario haya dejado de escribir.
 67 | Use el paquete
 68 | [lodash.debounce](https://www.npmjs.com/package/lodash.debounce).
 69 | 
 70 | Si el usuario borra completamente el campo de búsqueda, no se realiza ninguna petición HTTP,
 71 | y se elimina la marca del listado de países o la información del país.
 72 | 
 73 | Desinfecta la secuencia introducida usando el método `trim()`, esto resolverá el problema si el
 74 | ámbito de entrada sólo tiene espacios o si tiene espacios al principio y al final de la secuencia.
 75 | 
 76 | ### Interfaz
 77 | 
 78 | Si el backend devuelve más de 10 países en la respuesta, la interfaz mostrará la
 79 | notificación de que el nombre debe ser más específico. Para las notificaciones
 80 | use [la biblioteca notiflix](https://github.com/notiflix/Notiflix#readme) y
 81 | la emisión de una secuencia como esta.
 82 | `"Too many matches found. Please enter a more specific name."`.
 83 | 
 84 | ![Too many matches alert](./preview/too-many-matches.png)
 85 | 
 86 | Si el backend ha devuelto entre 2 y 10 países, se muestra una lista de 
 87 | los países encontrados. Cada elemento de la lista consta de una bandera y un nombre de país
 88 | 
 89 | ![Country list UI](./preview/country-list.png)
 90 | 
 91 | Si el resultado de la consulta es un array con un país, la interfaz muestra un
 92 | diseño de tarjeta con los datos del país: bandera, nombre, capital, población e 
 93 | idiomas.
 94 | 
 95 | ![Country info UI](./preview/country-info.png)
 96 | 
 97 | > ⚠️ Suficiente para que la aplicación funcione en la mayoría de los países. Algunos
 98 | > de los países, como `Sudán', puede causar problemas ya que el nombre del país
 99 | > es parte del nombre de otro país, "Sudán del Sur". No tiene que preocuparse por
100 | > estas excepciones.
101 | 
102 | ### Manejo de errores
103 | 
104 | Si el usuario introduce un nombre de país que no existe, el backend no devolverá un array vacío 
105 | sino un error con el código de estado `404`, no encontrado.  Si esto no se gestiona, el 
106 | usuario nunca sabrá que la búsqueda ha fallado. Añada un
107 | un aviso `"Oops, there is no country with that name"` en caso de que se produzca un error 
108 | al usar a [la biblioteca notiflix](https://github.com/notiflix/Notiflix#readme).
109 | 
110 | ![Error alert](./preview/error-alert.png)
111 | 
112 | > ⚠️ Tenga en cuenta que `fetch` no se considera como un error 404, por lo que debe
113 | > rechazar explícitamente la promise para que el error pueda ser capturado y manejado.
114 | 


--------------------------------------------------------------------------------
/v2/10/README.md:
--------------------------------------------------------------------------------
  1 | **Read in other languages: [Русский](README.md), [Українська](README.ua.md),
  2 | [English](README.en.md), [Español](README.es.md), [Polski](README.pl.md).**
  3 | 
  4 | # Критерии приема
  5 | 
  6 | - Создан репозиторий `goit-js-hw-10`.
  7 | - При сдаче домашней работы есть две ссылки: на исходные файлы и рабочую
  8 |   страницу на `GitHub Pages`.
  9 | - При посещении живой страницы задания, в консоли нету ошибок и предупреждений.
 10 | - Проект собран с помощью
 11 |   [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 12 | - Код отформатирован `Prettier`.
 13 | 
 14 | ## Стартовые файлы
 15 | 
 16 | [Скачай стартовые файлы](https://downgit.github.io/#/home?url=https://github.com/goitacademy/javascript-homework/tree/main/v2/10/src)
 17 | с базовой разметкой и стилями задания. Скопируй их себе в проект, полностью
 18 | заменив папку `src` в
 19 | [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 20 | 
 21 | ## Задание - поиск стран
 22 | 
 23 | Создай фронтенд часть приложения поиска данных о стране по её частичному или
 24 | полному имени. Посмотри демо видео работы приложения.
 25 | 
 26 | https://user-images.githubusercontent.com/17479434/131147741-7700e8c5-8744-4eea-8a8e-1c3d4635248a.mp4
 27 | 
 28 | <!-- Посмотри
 29 | [демо видео](https://user-images.githubusercontent.com/17479434/131147741-7700e8c5-8744-4eea-8a8e-1c3d4635248a.mp4)
 30 | работы приложения. -->
 31 | 
 32 | ### HTTP-запросы
 33 | 
 34 | Используй публичный API [Rest Countries](https://restcountries.com/), а именно
 35 | [ресурс name](https://restcountries.com/#api-endpoints-v3-name), возвращающий
 36 | массив объектов стран удовлетворивших критерий поиска. Добавь минимальное
 37 | оформление элементов интерфейса.
 38 | 
 39 | Напиши функцию `fetchCountries(name)` которая делает HTTP-запрос на
 40 | [ресурс name](https://restcountries.com/#api-endpoints-v3-name) и возвращает
 41 | промис с массивом стран - результатом запроса. Вынеси её в отдельный файл
 42 | `fetchCountries.js` и сделай именованный экспорт.
 43 | 
 44 | ### Фильтрация полей
 45 | 
 46 | В ответе от бэкенда возвращаются объекты, большая часть свойств которых тебе не
 47 | пригодится. Чтобы сократить объем передаваемых данных добавь строку параметров
 48 | запроса - так этот бэкенд реализует фильтрацию полей. Ознакомься с
 49 | [документацией синтаксиса фильтров](https://restcountries.com/#filter-response).
 50 | 
 51 | Тебе нужны только следующие свойства:
 52 | 
 53 | - `name.official` - полное имя страны
 54 | - `capital` - столица
 55 | - `population` - население
 56 | - `flags.svg` - ссылка на изображение флага
 57 | - `languages` - массив языков
 58 | 
 59 | ### Поле поиска
 60 | 
 61 | Название страны для поиска пользователь вводит в текстовое поле
 62 | `input#search-box`. HTTP-запросы выполняются при наборе имени страны, то есть по
 63 | событию `input`. Но, делать запрос при каждом нажатии клавиши нельзя, так как
 64 | одновременно получится много запросов и они будут выполняться в непредсказуемом
 65 | порядке.
 66 | 
 67 | Необходимо применить приём `Debounce` на обработчике события и делать
 68 | HTTP-запрос спустя `300мс` после того, как пользователь перестал вводить текст.
 69 | Используй пакет
 70 | [lodash.debounce](https://www.npmjs.com/package/lodash.debounce).
 71 | 
 72 | Если пользователь полностью очищает поле поиска, то HTTP-запрос не выполняется,
 73 | а разметка списка стран или информации о стране пропадает.
 74 | 
 75 | Выполни санитизацию введенной строки методом `trim()`, это решит проблему когда
 76 | в поле ввода только пробелы или они есть в начале и в конце строки.
 77 | 
 78 | ### Интерфейс
 79 | 
 80 | Если в ответе бэкенд вернул больше чем 10 стран, в интерфейсе пояляется
 81 | уведомление о том, что имя должно быть более специфичным. Для уведомлений
 82 | используй [библиотеку notiflix](https://github.com/notiflix/Notiflix#readme) и
 83 | выводи такую строку
 84 | `"Too many matches found. Please enter a more specific name."`.
 85 | 
 86 | ![Too many matches alert](https://raw.githubusercontent.com/goitacademy/javascript-homework/main/v2/10/preview/too-many-matches.png)
 87 | 
 88 | Если бэкенд вернул от 2-х до 10-х стран, под тестовым полем отображается список
 89 | найденных стран. Каждый элемент списка состоит из флага и имени страны.
 90 | 
 91 | ![Country list UI](https://raw.githubusercontent.com/goitacademy/javascript-homework/main/v2/10/preview/country-list.png)
 92 | 
 93 | Если результат запроса это массив с одной страной, в интерфейсе отображается
 94 | разметка карточки с данными о стране: флаг, название, столица, население и
 95 | языки.
 96 | 
 97 | ![Country info UI](https://raw.githubusercontent.com/goitacademy/javascript-homework/main/v2/10/preview/country-info.png)
 98 | 
 99 | > ⚠️ Достаточно чтобы приложение работало для большинства стран. Некоторые
100 | > страны, такие как `Sudan`, могут создавать проблемы, поскольку название страны
101 | > является частью названия другой страны, `South Sudan`. Не нужно беспокоиться
102 | > об этих исключениях.
103 | 
104 | ### Обработка ошибки
105 | 
106 | Если пользователь ввёл имя страны которой не существует, бэкенд вернёт не пустой
107 | массив, а ошибку со статус кодом `404` - не найдено. Если это не обработать, то
108 | пользователь никогда не узнает о том, что поиск не дал результатов. Добавь
109 | уведомление `"Oops, there is no country with that name"` в случае ошибки
110 | используя [библиотеку notiflix](https://github.com/notiflix/Notiflix#readme).
111 | 
112 | ![Error alert](https://raw.githubusercontent.com/goitacademy/javascript-homework/main/v2/10/preview/error-alert.png)
113 | 
114 | > ⚠️ Не забывай о том, что `fetch` не считает 404 ошибкой, поэтому необходимо
115 | > явно отклонить промис чтобы можно было словить и обработать ошибку.
116 | 


--------------------------------------------------------------------------------
/v2/10/README.pl.md:
--------------------------------------------------------------------------------
  1 | **Read in other languages: [Русский](README.md), [Українська](README.ua.md),
  2 | [English](README.en.md), [Español](README.es.md), [Polski](README.pl.md).**
  3 | 
  4 | # Kryteria przyjęcia
  5 | 
  6 | - Utworzono repozytorium `goit-js-hw-10`.
  7 | - Przy oddaniu pracy domowej dołączono linki: do plików źródłowych i strony
  8 |   roboczej na `GitHub Pages`.
  9 | - Wiersz poleceń nie zawiera błędów i ostrzeżeń.
 10 | - Projekt utworzono z pomocą
 11 |   [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 12 | - Sformatowano kod `Prettier`.
 13 | 
 14 | ## Pliki startowe
 15 | 
 16 | W [folderze src](./src) znajdziesz pliki startowe. Skopiuj je do swojego
 17 | projektu, całkowicie zamieniając folder `src` w
 18 | [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 19 | Aby to zrobić, pobierz całe repozytorium jako archiwum lub użyj
 20 | [serwisu DownGit](https://downgit.github.io/) aby pobrać oddzielny folder z
 21 | repozytorium.
 22 | 
 23 | ## Zadanie - wyszukiwanie krajów
 24 | 
 25 | Utwórz frontend aplikacji wyszukiwania danych o kraju według częściowej lub
 26 | pełnej nazwy.
 27 | 
 28 | https://user-images.githubusercontent.com/17479434/131147741-7700e8c5-8744-4eea-8a8e-1c3d4635248a.mp4
 29 | 
 30 | ### Żądanie HTTP
 31 | 
 32 | Użyj publicznego API [Rest Countries v2](https://restcountries.com/), a
 33 | dokładniej [nazwa źródła](https://restcountries.com/#api-endpoints-v3-name),
 34 | który przekazuje tablicę obiektów krajów odpowiadających kryteriom wyszukiwania.
 35 | Popraw wizualnie elementy interfejsu.
 36 | 
 37 | Napisz funkcję `fetchCountries(name)` która tworzy żądanie HTTP na
 38 | [nazwa źródła](https://restcountries.com/#api-endpoints-v3-name) i przekazuje
 39 | obietnicę z tablicą krajów - wynikiem żądania. Przenieś ją do oddzielnego pliku
 40 | `fetchCountries.js` i utwórz eksport nazwany.
 41 | 
 42 | ### Filtrowanie pól
 43 | 
 44 | W odpowiedzi, z backendu przekazywane są obiekty, których większość właściwości
 45 | nie przyda Ci się. Aby zredukować zakres przekazywanych danych, dodaj ciąg
 46 | parametrów żądania - w taki sposób backend realizuje filtrację pól. Zapoznaj się
 47 | z [dokumentacją składni filtrów](https://restcountries.com/#filter-response).
 48 | 
 49 | Potrzebujesz tylko następujących właściwości:
 50 | 
 51 | - `name.official` - pełna nazwa kraju
 52 | - `capital` - stolica
 53 | - `population` - liczba ludności
 54 | - `flags.svg` - link do ilustracji przedstawiającej flagę
 55 | - `languages` - tablica języków
 56 | 
 57 | ### Pole wyszukiwania
 58 | 
 59 | Nazwę kraju, którą chce wyszukać użytkownik, wprowadza się w pole tekstowe
 60 | `input#search-box`. Żądania HTTP realizuje się przy komplecie nazw krajów, czyli
 61 | po zdarzeniu `input`. Jednak nie należy spełniać żądania po każdym kliknięciu
 62 | przycisku, ponieważ otrzymamy jednocześnie wiele żądań, które zostaną spełnione
 63 | w nieprzewidywalnym porządku.
 64 | 
 65 | Koniecznym jest zastosowanie funkcji `Debounce` na event handler i wykonanie
 66 | żądania HTTP `300ms` po tym, jak użytkownik przestał wprowadzać tekst. Użyj
 67 | pakietu [lodash.debounce](https://www.npmjs.com/package/lodash.debounce).
 68 | 
 69 | Jeśli użytkownik całkowicie usuwa pole wyszukiwania, to żądanie HTTP nie zostaje
 70 | zrealizowane, a znacznik listy krajów lub informacji o kraju znika.
 71 | 
 72 | Dokonaj sanityzacji wprowadzonego ciągu metodą `trim()`, to rozwiąże problem,
 73 | gdy w polu wprowadzania są tylko spacje lub widnieją one na początku i na końcu
 74 | wiersza.
 75 | 
 76 | ### Interfejs
 77 | 
 78 | Jeśli w odpowiedzi backend przekazał więcej niż 10 krajów, w interfejsie pojawia
 79 | się powiadomienie o tym, że nazwa powinna być bardziej specyficzna. Do
 80 | powiadomień używaj
 81 | [biblioteki notiflix](https://github.com/notiflix/Notiflix#readme) i wprowadź
 82 | taki wiersz `"Too many matches found. Please enter a more specific name."`.
 83 | 
 84 | ![Too many matches alert](./preview/too-many-matches.png)
 85 | 
 86 | Jeśli backend przekazał od 2-óch do 10-ciu krajów, pod polem tekstowym pojawia
 87 | się lista znalezionych krajów. Każdy element listy składa się z flagi i nazwy
 88 | kraju.
 89 | 
 90 | ![Country list UI](./preview/country-list.png)
 91 | 
 92 | Jeśli wynik żądania to tablica z jednym krajem, w interfejsie pojawia się
 93 | znacznik karty z danymi o kraju: flaga, nazwa, stolica, liczba ludności i
 94 | języki.
 95 | 
 96 | ![Country info UI](./preview/country-info.png)
 97 | 
 98 | > ⚠️ Wystarczy, jeśli aplikacja będzie działała dla większości krajów. Niektóre
 99 | > kraje, takie jak `Sudan`, mogą powodować problemy, ponieważ nazwa kraju jest
100 | > częścią nazwy innego kraju, `South Sudan`. Nie należy się skupiać na tych
101 | > wyjątkach.
102 | 
103 | ### Przetwarzanie błędu
104 | 
105 | Jeśli użytkownik wprowadził nazwę kraju, który nie istnieje, backend przekaże
106 | nie pustą tablicę, a błąd z kodem stanu `404` - nie znaleziono. Jeśli tego nie
107 | opracujesz, to użytkownik nigdy nie dowie się o tym, że żądanie nie przyniosło
108 | wyników. Dodaj powiadomienie `"Oops, there is no country with that name"` w
109 | razie błędu, używając
110 | [biblioteki notiflix](https://github.com/notiflix/Notiflix#readme).
111 | 
112 | ![Error alert](./preview/error-alert.png)
113 | 
114 | > ⚠️ Nie zapominaj o tym, że `fetch` nie postrzega 404 jako błędu, dlatego
115 | > konieczne jest widoczne odrzucenie obietnicy, aby można było wyłapać i
116 | > przetworzyć błąd.
117 | 


--------------------------------------------------------------------------------
/v2/10/README.ua.md:
--------------------------------------------------------------------------------
  1 | **Read in other languages: [Русский](README.md), [Українська](README.ua.md),
  2 | [English](README.en.md), [Español](README.es.md), [Polski](README.pl.md).**
  3 | 
  4 | # Критерії приймання
  5 | 
  6 | - Створено репозиторій `goit-js-hw-10`.
  7 | - Домашня робота містить два посилання: на вихідні файли і робочу сторінку на
  8 |   `GitHub Pages`.
  9 | - В консолі відсутні помилки і попередження під час відкриття живої сторінки
 10 |   завдання.
 11 | - Проект зібраний за допомогою
 12 |   [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 13 | - Код відформатований за допомогою `Prettier`.
 14 | 
 15 | ## Стартові файли
 16 | 
 17 | У [папці src](./src) знайдеш стартові файли. Скопіюй їх собі у проект, повністю
 18 | замінивши папку `src` в
 19 | [parcel-project-template](https://github.com/goitacademy/parcel-project-template).
 20 | Для цього завантаж увесь цей репозиторій як архів або використовуй
 21 | [сервіс DownGit](https://downgit.github.io/) для завантаження окремої папки з
 22 | репозиторія.
 23 | 
 24 | ## Завдання - пошук країн
 25 | 
 26 | Створи фронтенд частину програми пошуку даних про країну за її частковою або
 27 | повною назвою. Подивися
 28 | [демо-відео](https://user-images.githubusercontent.com/17479434/131147741-7700e8c5-8744-4eea-8a8e-1c3d4635248a.mp4)
 29 | роботи програми.
 30 | 
 31 | ### HTTP-запит
 32 | 
 33 | Використовуй публічний API [Rest Countries v2](https://restcountries.com/), а
 34 | саме [ресурс name](https://restcountries.com/#api-endpoints-v3-name), який
 35 | повертає масив об'єктів країн, що задовольнили критерій пошуку. Додай мінімальне
 36 | оформлення елементів інтерфейсу.
 37 | 
 38 | Напиши функцію `fetchCountries(name)`, яка робить HTTP-запит на
 39 | [ресурс name](https://restcountries.com/#api-endpoints-v3-name) і повертає
 40 | проміс з масивом країн - результатом запиту. Винеси її в окремий файл
 41 | `fetchCountries.js` і зроби іменований експорт.
 42 | 
 43 | ### Фільтрація полів
 44 | 
 45 | У відповіді від бекенду повертаються об'єкти, велика частина властивостей яких,
 46 | тобі не знадобиться. Щоб скоротити обсяг переданих даних, додай рядок параметрів
 47 | запиту - таким чином цей бекенд реалізує фільтрацію полів. Ознайомся з
 48 | [документацією синтаксису фільтрів](https://restcountries.com/#filter-response).
 49 | 
 50 | Тобі потрібні тільки наступні властивості:
 51 | 
 52 | - `name.official` - повна назва країни
 53 | - `capital` - столиця
 54 | - `population` - населення
 55 | - `flags.svg` - посилання на зображення прапора
 56 | - `languages` - масив мов
 57 | 
 58 | ### Поле пошуку
 59 | 
 60 | Назву країни для пошуку користувач вводить у текстове поле `input#search-box`.
 61 | HTTP-запити виконуються при введенні назви країни, тобто на події `input`. Але
 62 | робити запит з кожним натисканням клавіші не можна, оскільки одночасно буде
 63 | багато запитів і вони будуть виконуватися в непередбачуваному порядку.
 64 | 
 65 | Необхідно застосувати прийом `Debounce` на обробнику події і робити HTTP-запит
 66 | через `300мс` після того, як користувач перестав вводити текст. Використовуй
 67 | пакет [lodash.debounce](https://www.npmjs.com/package/lodash.debounce).
 68 | 
 69 | Якщо користувач повністю очищає поле пошуку, то HTTP-запит не виконується, а
 70 | розмітка списку країн або інформації про країну зникає.
 71 | 
 72 | Виконай санітизацію введеного рядка методом `trim()`, це вирішить проблему, коли
 73 | в полі введення тільки пробіли, або вони є на початку і в кінці рядка.
 74 | 
 75 | ### Інтерфейс
 76 | 
 77 | Якщо у відповіді бекенд повернув більше ніж 10 країн, в інтерфейсі з'являється
 78 | повідомлення про те, що назва повинна бути специфічнішою. Для повідомлень
 79 | використовуй [бібліотеку notiflix](https://github.com/notiflix/Notiflix#readme)
 80 | і виводь такий рядок
 81 | `"Too many matches found. Please enter a more specific name."`.
 82 | 
 83 | ![Too many matches alert](./preview/too-many-matches.png)
 84 | 
 85 | Якщо бекенд повернув від 2-х до 10-и країн, під тестовим полем відображається
 86 | список знайдених країн. Кожен елемент списку складається з прапора та назви
 87 | країни.
 88 | 
 89 | ![Country list UI](./preview/country-list.png)
 90 | 
 91 | Якщо результат запиту - це масив з однією країною, в інтерфейсі відображається
 92 | розмітка картки з даними про країну: прапор, назва, столиця, населення і мови.
 93 | 
 94 | ![Country info UI](./preview/country-info.png)
 95 | 
 96 | > ⚠️ Достатньо, щоб застосунок працював для більшості країн. Деякі країни, як-от
 97 | > `Sudan`, можуть створювати проблеми, оскільки назва країни є частиною назви
 98 | > іншої країни - `South Sudan`. Не потрібно турбуватися про ці винятки.
 99 | 
100 | ### Обробка помилки
101 | 
102 | Якщо користувач ввів назву країни, якої не існує, бекенд поверне не порожній
103 | масив, а помилку зі статус кодом `404` - не знайдено. Якщо це не обробити, то
104 | користувач ніколи не дізнається про те, що пошук не дав результатів. Додай
105 | повідомлення `"Oops, there is no country with that name"` у разі помилки,
106 | використовуючи
107 | [бібліотеку notiflix](https://github.com/notiflix/Notiflix#readme).
108 | 
109 | ![Error alert](./preview/error-alert.png)
110 | 
111 | > ⚠️ Не забувай про те, що `fetch` не вважає 404 помилкою, тому необхідно явно
112 | > відхилити проміс, щоб можна було зловити і обробити помилку.
113 | 


--------------------------------------------------------------------------------
/v2/10/preview/country-info.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/v2/10/preview/country-info.png


--------------------------------------------------------------------------------
/v2/10/preview/country-list.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/v2/10/preview/country-list.png


--------------------------------------------------------------------------------
/v2/10/preview/error-alert.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/v2/10/preview/error-alert.png


--------------------------------------------------------------------------------
/v2/10/preview/too-many-matches.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/v2/10/preview/too-many-matches.png


--------------------------------------------------------------------------------
/v2/10/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Homework 10</title>
 7 |   </head>
 8 |   <body>
 9 |     <select class="breed-select"></select>
10 |     <p class="loader">Loading data, please wait...</p>
11 |     <p class="error">Oops! Something went wrong! Try reloading the page!</p>
12 |     <div class="cat-info"></div>
13 | 
14 |     <script src="index.js" type="module"></script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/v2/10/src/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/v2/10/src/index.js


--------------------------------------------------------------------------------
/v3/07/src/css/common.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 16px;
 7 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 8 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 9 |   -webkit-font-smoothing: antialiased;
10 |   -moz-osx-font-smoothing: grayscale;
11 |   background-color: #fafafa;
12 |   color: #212121;
13 |   line-height: 1.5;
14 | }
15 | 


--------------------------------------------------------------------------------
/v3/07/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Homework 7</title>
 8 |     <link rel="stylesheet" href="./css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <ul>
12 |       <li><a href="./task-1.html">Task 1</a></li>
13 |       <li><a href="./task-2.html">Task 2</a></li>
14 |       <li><a href="./task-3.html">Task 3</a></li>
15 |       <li><a href="./task-4.html">Task 4</a></li>
16 |       <li><a href="./task-5.html">Task 5</a></li>
17 |     </ul>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/v3/07/src/js/task-1.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/v3/07/src/js/task-1.js


--------------------------------------------------------------------------------
/v3/07/src/js/task-2.js:
--------------------------------------------------------------------------------
 1 | const images = [
 2 |   {
 3 |     url: "https://images.pexels.com/photos/140134/pexels-photo-140134.jpeg?dpr=2&h=750&w=1260",
 4 |     alt: "White and Black Long Fur Cat",
 5 |   },
 6 |   {
 7 |     url: "https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?dpr=2&h=750&w=1260",
 8 |     alt: "Orange and White Koi Fish Near Yellow Koi Fish",
 9 |   },
10 |   {
11 |     url: "https://images.pexels.com/photos/219943/pexels-photo-219943.jpeg?dpr=2&h=750&w=1260",
12 |     alt: "Group of Horses Running",
13 |   },
14 |   {
15 |     url: "https://cdn.pixabay.com/photo/2019/05/17/09/27/the-alps-4209272_1280.jpg",
16 |     alt: "Alpine Spring Meadows",
17 |   },
18 |   {
19 |     url: "https://cdn.pixabay.com/photo/2019/05/16/21/10/landscape-4208255_1280.jpg",
20 |     alt: "Nature Landscape",
21 |   },
22 |   {
23 |     url: "https://cdn.pixabay.com/photo/2019/05/17/04/35/lighthouse-4208843_1280.jpg",
24 |     alt: "Lighthouse Coast Sea",
25 |   }
26 | ];
27 | 


--------------------------------------------------------------------------------
/v3/07/src/js/task-3.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/javascript-homework/affd8b9baee913f429f03adddbb4f6d9a5c10a5b/v3/07/src/js/task-3.js


--------------------------------------------------------------------------------
/v3/07/src/js/task-4.js:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/v3/07/src/js/task-5.js:
--------------------------------------------------------------------------------
1 | function getRandomHexColor() {
2 |   return `#${Math.floor(Math.random() * 16777215)
3 |     .toString(16)
4 |     .padStart(6, 0)}`;
5 | }
6 | 


--------------------------------------------------------------------------------
/v3/07/src/task-1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 1</title>
 8 |     <link rel="stylesheet" href="./css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="./index.html">Go back</a></p>
12 | 
13 |     <ul id="categories">
14 |       <li class="item">
15 |         <h2>Animals</h2>
16 | 
17 |         <ul>
18 |           <li>Cat</li>
19 |           <li>Hamster</li>
20 |           <li>Horse</li>
21 |           <li>Parrot</li>
22 |         </ul>
23 |       </li>
24 |       <li class="item">
25 |         <h2>Products</h2>
26 | 
27 |         <ul>
28 |           <li>Bread</li>
29 |           <li>Prasley</li>
30 |           <li>Cheese</li>
31 |         </ul>
32 |       </li>
33 |       <li class="item">
34 |         <h2>Technologies</h2>
35 | 
36 |         <ul>
37 |           <li>HTML</li>
38 |           <li>CSS</li>
39 |           <li>JavaScript</li>
40 |           <li>React</li>
41 |           <li>Node.js</li>
42 |         </ul>
43 |       </li>
44 |     </ul>
45 | 
46 |     <script src="./js/task-1.js" type="module"></script>
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/v3/07/src/task-2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 2</title>
 8 |     <link rel="stylesheet" href="./css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="./index.html">Go back</a></p>
12 | 
13 |     <ul class="gallery"></ul>
14 | 
15 |     <script src="./js/task-2.js" type="module"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/v3/07/src/task-3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 3</title>
 8 |     <link rel="stylesheet" href="./css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="./index.html">Go back</a></p>
12 | 
13 |     <input type="text" id="name-input" placeholder="Please enter your name" />
14 |     <h1>Hello, <span id="name-output">Anonymous</span>!</h1>
15 | 
16 |     <script src="./js/task-3.js" type="module"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/v3/07/src/task-4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 4</title>
 8 |     <link rel="stylesheet" href="./css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="./index.html">Go back</a></p>
12 | 
13 |     <form class="login-form">
14 |       <label>
15 |         Email
16 |         <input type="email" name="email" />
17 |       </label>
18 |       <label>
19 |         Password
20 |         <input type="password" name="password" />
21 |       </label>
22 |       <button type="submit">Login</button>
23 |     </form>
24 | 
25 |     <script src="./js/task-4.js" type="module"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/v3/07/src/task-5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task 5</title>
 8 |     <link rel="stylesheet" href="./css/common.css" />
 9 |   </head>
10 |   <body>
11 |     <p><a href="./index.html">Go back</a></p>
12 | 
13 |     <div class="widget">
14 |       <p>Background color: <span class="color">-</span></p>
15 |       <button type="button" class="change-color">Change color</button>
16 |     </div>
17 | 
18 |     <script src="./js/task-5.js" type="module"></script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------