The Code

                    
                        //entry point
                        function getValues(){
                            let userString = document.getElementById("userString").value;
                            let revString = reverseString(userString);
                            displayString(revString);
                        }
                        
                        //logic
                        function reverseString(userString){
                            let revString = '';
                             for (let index = userString.length-1; index >= 0; index--) {
                                 revString+= userString[index];         
                             }
                             return(revString);
                        }
                        
                        //display
                        function displayString(revString){
                            document.getElementById('results').textContent = revString;
                            let alertBox = document.getElementById('alert');
                            alertBox.classList.remove('invisible');
                        
                        }                        
                    
                

There are three functions in this code. The first function retrieves the values from user inputs runs the other two functions.

The second function takes the input from the user and using a decrimenting for loop reverses it. It is able to do this becasue a string is a defined array. It then returns the reversed string to the first function.

The code then takes the reversed string from the previous function and sets that as the HTML element 'results'. It then removes the 'invisible' class from the alert box making it visible.