The Code

//Entry point AKA Controller
function getValues() {
    let inputString = document.getElementById('userString').value;

    let reversedString = reverseAString(inputString);

    displayString(reversedString);

}

//Logic Function
//Reverse the String
function reverseAString(userString) {
    let revString = '';

    // reverse the string
    for (let i = userString.length - 1; i >= 0; i = i - 1) { // starting value, condition
        revString += userString[i];
    }

    return revString;

}

//View Function
function displayString(revString) {

    document.getElementById('results').textContent = revString;
    document.getElementById('alert').classList.remove('invisible');

}
JavaScript

The code is structured in three functions

function getValues()

This function fetches the user's input.

function reverseAString()

This function takes the user's input gathered in the previous function and uses a for loop to reverse the string.

function displayResults()

This function displays the reversed string on the page for the user to see. It also removes the invisible class from the alert so that the information will be displayed on the page nicely.