// Get the string value from page
                        // Controller Function
                        function getValue(){
                            // ensures the alert is invisible when the page starts
                            document.getElementById("alert").classList.add("invisible");

                            // set variable equal to the user input
                            let userInput = document.getElementById("userInput").value;

                            // if user just hits the button, then use the placeholder value
                            if (userInput == ""){
                                userInput = "racecar";
                            }

                            // pass input into palindromeCheck function
                            let returnObject = palindromeCheck(userInput);

                            // pass reversed string to displayResults function
                            displayResults(returnObject);
                        }

                        // Check original versus the reversed version
                        // Logic Function
                        function palindromeCheck(userInput){
                            
                            // convert to lowercase
                            userInput = userInput.toLowerCase();

                            // remove spaces and special characters
                            let regex = /[^a-z0-9]/gi;

                            userInput = userInput.replace(regex,"");

                            let reversedInput = [];
                            let returnObject = {};

                            for (let i = userInput.length -1; i >= 0; i--){
                                reversedInput += userInput[i];
                            }

                            if (reversedInput == userInput){
                                returnObject.msg = "Well done! You entered a palindrome!";
                            } else {
                                returnObject.msg = "Sorry! You did not enter a palindrome!";
                            }

                            returnObject.reversed = reversedInput;

                            return returnObject;
                        }

                        // Display the reversed string to page
                        // View Function
                        function displayResults(returnObject){

                            // show palindrome result based on the test results
                                document.getElementById("alertHeading").innerHTML = returnObject.msg;
                                document.getElementById("message").innerHTML = `Your phrase reversed is: ${returnObject.reversed}`;
                                document.getElementById("alert").classList.remove("invisible");
                        }

                        // allow button to reset the app
                        function resetApp(){

                            // hide the alert box

                            document.getElementById("alert").classList.add("invisible");

                            // clear the input box

                            document.getElementById("userInput").value = "";
                        }
                    
                    

getValue()

 The getValue( ) function is our starting point for the application. The first thing our function does is to make sure our results element is hidden by adding the invisible class to the html element if it is not already there. Next, we take in the value from our input on the webpage, and store it inside an appropriately named variable. We check to see if the user entered a value or if they simply clicked the button expecting to use the placeholder value. I prefer to use this method over a value attribute due to the fact that the user has to physically remove the value if they want to enter their own word or phrase. If the user left the string blank, then we set the userInput equal to the placeholder, "racecar." Next, we create a new variable called returnObject, and set it equal to the value returned by our palindromeCheck( ) function when we pass the userInput variable in as a parameter.

 Once a value is returned from the palindromeCheck( ) function, the returnObject variable is passed into our displayResults( ) function as a parameter.

palindromeCheck()

 The palindromeCheck( ) function receives the userInput variable as a parameter. First, we need to clean up the user input to ensure we catch all of the palindromes. To do this, we use the built-in toLowerCase( ) function to convert any uppercase characters to lowercase. Next, we use a regular expression to replace any character not included in 'A' to 'Z' or '0' to '9' with an empty string, which removes it from our userInput variable. Next, we create an empty array variable called reversedInput to store the reversed string we are about to create. We also need to create an empty object called reutrnObject. Next, we use a specially designed for loop to reverse the string. The logic here can be tricky to understand at first. We start the loop with an index equal to the length of the userInput array minus 1. The loop will run over the userInput array, and set the first element of the reversedInput array equal to the value at the current index location of the userInput variable. This is where the reversing takes place. After that loop is completed, the index is decrimented (made smaller) by 1, and the loop runs again until the index is less than 0. The completed reversedInput array is then returned to the getValue( ) function to continue with the rest of the function.

 For example, if we enter the word 'read,' the first loop through will set the first element of the reversedString array to 'd'. The next loop sets the second element of the reversedString array to 'a', and so on.

 We then use a simple if/then statement to compare the cleaned up user input to the reversed input. If they match, then we set the message property of our returnObject to a positive result. Otherwise, we change the message to a negative result. Finally, the function adds a reversed property to our returnObject, and sets it equal to the reversedInput variable and returns the object.

displayResults()

 The displayResults( ) function receives the returnObject, and sets the inner html of our alert header to message property of our returnObject. The message element's inner HTML is set to display the reversed string, and then the invisible class is removed to display the result to the user on-screen.

resetApp()

 The function runs when the user clicks the "reset" button, and re-adds the invisible class to the results element. It also sets the input box's value back to an empty string, which takes the application back to it's initial state.