// 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 to the string users put into input field
                            let userString = document.getElementById("userString").value;

                            // pass string into reverseString function
                            let reversedString = reverseString(userString);

                            // pass reversed string to displayString function
                            displayString(reversedString);
                        }

                        // Reverse the string
                        // Logic Function
                        function reverseString(userString){
                            let reversedString = [];

                            // use a for loop to reverse the string
                            for (let index = userString.length - 1; index >= 0; index--) {
                                reversedString += userString[index];
                            }

                            // return the reversedString array to getValue function
                            return reversedString;
                        }

                        // Display the reversed string to page
                        // View Function
                        function displayString(reversedString){

                            // write the message to the page

                            document.getElementById("message").innerHTML = `"The reversed string is: ${reversedString}"`;

                            // show the alert box

                            document.getElementById("alert").classList.remove("invisible");
                        }
                    
                    

Here are some brief explanations of the functions used in this project.

getValue()

 The getValues( ) 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. Next, we create a new variable called reversedString, and set it equal to the value returned by our reverseString( ) function when we pass the userString variable in as a parameter.

 Once a value is returned from the reverseString( ) function, the reversedString variable is passed into our displayString( ) function as a parameter to complete the task of reversing a string.

reverseString()

 The reverseString( ) function receives the userString variable as a parameter. First, we create an empty array variable called reversedString to store the reversed string we are about to create. 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 userString array minus 1. The loop will run over the userString array, and set the first element of the reversedString array equal to the value at the current index location of the userString 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 reversedString array is then returned to the getValues( ) 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.

displayString()

 The displayString( ) function receives the reversedString array, and sets the inner html of our results element to display a message containing the reversed string. The last step is to remove the invisible class from our result element to show the result to the user on-screen.