The Code

                    
function getValues() {
  let userInput = document.getElementById("message").value;

  const regex = /[^a-z0-9]/gi
    userInput = userInput.replace(regex, "");

  let reversedInput = checkForPalindrome(
    userInput.toLowerCase().replaceAll(" ", "")
  );

  displayResults(reversedInput);
}

function checkForPalindrome(string) {
  let strLength = string.length;


  for (let index = 0; index < strLength / 2; index++) {
    if (string[index] !== string[strLength - 1 - index]) {
      return; // false
    }
  }
  return `You entered "${string}" which is a palindrome.`; // true
}

function displayResults(reversedInput) {
  if (reversedInput) {
    document.getElementById("msg").textContent = reversedInput;
  } else {
    document.getElementById("msg2").textContent = reversedInput;
  }

  if (reversedInput) {
    document.getElementById("alert").classList.remove("d-none");
    document.getElementById("alerttwo").classList.add("d-none");
  } else {
    document.getElementById("alerttwo").classList.remove("d-none");
    document.getElementById("alert").classList.add("d-none");
  }
}                      
                    
                

Explanation:

getValues function is the entry point, AKA the controller function of the js file. Its purpose is to get the user input. Here, I convert each input to be user friendly for the next step. I used regex, toLowerCase and replaceAll to ensure spaces, case, numbers and special characters are ignored before moving to the next step.

checkForPalindrome function is considered the logic of the function and incorporates a 'For' Javascript loop. My first step is declaring the variable strLength. strLength is used in the For loop to obtain the length of the string. In this case, I used the idea that half of the string should be equal to the end half of the string, in order for it to be considered a palindrome, hence why in the logic, there is strLength / 2. The if statement translates as follows: if the string value at a particular index does not equal (!==) the string value starting at the end of the string, return as false. Otherwise, it will return true.

displayResults function places the results on the page for the user to see if what they have entered is a palindrome or not. In this case, I have two if/else statements that will display based on what was entered. Both messages are distinguished by id "alert/msg" versus "alerttwo/msg2," which are linked to the respect true or false statements when the user clicks the button.