//Get String from the page
                    //controller function
                    function getValues(){
                    
                        document.getElementById("alert").classList.add("invisible");
                    
                       let userString = document.getElementById("userString").value;
                    
                       let revString = reverseString(userString);
                    
                       displayString(revString);
                    }
                    
                    //Reverse String
                    //logic function
                    function reverseString(userString){
                    
                        let revString = [];
                        
                        //reverse a String using a for loop
                        for (let index = userString.length-1; index >= 0; index--) {
                          revString += userString[index]; 
                        }
                    
                        return revString;
                    }
                    
                    //Display reversed String to the user 
                    //view function 
                    function displayString(revString){
                    
                        //write the message to the page
                        document.getElementById("msg").innerHTML = `Your string reversed is: ${revString}`;
                    
                        //turn on the alert box 
                        document.getElementById("alert").classList.remove("invisible");
                    }
                    
                

The Code is structured in three functions.

Rewind

Rewind is a set of functions that reverses an input String.

The getValues function checks that the alert is set to 'invisible' at the start. Then it retrieves the value of the users inputed string. Next, it calls revString to reverse the given string and, finally, it calls displayString to display the reversed string to the user.

The reverseString function uses a for loop to create a new string with the characters from the original string in reverse order. It then returns the reversed string.

The displayString function uses a template literal to display the reversed string to the user. I removes the 'invisible' designation from the alert, so the user sees the alert and the reversed string.