goit-js-hw-06

Критерии приема

Создан репозиторий goit-js-hw-06. При сдаче домашней работы есть две ссылки: на исходные файлы и рабочую страницу на GitHub Pages. Задания выполнены строго по ТЗ (нельзя изменять исходный HTML задания). При посещении живой страницы задания, в консоли нету ошибок и предупреждений. Имена переменных и функций понятные, описательные. Код отформатирован Prettier. Стартовые файлы​

Скачай стартовые файлы с готовой разметкой и подключенными файлами скриптов для каждого задания. Скопируй их себе в проект.

Задание 1​

В HTML есть список категорий ul#categories.

• Animals

  • Cat
  • Hamster
  • Horse
  • Parrot

• Products

  • Bread
  • Prasley
  • Cheese

• Technologies

  • HTML
  • CSS
  • JavaScript
  • React
  • Node.js

Скопировать Напиши скрипт который:

Посчитает и выведет в консоль количество категорий в ul#categories, то есть элементов li.item. Для каждого элемента li.item в списке ul#categories, найдет и выведет в консоль текст заголовка элемента (тега

) и количество элементов в категории (всех вложенных в него

). В результате, в консоли будут выведены такие сообщения.

Number of categories: 3

Category: Animals Elements: 4

Category: Products Elements: 3

Category: Technologies Elements: 5 Скопировать Задание 2​

В HTML есть пустой список ul#ingredients.

Скопировать В JavaScript есть массив строк.

const ingredients = [ "Potatoes", "Mushrooms", "Garlic", "Tomatos", "Herbs", "Condiments", ]; Скопировать Напиши скрипт, который для каждого элемента массива ingredients:

Создаст отдельный элемент

. Обзательно используй метод document.createElement(). Добавит название ингредиента как его текстовое содержимое. Добавит элементу класс item. После чего вставит все

за одну операцию в список ul#ingredients. Задание 3​

Напиши скрипт для создания галереи изображений по массиву данных. В HTML есть список ul.gallery.

Скопировать Используй массив объектов images для создания элементов вложенных в

. Для создания разметки используй шаблонные строки и метод 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", }, ]; Скопировать Задание 4​

Счетчик состоит из спана и кнопок, которые, при клике, должны увеличивать и уменьшать его значение на единицу.

-1 0 +1

Скопировать Создай переменную counterValue в которой будет храниться текущее значение счетчика и инициализируй её значением 0. Добавь слушатели кликов на кнопки, внутри которых увеличивай или уменьшай значение счтетчика. Обновляй интерфейс новым значением переменной counterValue. Задание 5​

Напиши скрипт который, при наборе текста в инпуте input#name-input (событие input), подставляет его текущее значение в span#name-output. Если инпут пустой, в спане должна отображаться строка "Anonymous".

Hello, Anonymous!

Скопировать Задание 6​

Напиши скрипт, который при потере фокуса на инпуте (событие blur), проверяет его содержимое на правильное количество введённых символов.

Скопировать Сколько символов должно быть в инпуте, указывается в его атрибуте data-length. Если введено подходящее количество символов, то border инпута становится зелёным, если неправильное - красным. Для добавления стилей, используй CSS-классы valid и invalid, которые мы уже добавили в исходные файлы задания.

#validation-input { border: 3px solid #bdbdbd; }

#validation-input.valid { border-color: #4caf50; }

#validation-input.invalid { border-color: #f44336; } Скопировать Задание 7​

Напиши скрипт, который реагирует на изменение значения input#font-size-control (событие input) и изменяет инлайн-стиль span#text обновляя свойство font-size. В результате при перетаскивании ползунка будет меняться размер текста.

Abracadabra! Скопировать Задание 8​

Напиши скрипт управления формой логина.

Email Password Login Скопировать Обработка отправки формы form.login-form должна быть по событию submit. При отправке формы страница не должна перезагружаться. Если в форме есть незаполненные поля, выводи alert с предупреждением о том, что все поля должны быть заполнены. Если пользователь заполнил все поля и отправил форму, собери значения полей в обьект, где имя поля будет именем свойства, а значение поля - значением свойства. Для доступа к элементам формы используй свойство elements. Выведи обьект с введенными данными в консоль и очисти значения полей формы методом reset. Задание 9​

Напиши скрипт, который изменяет цвета фона элемента через инлайн стиль при клике на button.change-color и выводит значение цвета в span.color.

Background color: -

Change color

Скопировать Для генерации случайного цвета используй функцию getRandomHexColor.

function getRandomHexColor() { return #${Math.floor(Math.random() * 16777215) .toString(16) .padStart(6, 0)}; } Скопировать Задание 10 (выполнять не обязательно)​

Напиши скрипт создания и очистки коллекции элементов. Пользователь вводит количество элементов в input и нажимает кнопку Создать, после чего рендерится коллекция. При нажатии на кнопку Очистить, коллекция элементов очищается.

Create Destroy

Скопировать Создай функцию createBoxes(amount), которая принимает один параметр - число. Функция создает столько

, сколько указано в amount и добавляет их в div#boxes.

Размеры самого первого

- 30px на 30px. Каждый элемент после первого, должен быть шире и выше предыдущего на 10px. Все элементы должены иметь случайный цвет фона в формате HEX. Используй готовую функцию getRandomHexColor для получения цвета. function getRandomHexColor() { return #${Math.floor(Math.random() * 16777215) .toString(16) .padStart(6, 0)}; } Скопировать Создай функцию destroyBoxes(), которая очищает содержимое div#boxes, тем самым удаляя все созданные элементы.