chat

Текстовый чат

Домашнее задание к занятию 2.2 «Работа с HTML-формами».

Описание

Необходимо написать искусственный интелект чата для компании-монополиста. У них всё хорошо, поэтому робот на том конце постоянно грубит.

Исходные данные

1. Основная HTML-разметка
2. Базовая CSS-разметка

Разметка красного бэйджа выглядит следующим образом:

<div class="chat-widget">
    <!-- ... -->
</div>

Для того, чтобы показать окно чата, достаточно поставить этому элементу класс chat-widget_active:

<div class="chat-widget chat-widget_active">
    <!-- ... -->
</div>

HTML-структура сообщения в чате такова:

<div class="message">
    <div class="message__time">22:10</div>
    <div class="message__text">Добрый день!</div>
</div>

Сообщение, которое отправляется пользователем, должно иметь класс message_client:

<div class="message message_client">
    <div class="message__time">21:10</div>
    <div class="message__text">Добрый день! Хочу купить розы для любимой!</div>
</div>

Теория

Вы уже знакомы со свойством textContent DOM-элемента. В следующей лекции вы узнаете о свойстве innerHTML.

Тем не менее, для этого ДЗ нам оно потребуется. С ним вы уже сталкивались, дописывая игру «Соло на клавиатуре».

С его помощью вы можете записывать внутрь элемента не только обычный текст, но и HTML:

const messages = document.querySelector( '.chat-widget__messages' );
// добавит
messages.innerHTML += `
  <div class="message">
    <div class="message__time">09:21</div>
    <div class="message__text">
      Добрый день, мы ещё не проснулись. Позвоните через 10 лет
    </div>
  </div>
`;

Более подробно информацию о свойстве можно узнать тут:

1. MDN: Element.innerHTML
2. Свойства узлов: тип, тег и содержимое

Процесс реализации

1. Реализуйте открытие окна чата при нажатии на красный боковой бэйдж
2. По нажатию Enter, реализуйте отправку в чат непустого текстового сообщения
3. Реализуйте ответ робота (случайное сообщение из списка)
4. Проставляйте реальную дату переписки

Повышенный уровень сложности (не обязательно)

1. Реализуйте автоматическую прокрутку окна чата до блока последнего комментария после каждого нового комментария.
2. При активном окне чата и простое 30 секунд, робот должен задать вопрос в чат

Решение задач

1. Перейти в папку задания. cd ./html-forms/chat.
2. Открыть файл task.js в вашем редакторе кода и выполнить задание.
3. Открыть файл task.html в вашем браузере и убедиться в правильности выводимых результатов.
4. Добавить файл task.js в индекс git с помощью команды git add %file-path%, где %file-path% - путь до целевого файла. git add task.js.
5. Сделать коммит используя команду git commit -m '%comment%', где %comment% - это произвольный комментарий к вашему коммиту. git commit -m 'first commit reveal'.
6. Опубликовать код в репозиторий homeworks с помощью команды git push -u origin master.
7. Прислать ссылку на репозиторий через личный кабинет на сайте Нетологии.

Никаких файлов прикреплять не нужно.

Все задачи обязательны к выполнению для получения зачета. Присылать на проверку можно каждую задачу по отдельности или все задачи вместе. Во время проверки по частям ваша домашняя работа будет со статусом "На доработке".

Любые вопросы по решению задач задавайте в чате учебной группы.