https://github.com/yuriipohorilets/goit-js-hw-06

📚 JS-HW-06 | DOM
https://github.com/yuriipohorilets/goit-js-hw-06

dom goit javascript

Last synced: about 2 months ago
JSON representation

📚 JS-HW-06 | DOM

• Host: GitHub
• URL: https://github.com/yuriipohorilets/goit-js-hw-06
• Owner: YuriiPohorilets
• Created: 2022-08-07T07:19:28.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-06T10:55:57.000Z (over 2 years ago)
• Last Synced: 2023-03-07T13:40:48.426Z (almost 2 years ago)
• Topics: dom, goit, javascript
• Language: HTML
• Homepage: https://yuriipohorilets.github.io/goit-js-hw-06/
• Size: 33.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# DOM и события | goit-js-hw-06

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

- Создан репозиторий `goit-js-hw-06`.

- При сдаче домашней работы есть две ссылки: на исходные файлы и рабочую страницу на

  `GitHub Pages`.

- Задания выполнены строго по ТЗ (нельзя изменять исходный HTML задания).

- При посещении живой страницы задания, в консоли нету ошибок и предупреждений.

- Имена переменных и функций понятные, описательные.

- Код отформатирован `Prettier`.

## Стартовые файлы

[Скачай стартовые файлы](https://downgit.github.io/#/home?url=https:%2F%2Fgithub.com%2Fgoitacademy%2Fjavascript-homework%2Ftree%2Fmain%2Fv2%2F06%2Fsrc)

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

себе в проект.

### Задание 1

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

```



  


    
Animals

    


      
Cat

      
Hamster

      
Horse

      
Parrot

    

  

  


    
Products

    


      
Bread

      
Prasley

      
Cheese

    

  

  


    
Technologies

    


      
HTML

      
CSS

      
JavaScript

      
React

      
Node.js

    

  



```


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

1. Посчитает и выведет в консоль количество категорий в `ul#categories`, то есть

   элементов `li.item`.

2. Для каждого элемента `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`:

1. Создаст отдельный элемент `
`. Обзательно используй метод

   `document.createElement()`.

2. Добавит название ингредиента как его текстовое содержимое.

3. Добавит элементу класс `item`.

4. После чего вставит все `
` за одну операцию в список `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

```

1. Обработка отправки формы `form.login-form` должна быть по событию `submit`.

2. При отправке формы страница не должна перезагружаться.

3. Если в форме есть незаполненные поля, выводи `alert` с предупреждением о том, что

   все поля должны быть заполнены.

4. Если пользователь заполнил все поля и отправил форму, собери значения полей в

   обьект, где имя поля будет именем свойства, а значение поля - значением свойства.

   Для доступа к элементам формы используй свойство `elements`.

5. Выведи обьект с введенными данными в консоль и очисти значения полей формы методом

   `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`.


1. Размеры самого первого `
` - 30px на 30px.

2. Каждый элемент после первого, должен быть шире и выше предыдущего на 10px.

3. Все элементы должены иметь случайный цвет фона в формате HEX. Используй готовую

   функцию `getRandomHexColor` для получения цвета.


```

function getRandomHexColor() {

return `#${Math.floor(Math.random() * 16777215) .toString(16) .padStart(6, 0)}`;

}

```

Создай функцию `destroyBoxes()`, которая очищает содержимое `div#boxes`, тем самым

удаляя все созданные элементы.