//Controller
                            function getString(){
                            let userString = document.getElementById("userString").value;
                            displayString(reverseString(userString));
                            }

                            //reverse the input string
                            function reverseString(origString){
                            let reversedString = [];
                            for (i=origString.length; i>0; i--) {
                            reversedString += origString[i-1];
                            };
                            return reversedString;
                            }

                            //display the reversed string
                            function displayString(reversedString){
                            document.getElementById("message").innerHTML = 
                            `Your reversed string is: ${reversedString}`;
                            document.getElementById("alert").classList.remove("invisible");
                            }

                            // clear form
                            function clearForm(){
                            location.reload();
                            }
                        
                    

This code was separated into functions that handle the overall function of the app, as well as the logic amd display function.

getString()

This function gathers the user entered string from the form and then calls for the results to be displayed after being reversed.

reverseString()

This function takes in the string passed to it from the form. It loops through using a "for" loop and places the individual characters into a temporary array with its index reversed.

displayString()

This function takes the array that has been reversed and passes it to the html to be displayed in a hidden alert box. This also serves to unhide the alert box so the results can be seen.

clearForm()

This function clears the form and resets the app to be run again.