/goit-js-hw-06

Home work #6 DOM. Events

Primary LanguageHTML

Критерии приема Создан репозиторий 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)}; }