https://github.com/oleksandr-romashko/goit-js-hw-14

Homework for DOM topic
https://github.com/oleksandr-romashko/goit-js-hw-14

css dom html javascript

Last synced: 15 days ago
JSON representation

Homework for DOM topic

• Host: GitHub
• URL: https://github.com/oleksandr-romashko/goit-js-hw-14
• Owner: oleksandr-romashko
• Created: 2024-01-21T20:00:07.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-23T13:08:20.000Z (about 1 year ago)
• Last Synced: 2024-11-21T10:29:59.157Z (3 months ago)
• Topics: css, dom, html, javascript
• Language: HTML
• Homepage: https://oleksandr-romashko.github.io/goit-js-hw-14/
• Size: 14.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# goit-js-hw-14

Homework for DOM topic.

## Стартові файли

[Завантажуй стартові файли](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/goitacademy/javascript-homework/tree/main/v2/06/src) з готовою розміткою та підключеними файлами скриптів для кожного завдання. Скопіюй їх собі у проект.

## Завдання 1

Файл `task-01.js`.

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

```html



  


    
Animals

    


      
Cat

      
Hamster

      
Horse

      
Parrot

    

  

  


    
Products

    


      
Bread

      
Prasley

      
Cheese

    

  

  


    
Technologies

    


      
HTML

      
CSS

      
JavaScript

      
React

      
Node.js

    

  



```


Напиши скрипт, який:

1. Порахує і виведе в консоль кількість категорій в `ul#categories`, тобто елементів `li.item`.

1. Для кожного элемента `li.item` у списку `ul#categories`, знайде і виведе в консоль текст заголовку елемента (тегу `
`) і кількість елементів в категорії (усіх `
`, вкладених в нього).

Для виконання цього завдання потрібно використати метод `forEach()` і властивості навігації по DOM.


В результаті, в консолі будуть виведені наступні повідомлення.

```

Number of categories: 3

Category: Animals

Elements: 4

Category: Products

Elements: 3

Category: Technologies

Elements: 5

```

## Завдання 2

Файл `task-02.js`.

HTML містить порожній список `ul#ingredients`.

```html



```


JavaScript містить масив рядків.

```JavaScript

const ingredients = [

  "Potatoes",

  "Mushrooms",

  "Garlic",

  "Tomatos",

  "Herbs",

  "Condiments",

];

```

Напиши скрипт, який для кожного елемента масиву `ingredients`:

Створить окремий елемент `
`. Обов'язково використовуй метод `document.createElement()`.

Додасть назву інгредієнта як його текстовий вміст.

Додасть елементу клас `item`.

Після чого, вставить усі `
` за одну операцію у список `ul#ingredients`.


## Завдання 3

Файл `task-03.js`.

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

```html



```


Використовуй масив об'єктів `images` для створення елементів ``, вкладених в `
`. Для створення розмітки використовуй шаблонні рядки і метод `insertAdjacentHTML()`.


* Усі елементи галереї повинні додаватися в DOM за одну операцію додавання.

* Додай мінімальне оформлення галереї флексбоксами або грідами через CSS класи.

```JavaScript

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

Файл `task-04.js`.

Лічильник складається зі спану і кнопок, які по кліку повинні збільшувати і зменшувати його значення на одиницю.

```html



  -1

  0

  +1



```


* Створи змінну counterValue, в якій буде зберігатися поточне значення лічильника та ініціалізуй її значенням 0.

* Додай слухачів кліків до кнопок, всередині яких збільшуй або зменшуй значення лічильника.

* Оновлюй інтерфейс новим значенням змінної counterValue.

## Завдання 5

Файл `task-05.js`.

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

```html

Hello, Anonymous!

```