The Code

                    
                        function getValues() {

                            let userString = document.getElementById('userString').value;
                        
                            let revString = reverseString(userString);
                        
                            displayString(revString);
                        
                        }
                        
                        function reverseString(input) {
                        
                           let revString = '';
                        
                            for (let index = input.length - 1; index >= 0; index = index - 1) {
                        
                                let letter = input[index];
                        
                                revString = revString + letter;
                            }
                        
                            
                        
                            return revString;
                        }
                        
                        function displayString(output) {
                        
                            document.getElementById('results').textContent = output;
                        
                            let alertBox = document.getElementById('alert');
                        
                            alertBox.classList.remove('invisible');
                        
                        }
                    
                

The code is structured in three functions

How it Works:

The getValues function grabs the input value that the user has entered into the field. Then, we have created the variable revString and set it to equal the result of the second function reverseString. Finally, we have called back the third function displayString so it can display our results. The second function, reverseString uses a for loop that starts at the end of the array (in this case the array is just the string of text the user has entered on the page) and pulls out each individual character one at a time. Then, it reassembles the array, which is now in reverse, and returns that information to the getValuesfunction. The third function, displayString, finds the results id in the HTML, removes the invisible class from the alert box and allows the information to be displayed on the page.