//get our user input
function getValue(){

   //make sure the alert is invisible
   document.getElementById("alert").classList.add("invisible");

   //get user string from the page
   let userString = document.getElementById("userString").value;

   //check for a palindrome
   let returnObj = checkForPalindrome(userString);

   //display our message to the screen
   displayMessage(returnObj);
}

//check if string is a palindrome
//logic function
function checkForPalindrome(userString){

    userString = userString.toLowerCase();

   //remove spaces and special characters
   let regex = /[^a-z0-9]/gi;
   userString = userString.replace(regex, "");

   let revString = [];
   let returnObj = {};

   //reverse a string using a for loop
   for (let index = userString.length - 1 ; index >= 0; index--) {
      revString += userString[index];
      }
   if (revString == userString){
      returnObj.msg = "Well done! You entered a palindrome"
   }
   else {
      returnObj.msg = "Sorry! You did not enter a palindrome"
   }

   returnObj.reversed = revString;

   return returnObj;

}

//display the reversed string to the user
//view function
function displayMessage(returnObj){

   //write to the page
   document.getElementById("alertHeader").innerHTML = returnObj.msg;
   document.getElementById("msg").innerHTML = `Your phrase reversed is: ${returnObj.reversed}`;
   //show the alert box
   document.getElementById("alert").classList.remove("invisible");
}

The code is structured in three functions

getValue

getValues accepts(gets) the user input from the page. It utilizes getElementById to pull the values from the page. The "Id" being used was declared on the app page. We then take the userString and pass it to checkForPalindrome, to then return an object. An object in JS has multiple properties and types. We then pass the returnObj to displayMessageto show to the screen.

checkForPalindrome

checkForPalindrome takes the userString and changes all the characters to lowerCase. It then sets a a new variable regex(regular expression) to remove any special characters leaving all letters from a-z and numbers from 0-9. .replace is then takes the regex match and replace it with an empty string.

We then have to reverse the string and check to see if it is a palindrome. After declaring an empty array revString and an empty string returnObj, we use a decrementing for loop. So taking the userString, starting at the end of the string, taking the maximum length minus 1, at each loop, we add 1 until the index is equal to 0.

Using the if/else statments, we then check to see if the revString is equal to the userString. If it is correct, a WELL DONE message is displayed, else a sorry message is displayed using the returnObj.msg string.

displayMessage

displayMessage uses returnObj and utilizes it to grab the alertHeader Id from the app page from the innerHTML, and uses it print the returnOnj message to the screen. It also uses the msg Id to display a message using template literal, then make it visible to the user by removing it from being invivible.