REVERSE's Code:

                            
                                function getString() {
    
                                    let userInput = document.getElementById("userInput").value;
                                
                                    if(typeof userInput === "string") {
                                        let reversedString = reverseString(userInput);
                                        displayString(reversedString);
                                    } 
                                    else {
                                        alert("Error: Please enter a string");
                                    }
                                }
                                
                                function reverseString(userString) {
                                
                                    let reversedString = [];
                                
                                    for(let i = userString.length - 1; i >= 0; i--) {
                                        reversedString += userString[i];
                                    }
                                
                                    return reversedString;
                                    
                                }
                                
                                function displayString(reversedString) {
                                
                                    let templateRow = "";
                                    //note: html tags do not work well with prismjs, so I put spaces between them.
                                    templateRow += `< p >${reversedString}< p />`;
                                    
                                    document.getElementById("results").innerHTML = templateRow;
                                }
                            
                        

The Design:

To keep the code as clean as possible, the program is encapsulated into three functions:

• getString

This function acts as the main entry point for the program. It's task is to store the user input into a variable and validate that variable as a string. Once it passes validation it calls the reverseString function passing it the user input and storing the result in a reversedString variable. It then calls displayString and passes the reversedString as it's argument.

• reverseString

This function handles the main logic of the program. First, it creates a local array variable called reversedString. Next, there is a for loop starting at the length of the userString - 1 and decrementing by 1 until i goes below 0. Within this loop, the current character of the userString(going from last to first every iteration) is added to the reversedString array. Once the loop is finished the function returns the final reversedString variable.

• displayString

This function has a variable called templateRow which gets a template literal added onto it containing the reversedString argument. It then assigns the 'results' element innerHTML property to this templateRow variable.