//get user input
                            //controller function
                            function getValue() {
                                //make sure the alert is invisible
                                document.getElementById("alert").classList.add("invisible");
                                let userString = document.getElementById("userString").value;    
                                
                                if (userString.length > 1) {
                                    //call checkForPalindrome passing it the value of userString and setting that to returnObj
                                    let returnObj = checkForPalindrome(userString);
                                    //calling displayMessage
                                    displayMessage(returnObj);
                                }
                                else {
                                    alert("You must enter at least 2 characters to reverse your string!");
                                }
                            }

                            //check palindrome
                            //logic function
                            function checkForPalindrome(userString) {
                                //convert all characters to lower case
                                userString = userString.toLowerCase();
                                //remove spaces and special characters
                                let regex = /[^a-z0-9]/gi;
                                //return any character in regex and replace every character that is not with ""
                                userString = userString.replace(regex,"");
                                //initialize empty array
                                let revString = [];
                                //declaring a return object
                                let returnObj = {};
                                //reverse a string using a for loop and storing into revString
                                for (let index = userString.length - 1; index >= 0; index--) {
                                    revString += userString[index];
                                }
                                //Check if revString is equivalent to userString
                                if(revString == userString) {
                                    returnObj.msg = "Well done! You found a Palindrome!"  
                                }
                                else {
                                    returnObj.msg = "Sorry! You did NOT enter a Palindrome!"  
                                }
                                returnObj.reversed = revString;
                                return returnObj;
                            }

                            //Display the palindrome check to user
                            //view function
                            function displayMessage(returnObj) {
                                document.getElementById("alertHeader").innerHTML = returnObj.msg;
                                //write reversed string to the page
                                document.getElementById("msg").innerHTML = `Your phrase reversed is: ${returnObj.reversed} `;
                                //turn alert message box on
                                document.getElementById("alert").classList.remove("invisible");
                            }
                        
                    

The Code is structured in three functions.

getValues

The getValue function gets user input from the app page. The function utilizes the getElementById to pull the userString value from the page. If the string length is less than one we set an alert, but if it more than one, we pass the value to the checkForPalindrome function. The function checkForPalindrome then returns an object that we set to the value returnObj before we pass that same value to the displayMessage function.

checkForPalindrome

The checkForPalindrome function takes in a string parameter (userString). We convert all the characters in userString to lowercase, and set a value regex to the regular expression of all characters that are letters or digits only. Then we return any character of regex to userString and also replace every character not in regex with a "" into userString. We create a variable revString that holds an array, but also an object returnObj. We then use a for loop to go through each index of the string from its last value to it's first, each time adding the indexes of userString to the array revString. Then we check if revString is equal to userString using returnObj. We now set the reversed object returnObj to revString and return returnObj.

displayMessage

The function displayMessage takes in the parameter returnObj. We use DOM manipulation to go after elements with id of "msg" and "alertHeader" in our HTML, and we set the contents to our object and template literal. Then we make the message box visible to the user by removing the class list item "invisible" on all elements of "alert" upon button click!