//Get the string from the page
                    //controller function
                    function getValue(){
                    
                       document.getElementById("alert").classList.add("invisible");   
                       let userString = document.getElementById("userString").value;
                       let revString = reverseString(userString);
                       displayString(revString);
                    }
                    
                    //Reverse the string
                    //logic function
                    function reverseString(userString){
                       let revString = [];
                    
                       //reverse a string using a for loop
                       for (let index = userString.length - 1 ; index >= 0; index--) {
                          revString += userString[index];
                          }
                       return revString;
                    }
                    
                    //display the reversed string to the user
                    //view function
                    function displayString(revString){
                    
                       //write to the page
                       document.getElementById("msg").innerHTML = `Your string reversed is: ${revString}`;
                       //show the alert box
                       document.getElementById("alert").classList.remove("invisible");
                    }
                
                

The code is structured in three functions

getValue

getValues accepts(gets) the user input from the page. It utilizes getElementById to pull the values from the page. The "Id" being used was declared on the app page. We then take the userString and pass it to reverseString. whcih would then display on the screen using displayString.

reverseString

reverseString passes the userString into an empty array then using a decrementing for loop, it takes the userString, starting at the end of the string, taking into account the maximum length minus 1, and at each loop adds 1 until the index is greater than or equal to 0. So the revString would be the userString after being calculated by the index.

displayString

displayString uses revString to get the innerHTML for the "msg" Id and prints the revString message to the screen using template literal, then make it visible to the user by removing it from being invivible.