The Code

                        
function getValues(){
    // Grab the user's input
    let messageInput = document.getElementById("message").value;
    // Select the alertMessage div from the HTML
    let alertMessage = document.getElementById("alertMessage");
    // Set the display message and then display it, calling the 
    // rewind function in the process
    let outputMessage = displayMessage(messageInput, rewind(messageInput));
    alertMessage.innerHTML = outputMessage;

}
function rewind(string) {
    // Function to rewind the string
    let rewound = "";
    for (let i = string.length - 1; i >= 0; i--) {
        // Iterate backwards over the user's string 
        rewound += string[i];
        // Build out the reversed string one 
        // character at a time
    }
    return rewound;
    // Return the reversed string
}
function displayMessage(input, output) {
    // Take the user's input and the 
    // applet's output and display them
    document.getElementById("alertMessage").style.opacity = 1;
    // Make the alert box visible 
    let message = `<div>Your message, <i>${input}</i> reversed is <i>${output}</i></div>`
    // Build out the HTML to be displayed
    return message;
    // Give the HTML back to the original function
}
                        
                    

getValues

Here we take in the user's input and use it in the other functions that we call from here.

Rewind

In this function, we take the user's string and treat it like an array. We start from the final element, and walk backwards across it pushing each item to a new array which is the new, reversed string.

displayMessage

We start here by making the previously transparent alertMessage div visible to the user, then we build out the HTML to be displayed based on the user input and their reveresed string. Finally we return the constructed HTML back to the getValues function to be displayed.