The Code

                
                    //Entry point AKA Controller
                    function getValues() {
                        let inputString = document.getElementById('userString').value;
                    
                        let reversedString = reverseAString(inputString);
                    
                        displayString(reversedString);
                    
                    }
                    
                    //Logic Function
                    //Reverse the String
                    function reverseAString(userString) {
                        let revString = '';
                    
                        // reverse the string
                        for (let i = userString.length - 1; i >= 0; i = i - 1) { // starting value, condition 
                            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 fetches the user's input.

function reverseAString()

This function takes the user's input gathered in the previous function and uses a for loop to reverse the string.

function displayResults()

This function displays the reversed string on the page for the user to see. It also removes the invisible class from the alert so that the information will be displayed on the page nicely.