Список дел готов, можно и пойти отдохнуть. Только вы потянулись выключить настольную лампу, как лапа босса вас остановила. У него к вам ещё одно дельце.

Мяу! Нужно запрограммировать мессенджер. Как должна работать программа:

• Шаблон сообщения находится в теге template с идентификатором message-template.
• Новое сообщение добавляется в конец контейнера с классом chat-content.
• Чтобы добавить новое сообщение, нужно ввести текст в поле ввода (элемент с классом chat-form-input) и нажать кнопку «Отправить» (отправляет данные из формы с классом chat-form).
• В блоке сообщения (класс chat-message) должен быть текст сообщения, кнопка удаления и имя пользователя.
• Чтобы удалить сообщение, нужно кликнуть по кнопке с крестиком (элемент с классом chat-message-button). Эта кнопка появляется при наведении на сообщение.

Справишься и отпущу тебя в отпуск!

Когда будете готовы, нажмите кнопку Заказчик, принимай программу!. Запустятся тесты, которые проверят ваше решение.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

var chatContainer = document.querySelector('.chat-content');
var newMessageForm = document.querySelector('.chat-form');
var newMessageInput = newMessageForm.querySelector('.chat-form-input');
var messageTemplate = document.querySelector('#message-template').content;
var newMessageTemplate = messageTemplate.querySelector('.chat-message');


var addClickHandler = function (element, button) {
  button.addEventListener('click', function () {
    element.remove();
  });
};

newMessageForm.addEventListener('submit', function (evt) {
  evt.preventDefault();

  var messageText = newMessageInput.value;
  var newMessage = newMessageTemplate.cloneNode(true);
  var newMessageText = newMessage.querySelector('.chat-message-text');
  newMessageText.textContent = messageText;

  var deleteButton = newMessage.querySelector('.chat-message-button');
  addClickHandler(newMessage, deleteButton);

  chatContainer.appendChild(newMessage);
  newMessageInput.value = '';
});