2 Homework (DOM)

[DrSmile444]

Гілку потрібно назвати: 2-dom

Назва директорії з домашнім завданням повинна бути 2-dom, тобто ця папка повинна знаходитись всередині вашої папки з домашніми роботами

Потрібно створити простий чат, в який можна писати повідомлення, сабмітити ввід та показувати це повідомлення на сторінці.
Дизайн та розположення елементів потрібно взяти за референс від вже готових рішень в інтернеті.

Від вас потрібно:

1. Створити текстовий інпут, в який буде вводитись повідомлення;
2. Створити кнопку "Submit", яка при натисканні буде:
   2.1) Валідувати значення текстовий інпуту (не пусте повідомлення, без лишніх пробілів до та після повідомлення);
   2.2) Викликати функцію, яка буде створювати елемент, який буде відображатись як повідомлення в чаті;
   2.3) Очистити значення текстового інпуту;
   2.4) Обернути JS код в анонімну функцію;
3. Створити щонайменше 3 повідомлення та перевірити чи вірно у вас відображаються всі елементи.
4. Ввімкнути Github Pages у вашому репозиторії та додати посилання в опис до пулл реквесту.
5. Створюючи пулл реквест, потрібно прикласти скріншот як ваш чат виглядає із повідомленнями та додати посилання в опис до пулл реквесту.

Важливо! Створюючи пулл реквест, потрібно прикласти скріншот як ваш чат виглядає із повідомленнями.

• Завдання із зірочкою:
  Для покращення навичок, вам потрібно:

1. Показувати статус "Typing..." коли юзер починає вводити текст і ховати цей статус після секунди неактивності (еффект Debounce);
2. Додати скролл у блок з повідомленнями, щоб на сторінці можна було показувати будь-яку їх кількість.

Корисні лінки:

Селектори та пошук по DOM:
https://blog.bitsrc.io/dom-selectors-explained-70260049aaf0

Лісенери та івенти:
https://medium.com/@timothyrobards/javascript-fundamentals-understanding-events-4def8c47e313

Делегування івентами:
https://learn.javascript.ru/event-delegation

Ефективний спосіб створення шаблонів:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Приклади:
https://learn.javascript.ru/event-delegation#povedenie-podskazka
https://learn.javascript.ru/event-delegation#raskryvayuscheesya-derevo