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

The Code is structured in three functions to seperate the controller, the logic and the display.

Functions

getValues()

getValues begins by checking that an alert is set to invisible. Utilizing getElementById, getValue pulls the user input from the page and stores it in the userString variable. The userString value is passed to the reverseString function. The function reverseString returns an array with the reversed string which is passed to the displayString function to be displayed to the user.

greverseString()

reverseString takes the variable revString, created in the getValues function and uses it to hold an array. A for loop is used to reverse the string stored in userString and returns the reversed string to the getValues function.

displayString()

displayString removes the invisible designation from the alert. A template literal is used to display the reversed string in the alert box to the user.