The Code for Palindrome

              
                // get user input
                function getUserString() {
                  // hide alert box and message
                  document.getElementById("alert").classList.add("invisible");
                  // get user string from the page
                  let userString = document.getElementById("userString").value;

                  if (userString.length >= 2) {
                    // check for a palindrome
                    let returnObj = checkForPalindrome(userString);
                    // display message on the page
                    displayMessage(returnObj);
                  } else {
                    alert("You must enter at least 2 characters to have it checked!");
                  }
                }

                // check if string is a palindrome
                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 = {};

                  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 a message on the page
                function displayMessage(returnObj) {
                  document.getElementById("alertHeader").innerHTML = returnObj.msg;
                  document.getElementById(
                    "msg"
                  ).innerHTML = `Your phrase reversed is: ${returnObj.reversed}`;
                  document.getElementById("alert").classList.remove("invisible");
                }

              
            

The code is structured into three functions.

getUserString

The getUserString function is responsible for getting the value from the page when the button is clicked. This function will also add the class "invisible" to the div element with a class of "alert" to ensure the message is removed when the button is clicked. The other two functions are also called within this controller function.

checkForPalindrome

This function takes in the userString from the function getUserString and checks to see if the string is a palindrome. The first step is to convert the string to all lower case. Then using a regex it will remove spaces and special characters. Then the userString is reversed by using a loop. The revString is checked against the userString and a message is saved to the returnObj. The revString is also saved to the returnObj. The returnObj is then returned.

displayMessage

This function takes in the returnObj from the function checkForPalindrome and displays the message and the reverse of what the user typed in. This function will also remove the invisible class so the alert can be seen on the page.