Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lesiaukr/goit-js-hw-14
Master's degree homework JS course - DOM
https://github.com/lesiaukr/goit-js-hw-14
async-attribute classlist data-attributes defer-attribute dom dom-manipulation elem-attribute has-attribute hasattribute html-attributes innerhtml insertadjacenthtml queryselector queryselectorall reflow repaint set-attribute setattribute textcontent
Last synced: 7 days ago
JSON representation
Master's degree homework JS course - DOM
- Host: GitHub
- URL: https://github.com/lesiaukr/goit-js-hw-14
- Owner: LesiaUKR
- Created: 2023-10-18T20:16:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-20T19:54:54.000Z (over 1 year ago)
- Last Synced: 2024-12-02T08:49:58.479Z (2 months ago)
- Topics: async-attribute, classlist, data-attributes, defer-attribute, dom, dom-manipulation, elem-attribute, has-attribute, hasattribute, html-attributes, innerhtml, insertadjacenthtml, queryselector, queryselectorall, reflow, repaint, set-attribute, setattribute, textcontent
- Language: JavaScript
- Homepage: https://lesiaukr.github.io/goit-js-hw-14/
- Size: 17.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Домашня робота Тема 14. DOM
## Критерії приймання
- Створено репозиторій `goit-js-hw-14`.
- Домашня робота містить два посилання: на вихідні файли і робочу сторінку на
`GitHub Pages` та прикрiплений файл репозиторію у форматi zip.
- Завдання виконані у точній відповідності до ТЗ (забороняється змінювати
вихідний HTML завдання).
- В консолі відсутні помилки і попередження під час відкриття живої сторінки
завдання.
- Імена змінних і функцій - зрозумілі та описові.
- Код відформатований за допомогою `Prettier`.
## Стартові файли
У [папці src](./src) знайдеш стартові файли з готовою розміткою і підключеними
файлами скриптів для кожного завдання. Скопіюй їх собі у проект. Для цього
завантаж цей репозиторій як архів або використовуй
[сервіс DownGit](https://downgit.github.io/) для завантаження окремої папки з
репозиторія.
## Завдання 1
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`.
2. Для кожного элемента `li.item` у спику `ul#categories`, знайде і виведе в
консоль текст заголовку елемента (тегу `
`) і кількість елементів в
категорії (усіх `
В результаті, в консолі будуть виведені наступні повідомлення.
```bash
Number of categories: 3
Category: Animals
Elements: 4
Category: Products
Elements: 3
Category: Technologies
Elements: 5
```
## Завдання 2
HTML містить порожній список `ul#ingredients`.
```html
```
JavaScript містить масив рядків.
```js
const ingredients = [
'Potatoes',
'Mushrooms',
'Garlic',
'Tomatos',
'Herbs',
'Condiments',
];
```
Напиши скрипт, який для кожного елемента масиву `ingredients`:
1. Створить окремий елемент `
`document.createElement()`.
2. Додасть назву інгредієнта як його текстовий вміст.
3. Додасть елементу клас `item`.
4. Після чого, вставить усі `
## Завдання 3
Напиши скрипт для створення галереї зображень на підставі масиву даних. HTML
містить список `ul.gallery`.
```html
```
Використовуй масив об'єктів `images` для створення елементів ``, вкладених
в `
`insertAdjacentHTML()`.
- Усі елементи галереї повинні додаватися в DOM за одну операцію додавання.
- Додай мінімальне оформлення галереї флексбоксами або грідами через CSS класи.
```js
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
Лічильник складається зі спану і кнопок, які по кліку повинні збільшувати і
зменшувати його значення на одиницю.
```html
-1
0
+1
```
- Створи змінну `counterValue`, в якій буде зберігатися поточне значення
лічильника та ініціалізуй її значенням `0`.
- Додай слухачів кліків до кнопок, всередині яких збільшуй або зменшуй значення
лічильника.
- Оновлюй інтерфейс новим значенням змінної `counterValue`.
## Завдання 5
Напиши скрипт, який під час набору тексту в інпуті `input#name-input` (подія
`input`), підставляє його поточне значення в `span#name-output`. Якщо інпут
порожній, у спані повинен відображатися рядок `"Anonymous"`.
```html
Hello, Anonymous!
```