// Get the string from the 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 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: <strong> ${revString} </strong>`;

    // show the alert box
    document.getElementById('alert').classList.remove('invisible');
}

The Code is structured in several functions.

getValue

Gets the user input string

reverseString

Creates an array of string characters in reverse from the user input string.

displayString

Displays the reversed string to user in an alert box.