The Code

                            
                                //get starting values from the screen
                                //Controller Function

                                function getString(){
                                    //get the user's input
                                    let userString = document.getElementById("message").value;
                                    //version 2 - test the user's input for length
                                    

                                    //Reverse the user's input - this is a separate function
                                    let revString = reverseString(userString);
                                    //Display the result - this is a separate function
                                    displayRetrograde(revString);
                                    
                                
                                }

                                //logic function
                                function reverseString(userString){
                                    let startValue = userString.length-1;
                                    let endValue = 0;
                                    let revString = "";
                                    //User input = Frank
                                    //Frank is a string AND an array of characters
                                    //In a decremented for loop the startValue must be higher than the endValue
                                    for (let index = startValue; index >= endValue; index--) {
                                        revString += userString[index];
                                        
                                    }
                                    return revString;
                                }
                                //display function
                                function displayRetrograde(revString){
                                    let output = document.getElementById("results");

                                    output.innerHTML = revString; // This replaces/overwrites the innerHTML with revString
                                }
                            
                        

The Code is structured in three functions

GetString

GetString is the controller function. It pulls the user's string from the UI.

When the user value is read, the functions ReverseString and DisplayRetrograde are run.

ReverseString

ReverseString is the logic function. It takes in the user input and runs it through a decrementing for loop. A startValue, endValue, and empty revString variable are initialized outside the loop.

RevString is updated to set it's index value to the inverse userString value. The reversed user string is returned by reverseString.

DisplayRetrograde

DisplayRetrograde is the display function. It takes in the revString.

It targets a paragraph with the id "results", and updates the innerHTML to output revString.