https://github.com/lesiaukr/goit-js-hw-15
Master's degree homework JS course - Events
https://github.com/lesiaukr/goit-js-hw-15
events events-delegation javascript
Last synced: 7 months ago
JSON representation
Master's degree homework JS course - Events
- Host: GitHub
- URL: https://github.com/lesiaukr/goit-js-hw-15
- Owner: LesiaUKR
- Created: 2023-10-20T20:00:14.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-22T20:39:56.000Z (almost 2 years ago)
- Last Synced: 2025-01-29T23:16:31.178Z (9 months ago)
- Topics: events, events-delegation, javascript
- Language: HTML
- Homepage: https://lesiaukr.github.io/goit-js-hw-15/
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Домашня робота Тема 15. Події
## Критерії приймання
- Створено репозиторій `goit-js-hw-15`.
- Домашня робота містить два посилання: на вихідні файли і робочу сторінку на
`GitHub Pages`.
- Завдання виконані у точній відповідності до ТЗ (забороняється змінювати
вихідний HTML завдання).
- В консолі відсутні помилки і попередження під час відкриття живої сторінки
завдання.
- Імена змінних і функцій - зрозумілі та описові.
- Код відформатований за допомогою `Prettier`.
## Стартові файли
У [папці src](./src) знайдеш стартові файли з готовою розміткою і підключеними
файлами скриптів для кожного завдання. Скопіюй їх собі у проект. Для цього
завантаж цей репозиторій як архів або використовуй
[сервіс DownGit](https://downgit.github.io/) для завантаження окремої папки з
репозиторія.
## Завдання 1
Напиши скрипт, який під час втрати фокусу на інпуті (подія `blur`), перевіряє
його вміст щодо правильної кількості введених символів.
```html
```
- Яка кількість смиволів повинна бути в інпуті, зазначається в його атрибуті
`data-length`.
- Якщо введена правильна кількість символів, то `border` інпуту стає зеленим,
якщо неправильна кількість - червоним.
Для додавання стилів використовуй CSS-класи `valid` і `invalid`, які ми вже
додали у вихідні файли завдання.
```css
#validation-input {
border: 3px solid #bdbdbd;
}
#validation-input.valid {
border-color: #4caf50;
}
#validation-input.invalid {
border-color: #f44336;
}
```
## Завдання 2
Напиши скрипт, який реагує на зміну значення `input#font-size-control` (подія
`input`) і змінює інлайн-стиль `span#text`, оновлюючи властивість `font-size`. В
результаті, перетягуючи повзунок, буде змінюватися розмір тексту.
```html
Abracadabra!
```
## Завдання 3
Напиши скрипт управління формою логіна.
```html
Email
Password
Login
```
1. Обробка відправлення форми `form.login-form` повинна відбуватися відповідно
до події `submit`.
2. Під час відправлення форми сторінка не повинна перезавантажуватися.
3. Якщо у формі є незаповнені поля, виводь `alert` з попередженням про те, що
всі поля повинні бути заповнені.
4. Якщо користувач заповнив усі поля і відправив форму, збери значення полів в
об'єкт, де ім'я поля буде ім'ям властивості, а значення поля - значенням
властивості. Для доступу до елементів форми використовуй властивість
`elements`.
5. Виведи об'єкт із введеними даними в консоль і очисти значення полів форми
методом `reset`.
## Завдання 4
Напиши скрипт, який змінює кольори фону елемента `` через інлайн-стиль по
кліку на `button.change-color` і виводить значення кольору в `span.color`.
```html
```
Для генерування випадкового кольору використовуй функцію `getRandomHexColor`.
```js
function getRandomHexColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}
```
## Завдання 5
Напиши скрипт створення і очищення колекції елементів. Користувач вводить
кількість елементів в `input` і натискає кнопку `Створити`, після чого
рендериться колекція. Натисненням на кнопку `Очистити`, колекція елементів
очищається.
```html
Create
Destroy
```
Створи функцію `createBoxes(amount)`, яка приймає один параметр - число. Функція
створює стільки `
`, скільки вказано в `amount` і додає їх у `div#boxes`.
1. Розміри найпершого `
` - 30px на 30px.
2. Кожен елемент після першого повинен бути ширшим і вищим від попереднього на
10px.
3. Всі елементи повинні мати випадковий колір фону у форматі HEX. Використовуй
готову функцію `getRandomHexColor` для отримання кольору.
```js
function getRandomHexColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}
```
Створи функцію `destroyBoxes()`, яка очищає вміст `div#boxes`, у такий спосіб
видаляючи всі створені елементи.