макет для стилізації https://www.figma.com/file/s22z1miFi3bvcfZi3TQ8Hw/%D0%94%D0%97-JavaScript-(Copy)?type=design&node-id=3-935&mode=design&t=ElGZ3b2RX0hFctbL-0
Домашнє завдання №7
Створи репозиторій goit-js-hw-07 Прочитай кожне завдання та виконай його в редакторі коду Завдання виконані в точній відповідності до ТЗ (забороняється змінювати вихідний HTML завдання). У консолі відсутні помилки й попередження під час відкриття живої сторінки завдання. Переконайся, що код відформатований за допомогою Prettier, а в консолі відсутні помилки й попередження під час відкриття живої сторінки завдання. Здай домашнє завдання на перевірку
Формат здачі: Домашня робота містить два посилання: на вихідні файли та робочу сторінку на GitHub Pages.
Завантажуй стартові файли з готовою розміткою та підключеними файлами скриптів для кожного завдання. Скопіюй їх собі у проєкт. Зверни увагу, що стартові файли знаходяться в папці src. Але для створення живої сторінки на github дуже важливо, щоб файл index.html був в корені проєкту, тобто без додаткових вкладеностей. Тому ти маєш перенести собі в проєкт лише вміст папки src, а сама папка src тобі не потрібна.
Для стилізації розмітки твоїх завдань використовуй цей макет.
Завдання 1
HTML містить список категорій ul#categories.
-
- Cat
- Hamster
- Horse
- Parrot
-
- Bread
- Parsley
- Cheese
-
- HTML
- CSS
- JavaScript
- React
- Node.js
З використанням властивостей і методів DOM-елементів, напиши скрипт, який:
Порахує й виведе в консоль кількість категорій в ul#categories, тобто елементів li.item. Для кожного елемента li.item у списку ul#categories знайде й виведе в консоль текст заголовка елемента (тегу
) і кількість елементів у категорії (усіх
На що буде звертати увагу ментор при перевірці:
Кількість категорій, їх назва та кількість елементів отримані за допомогою властивостей і методів DOM-елементів Дані за кожною категорією були отримані й виведені в консоль у тілі циклу або методу forEach() У консолі має бути виведено наступне повідомлення:
Завдання 2
Напиши скрипт для створення галереї зображень на основі масиву даних. HTML містить список ul.gallery.
Використовуй масив об'єктів images для створення елементів , вкладених в
Ти можеш створити й додати HTML-елементи, використовуючи document.createElement() і elem.append() або шаблонні рядки і elem.insertAdjacentHTML().
Усі елементи галереї повинні додаватися в DOM за одну операцію додавання. Додай мінімальне оформлення галереї флексбоксами через CSS класи.
const images = [ { url: "https://images.pexels.com/photos/140134/pexels-photo-140134.jpeg?dpr=2&h=750&w=1260", alt: "White and Black Long Fur Cat", }, { url: "https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?dpr=2&h=750&w=1260", alt: "Orange and White Koi Fish Near Yellow Koi Fish", }, { url: "https://images.pexels.com/photos/219943/pexels-photo-219943.jpeg?dpr=2&h=750&w=1260", alt: "Group of Horses Running", }, { url: "https://cdn.pixabay.com/photo/2019/05/17/09/27/the-alps-4209272_1280.jpg", alt: "Alpine Spring Meadows", }, { url: "https://cdn.pixabay.com/photo/2019/05/16/21/10/landscape-4208255_1280.jpg", alt: "Nature Landscape", }, { url: "https://cdn.pixabay.com/photo/2019/05/17/04/35/lighthouse-4208843_1280.jpg", alt: "Lighthouse Coast Sea", }, ];
На що буде звертати увагу ментор при перевірці:
Створена й додана в DOM галерея із трьох зображень Галерея додана у список ul.gallery і являє собою 3 елементи
Завдання 3
Напиши скрипт, який під час набору тексту в інпуті input#name-input (подія input) підставляє його поточне значення в span#name-output як ім’я для привітання. Обов’язково очищай значення в інпуті по краях від пробілів . Якщо інпут порожній або містить лише пробіли, то замість імені у спан має підставлятися рядок "Anonymous".
Hello, Anonymous!
На що буде звертати увагу ментор при перевірці:
На елементі input#name-input прослуховується подія input Під час набору тексту в інпуті його поточне значення підставляється в span#name-output як ім’я для привітання Значення в інпуті очищене від пробілів по краях Якщо інпут порожній або містить лише пробіли, то замість імені у спан має підставлятися рядок "Anonymous"
Завдання 4
Напиши скрипт управління формою логіна.
Email Password Log inвідправлення форми form.login-form повинна відбуватися за подією submit. Під час відправлення форми сторінка не повинна перезавантажуватися. Якщо при сабміті у формі є незаповнені поля, виводь alert з попередженням про те, що 'All form fields must be filled in'. Не додавай на інпути атрибут required, валідація має відбуватися саме через JS. Якщо користувач заповнив усі поля і відправив форму, збери значення полів в об'єкт з двома властивостями, де ключ — це ім'я інпутів, а значення — відповідні значення цих інпутів, очищені від пробілів по краях. Для доступу до елементів форми використовуй властивість elements. При сабміті форми виведи об'єкт із введеними даними в консоль і очисти значення полів форми методом reset.
На що буде звертати увагу ментор при перевірці:
Прослуховується подія submit Під час відправлення форми сторінка не перезавантажується Якщо при сабміті у формі є незаповнені поля, виводиться alert При сабміті в консоль виводиться об’єкт з двома властивостями, де ключі — це ім’я інпутів, а значення — відповідні значення цих інпутів, очищені від пробілів по краях Після сабміту елементи форми очищаються
Завдання 5
Напиши скрипт, який змінює колір фону елемента через інлайн-стиль по кліку на button.change-color і задає це значення кольору текстовим вмістом для span.color.
Background color: -
Change colorДля генерування випадкового кольору використовуй функцію getRandomHexColor().
function getRandomHexColor() {
return #${Math.floor(Math.random() * 16777215) .toString(16) .padStart(6, 0)};
}
Зверни увагу, що функція getRandomHexColor() повертає колір у hex-форматі, в той час як колір фону на буде у форматі rgb. Це нормально й не потребує якихось правок.
На що буде звертати увагу ментор при перевірці:
Фон на задається тільки після кліку на button.change-color При кожному кліку на елемент button.change-color фон зафарбовується новим рандомним кольором На і span.color значення одного й того самого кольору
Завдання 6
Напиши скрипт створення й очищення колекції елементів з наступним функціоналом.
Є input, у який користувач вводить бажану кількість елементів. Після натискання на кнопку Create має рендеритися (додаватися в DOM) колекція з відповідною кількістю елементів і очищатися значення в інпуті. При повторному натисканні на кнопку Create поверх старої колекції має рендеритись нова. Після натискання на кнопку Destroy колекція елементів має очищатися.
Після натискання користувачем на кнопку Create треба провалідувати значення в input, воно має бути в межах від 1 до 100 включно. Тільки якщо воно задоволяє умову, мають додаватися нові
Для рендеру елементів на сторінці створи функцію createBoxes(amount), яка приймає один параметр — число, що зберігає кількість елементів для рендеру.
Функція має створювати стільки
Розміри першого
function getRandomHexColor() {
return #${Math.floor(Math.random() * 16777215) .toString(16) .padStart(6, 0)};
}
Для очищення колекції після натискання на кнопку Destroy створи функцію destroyBoxes(), яка очищає вміст div#boxes, у такий спосіб видаляючи всі створені елементи.
На що буде звертати увагу ментор при перевірці:
Після кліку на кнопку Create, якщо в input значення поза межами діапазону 1-100, нічого не відбувається Після кліку на кнопку Create в div#boxes за одну операцію додається така кількість різнокольорових квадратів, яка вказана в input. Значення input очищається Після повторного кліку на кнопку Create попередні квадрати повністю прибираються і замість них додаються нові у кількості, що вказана в input. Значення input очищається Усі квадрати в div#boxes різнокольорові і мають фон випадкового кольору Перший квадрат у div#boxes має розміри 30px на 30px, а кожен наступний на 10px вищий і ширший від попереднього Після натискання на кнопку Destroy усі квадрати з div#boxes мають видалятися