The Code

// get all the elements that we need
let stringInputField = document.getElementById("userString");

let messageElement = document.getElementById("message");

let alertElement = document.getElementById("alert");

// get the string from the input
function getValue() {

    alertElement.classList.add("invisible");

    let userInput = stringInputField.value;

    if (!userInput) {
        messageElement.innerHTML =
            `
                You must enter a string to reverse...
            `;

        alertElement.classList.remove("invisible");

    } else {
        let invertString = reverseString(userInput);
        displayString(userInput, invertString);
    }

}


// reverse the string
function reverseString(stringToReverse) {
    let reversedString = [];

    for (let i = stringToReverse.length - 1; i >= 0; i--) {
        reversedString += stringToReverse[i];
    }

    return reversedString.toString();
}


// display the reverse string
function displayString(userInput, invertString) {

    // write to the page
    messageElement.innerHTML =
        `
            Original text : ${userInput}

            Inverted text : ${invertString}
        `;

    // show the alert box
    alertElement.classList.remove("invisible");
}

document.getElementById("btnSubmit").addEventListener("click", getValue);

// in case we press enter
document.getElementById("reverseForm").addEventListener("submit", e => {
    e.preventDefault();
    getValue();

    // reset the input to an empty string
    document.getElementById("userString").value = ""
})
The Code is structured in three functions
getValue

This is the main function that in wich we remove the class .invisible from the .alert div. After, we get the value from the input with the id #userString and save it to a variable.
After we get the value, we use a if statement to check if the string is empty. If we see that it is empty, we post a message asking the user to enter a string, after wich we remove the .invisible class from the .alert div.
If not, we rerverse it using the reverseString function and save it to another variable. In the end, we call displayString function in order to render the result to the page.

reverseString

First, we create a new empty array. After, we use a for loop to loop through stringToReverse variable starting from the last char and adding it as the first element of our array.
In the end, we return the reversedString array as a new string, using the .toString method.

displayString

First, we get the element with the #message id and we use the .innerHTML property and the template string to add the invertedString to the page.
Lastly, we get the element with the #alert id, and using the .classList property and the .remove method to get rid of the .invisible class in order to make the element visible.

We add a eventListener to the button with the #btnSubmit id in which we call the getValue function

We add a eventListener to the form with the #reverseForm id in which we take an e parameter wich points to the event that has taken place. Then using the e parameter, we call the .preventDefault method that prevents the form to take its default actions, and then we call the getValue function.
Finally, we reset the input.