app.js

const userMessages = [];
const alertMessage = document.getElementById("alert");
const userMessageForm = document.querySelector('form');
const userMessagesList = document.querySelector('ul');
if (sessionStorage.getItem("isLoggedIn") == false || sessionStorage.getItem("isLoggedIn") == undefined) {
  document.documentElement.innerHTML = "";
  window.location.href = "http://164.90.174.221/login";
}
function clearSection() {
  userMessagesList.innerHTML = '';
  userMessages.length = 0;
}
function renderMessages() {
  let messageItems = '';
  for (const message of userMessages) {
    messageItems = `
      ${messageItems}
      <li class="message-item">
        <div class="message-image">
          <img src="${message.image}" alt="${message.text}">
        </div>
        <p>${message.text}</p>
      </li>
    `;
  }
  alertMessage.innerHTML = "";
  userMessagesList.innerHTML = messageItems;
}

function formSubmitHandler(event) {
  event.preventDefault();
  const userMessageInput = event.target.querySelector('textarea');
  const messageImageInput = event.target.querySelector('input');
  const userMessage = userMessageInput.value;
  const imageUrl = messageImageInput.value;

  if (
    !userMessage ||
    !imageUrl ||
    userMessage.trim().length === 0 ||
    imageUrl.trim().length === 0
  ) {
      alertMessage.innerHTML = `<div class="alert-alert-warning"><p class="warning"><strong>Warning! </strong>Please fill in out fields.</p></div>`;
    return;
  }

  userMessages.push({
    text: userMessage,
    image: imageUrl,
  });

  userMessageInput.value = '';
  messageImageInput.value = '';

  renderMessages();
}

userMessageForm.addEventListener('submit', formSubmitHandler);