Третья программа: "Мессенджер". 100%


#1

Моё решение с комментариями к добавленной части кода:

Сводка
// Контейнер для сообщений
var chatContainer = document.querySelector('.chat-content');
// Коллекция всех сообщений в контейнере
var messages = chatContainer.children;
// Форма и поле ввода текста
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');


// Создание нового сообщения
newMessageForm.addEventListener('submit', function (evt) {
  evt.preventDefault();

  // Получаем текст из поля ввода
  var messageText = newMessageInput.value;
  // Клонируем шаблон сообщения
  var newMessage = newMessageTemplate.cloneNode(true);
  // Добавляем текст вводимый пользователем
  newMessage.children[1].textContent = messageText;
  // Добавляем сообщение на страницу
  chatContainer.appendChild(newMessage);
  // Добавляем обработчик удаления новых сообщений
  deleteMessageHandler(newMessage);
  // Чистим содержимое поля ввода
  newMessageInput.value = '';
});
// Функция удаления сообщения
var deleteMessageHandler = function (message) {
  var crossSign = message.querySelector('.chat-message-button');
  crossSign.addEventListener('click', function () {
  message.remove(); 
  });    
}
// Цикл для выбора сообщения для удаления из коллекции(списка)
for (var i = 0;i < messages.length;i++) {
  deleteMessageHandler(messages[i]);  
}

#2

все кайф, но мне кажется вот тут нужно чутка переделать для гибкости

newMessage.children[1].textContent = messageText;

вдруг кому-то в голову трахнет и захочется в шаблон добавить время сообщения…
лучше явно по классу сделать

моё для памяти
// Контейнер для сообщений
let chatContainer = document.querySelector('.chat-content');
// Создаем динамическую коллекцию из сообщений внутри контейнера сообщений
let items = chatContainer.children;
// Форма и поле ввода текста
let newMessageForm = document.querySelector('.chat-form');
let newMessageInput = newMessageForm.querySelector('.chat-form-input');

// Шаблон для сообщения
let messageTemplate = document.querySelector('#message-template').content;
let newMessageTemplate = messageTemplate.querySelector('.chat-message');

// Удаление сообщения по крестику
let deleteMessageHandler = function(item) {
  let closeButton = item.querySelector('.chat-message-button');
  closeButton.addEventListener('click', function() {
    item.remove();
  });
}
for (let i = 0; i < items.length; i++) {
  deleteMessageHandler(items[i]);
}

// Создание нового сообщения
newMessageForm.addEventListener('submit', function(evt) {
  evt.preventDefault();

  // Получаем текст из поля ввода
  let messageText = newMessageInput.value;
  // Клонируем шаблон сообщения
  let newMessage = newMessageTemplate.cloneNode(true);
  // Находим контейнер для текста и записываем туды сообщение из ввода
  newMessage.querySelector('.chat-message-text').textContent = messageText;
  // Добавляем сообщение на страницу
  chatContainer.appendChild(newMessage);
  // Добавляем обработчик удаления сообщений по крестику
  deleteMessageHandler(newMessage);
  // Чистим содержимое поля ввода
  newMessageInput.value = '';
});

#3

Цикл-то тут не нужен получается. Сообщения же не будут писаться через редактор. можно все упаковать в одну функцию, задача выполнится.

Сводка

var chat = document.querySelector(’.chat-content’);
var messages = chat.children;
var newMessageForm = document.querySelector(’.chat-form’);
var newMessageInput = document.querySelector(’.chat-form-input’);
var messageTemplate = document.getElementById(‘message-template’).content;
var newMessageTemplate = messageTemplate.querySelector(’.chat-message’);

newMessageForm.addEventListener(‘submit’, function (evt) {
evt.preventDefault();
var messageText = newMessageInput.value;
var message = newMessageTemplate.cloneNode(true);
var messageBox = message.querySelector(‘p’);
messageBox.textContent = messageText;
chat.appendChild(message);
var deleteButton = message.querySelector(’.chat-message-button’);
deleteButton.addEventListener(‘click’, function () {
message.remove();
});
newMessageInput.value = ‘’;
})


#4

Вот мой вариант с комментариями.

Сводка

//Находим шаблон и его содержимое
var messageTemplate = document.querySelector(’#message-template’).content;
var newMessageTemplate = messageTemplate.querySelector(’.chat-message’);
//Находим чат, форму и текстовое поле
var chat = document.querySelector(’.chat-content’);
var chatForm = document.querySelector(’.chat-form’);
var messageInputField = chatForm.querySelector(’.chat-form-input’);

//На форму вешаем обработчик события submit
chatForm.addEventListener(‘submit’, function(evt){
//Отменяем действие по умолчанию
evt.preventDefault();
//Новое сообщение клонируем из шаблона
var newMessage = newMessageTemplate.cloneNode(true);
//Сохраняем текст, который пользователь ввёл в поле
var newMessageText = messageInputField.value;
//В новом сообщении находим элемент, где будет содержаться текст
var messageTextContainer = newMessage.querySelector(’.chat-message-text’);
// … и кнопку удаления сообщения.
var messageRemoveButton = newMessage.querySelector(’.chat-message-button’);

//Записываем в разметку сообщения текст пользователя
messageTextContainer.textContent = newMessageText;
//Аппендим сообщение в чат
chat.appendChild(newMessage);
//Очищаем поле
messageInputField.value = “”;

//На кнопку вешаем обработчик кликов, который будет удалять сообщения.
messageRemoveButton.addEventListener(‘click’, function(){
newMessage.remove();
});
});

К сожалению, я не смог вынести удаление сообщений в отдельную функцию, хотя желание такое было. Теперь, посмотрев, предыдущие варианты, понял как нужно было это делать.