The Code

                        
                            // controller
                            function getValues() {
                                let inputString = document.getElementById('userString').value;
                            
                                let reversedString = reverseAString(inputString);
                            
                                displayString(reversedString);
                            }
                            
                            // logic function
                            // reverse a string
                            function reverseAString(userString) {
                                let revString = '';
                            
                                for(let i = userString.length - 1; i >= 0; i = i - 1) {
                                    revString += userString[i];
                                }
                            
                                return revString;
                            }
                            
                            // view function
                            function displayString(revString) {
                                document.getElementById('results').textContent = revString;
                                document.getElementById('alert').classList.remove('invisible');
                            }
                        
                    

The code is structured in three functions:

function getValues()

This function takes the string input from an HTML form element with the ID 'userString', reverse it using a helper function called reverseAString(), and then displays the reversed string using another helper function called displayString().

function reverseAString()

This function takes in a parameter userString, and creates a new empty string called revString. It then loops through each character of userString in reverse order, starting from the last character and adding it to the revString. Once the loop has finished, revString contains the reversed version of userString and is returned.

function displayString()

This function takes the reversed string returned from reverseAString(), and sets the text content of an HTML element with the ID 'results' to the reversed string. It also removes a CSS class called 'invisible' from an HTML element with the ID 'alert', which presumably is used to display a success message to the user.