//Get the 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 the 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 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.

getValues()

This is the entry point of the web application. It gets triggered via an event listener on the submit button of the app page. First it selects the alert div via an id and adds the class invisible to it, next it obtains the value of the string the user entered and stores it in a variable named userString, lastly it passes that variable to the reverseString function and stores that value in a new variable named revString which is then passed to the displayString function.

reverseString(userString)

The logic function responsible for reversing the string the user entered. First an empty string revString is declared as a container and using a decrementing for loop, beginning at the end of the userString, the characters are added backwards into the revString string. After the for loop terminates the function returns back the revString string which is what the user entered in reverse.

displayString(revString)

Responsible for displaying the reversed string and acts as the display or view function. First it selects the msg div and sets the innerHTML to a message containing the reversed string. Lastly it selects the alert div from earlier and removes the invisible class making it visible to the user.