Критерии приема
Создан репозиторий goit-js-hw-06. При сдаче домашней работы есть две ссылки: на исходные файлы и рабочую страницу на GitHub Pages. Задания выполнены строго по ТЗ (нельзя изменять исходный HTML задания). При посещении живой страницы задания, в консоли нету ошибок и предупреждений. Имена переменных и функций понятные, описательные. Код отформатирован Prettier. Стартовые файлы
Скачай стартовые файлы с готовой разметкой и подключенными файлами скриптов для каждого задания. Скопируй их себе в проект.
Задание 1
В HTML есть список категорий ul#categories.
-
- Cat
- Hamster
- Horse
- Parrot
-
- Bread
- Prasley
- Cheese
-
- 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.
const ingredients = [ "Potatoes", "Mushrooms", "Garlic", "Tomatos", "Herbs", "Condiments", ]; Скопировать Напиши скрипт, который для каждого элемента массива ingredients:
Создаст отдельный элемент
Напиши скрипт для создания галереи изображений по массиву данных. В HTML есть список ul.gallery.
Все элементы галереи должны добавляться в 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
Счетчик состоит из спана и кнопок, которые, при клике, должны увеличивать и уменьшать его значение на единицу.
Напиши скрипт который, при наборе текста в инпуте 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 colorfunction getRandomHexColor() {
return #${Math.floor(Math.random() * 16777215) .toString(16) .padStart(6, 0)}
;
}
Скопировать
Задание 10 (выполнять не обязательно)
Напиши скрипт создания и очистки коллекции элементов. Пользователь вводит количество элементов в input и нажимает кнопку Создать, после чего рендерится коллекция. При нажатии на кнопку Очистить, коллекция элементов очищается.
Размеры самого первого
#${Math.floor(Math.random() * 16777215) .toString(16) .padStart(6, 0)}
;
}
Скопировать
Создай функцию destroyBoxes(), которая очищает содержимое div#boxes, тем самым удаляя все созданные элементы.