The Code

                    
                        function getValues() {
                            let inputString = document.getElementById('inputString').value;
                            let stringResult = reverseString(inputString);
                            displayString(stringResult);
                        }
                    
                

                    
                        function reverseString(inputString){    
                            let result= '';
                            for (let i = inputString.length-1;i >= 0;i--) result += inputString[i];
                            return result;
                        }
                    
                

                    
                        function displayString(stringResult) {    
                            document.getElementById('alert').classList.remove('invisible');
                            document.getElementById('msg').innerHTML =`your string as been reversed to ${stringResult}`; 
                        }
                    
                

Code Functions:

getValues()

reverseString()

displayString()

Bonus:

Display messages:

sweetAlerts()

Entry Point - getValues()

The getValues function is called when the user selects the submit button. The function will grab the value of the input and add that to a variable. That variable will then be passed to reverseString to be reversed.

Reverses the String - reverseString()

The getValues function takes a value from getValues and build a new string by looping backwords over the input and setting each character in the new string to the opposite index of the original. It will then return the newly created string back to getValues to be passes as a parameter to displayString.

Displays to UI - displayString()

The displayString function takes the new string and changes the html of sweetAlerts and displays it to the UI with the new string.