The Code

              
                function getValue() {
  if (document.getElementById("message").value == "") {
    Swal.fire({
      backdrop: false,
      title: "😾😾😾",
      text: "Please Enter a Word or a Number!",
    });
  } else {
    let mainMessage = document
      .getElementById("message")
      .value.replace(/[^a-zA-Z0-9]/g, "");
    let displayMessage = reverse(mainMessage);
    displayReversed(displayMessage);
  }
}

function reverse(message) {
  //a string is an array of characters
  let reversedMessage = "";

  for (let index = message.length - 1; index >= 0; index--) {
    reversedMessage += message[index];
  }

  let displayMessage = {
    emoji: "",
    title: "",
    result: "",
    bottomText: "",
  };

  let originalText = document.getElementById("message").value;

  if (message.toLowerCase() == reversedMessage.toLowerCase()) {
    displayMessage.emoji = "😺";
    displayMessage.title = "SUCCESS!";
    displayMessage.result = `${message} | ${reversedMessage}`;
    displayMessage.bottomText = `${originalText} is a palindrome!`;
    results.classList.remove("nope");
    results.classList.add("success");
  } else {
    displayMessage.emoji = "😿";
    displayMessage.title = "NOPE!";
    displayMessage.result = `${message} | ${reversedMessage}`;
    displayMessage.bottomText = `${message} is not a palindrome!`;
    results.classList.remove("success");
    results.classList.add("nope");
  }

  return displayMessage;
}

function displayReversed(displayMessage) {
  let results = document.getElementById("results");
  results.innerHTML = "";
  let titleDiv = document.createElement("div");
  titleDiv.classList.add("titleDiv");
  titleDiv.innerHTML = displayMessage.title;
  let resultDiv = document.createElement("div");
  resultDiv.innerHTML = displayMessage.result;
  resultDiv.classList.add("resultDiv");
  let emojiDiv = document.createElement("div");
  emojiDiv.innerHTML = displayMessage.emoji;
  emojiDiv.classList.add("emojiDiv");
  
  if (displayMessage.emoji == "😺") {
    emojiDiv.classList.add("bounce");
  } else{
    emojiDiv.classList.add("sad");
  }
  


  let bottomTextDiv = document.createElement("div");
  bottomTextDiv.innerHTML = displayMessage.bottomText;
  bottomTextDiv.classList.add("bottomTextDiv");

  results.appendChild(emojiDiv);
  results.appendChild(titleDiv);
  results.appendChild(resultDiv);
  results.appendChild(bottomTextDiv);
}

              
            

Coming Soon!