Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oleksandr-romashko/goit-js-hw-15
Homework for events topic
https://github.com/oleksandr-romashko/goit-js-hw-15
css dom html javascript-css-html-dom
Last synced: 15 days ago
JSON representation
Homework for events topic
- Host: GitHub
- URL: https://github.com/oleksandr-romashko/goit-js-hw-15
- Owner: oleksandr-romashko
- Created: 2024-01-23T12:42:35.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-24T18:10:29.000Z (about 1 year ago)
- Last Synced: 2024-11-21T10:29:58.701Z (3 months ago)
- Topics: css, dom, html, javascript-css-html-dom
- Language: JavaScript
- Homepage: https://oleksandr-romashko.github.io/goit-js-hw-15/
- Size: 15.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-15
Homework for events topic.
## Стартові файли
[Завантажуй стартові](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/goitacademy/javascript-homework/tree/main/v2/06/src) файли з готовою розміткою та підключеними файлами скриптів для кожного завдання. Скопіюй їх собі у проект.
## Завдання 1
Файл `task-06.js`.
Напиши скрипт, який під час втрати фокусу на інпуті (подія `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
Файл `task-07.js`.
Напиши скрипт, який реагує на зміну значення `input#font-size-control` (подія `input`) і змінює інлайн-стиль `span#text`, оновлюючи властивість font-size. В результаті, перетягуючи повзунок, буде змінюватися розмір тексту.
```html
Abracadabra!
```
## Завдання 3
Файл `task-08.js`.
Напиши скрипт управління формою логіна.
```html
Email
Password
Login
```
1. Обробка відправлення форми `form.login-form` повинна відбуватися відповідно до події `submit`.
1. Під час відправлення форми сторінка не повинна перезавантажуватися.
1. Якщо у формі є незаповнені поля, виводь `alert` з попередженням про те, що всі поля повинні бути заповнені.
1. Якщо користувач заповнив усі поля і відправив форму, збери значення полів в об'єкт, де ім'я поля буде ім'ям властивості, а значення поля - значенням властивості. Для доступу до елементів форми використовуй властивість `elements`.
1. Виведи об'єкт із введеними даними в консоль і очисти значення полів форми методом `reset`.
## Завдання 4
Файл `task-09.js`.
Напиши скрипт, який змінює кольори фону елемента `` через інлайн-стиль по кліку на `button.change-color` і виводить значення кольору в `span.color`.
```html
```
Для генерування випадкового кольору використовуй функцію `getRandomHexColor`.
```javascript
function getRandomHexColor() {
return `#${Math.floor(Math.random() * 16777215)
.toString(16)
.padStart(6, 0)}`;
}
```
## Завдання 5
Файл `task-10.js`.
Напиши скрипт створення і очищення колекції елементів. Користувач вводить кількість елементів в `input` і натискає кнопку `Створити`, після чого рендериться колекція. Натисненням на кнопку `Очистити`, колекція елементів очищається.
```html
Create
Destroy
```
Створи функцію `createBoxes(amount)`, яка приймає один параметр - число. Функція створює стільки `
`, скільки вказано в `amount` і додає їх у `div#boxes`.
1. Розміри найпершого `
` - 30px на 30px.
1. Кожен елемент після першого повинен бути ширшим і вищим від попереднього на 10px.
1. Всі елементи повинні мати випадковий колір фону у форматі HEX. Використовуй готову функцію `getRandomHexColor` для отримання кольору.
```javascript
function getRandomHexColor() {
return `#${Math.floor(Math.random() * 16777215)
.toString(16)
.padStart(6, 0)}`;
}
```
1. Створи функцію `destroyBoxes()`, яка очищає вміст `div#boxes`, у такий спосіб видаляючи всі створені елементи.