The Code

                    
function getValues() {
let userInput = document.getElementById('message').value;

let reversedInput = reverseString(userInput);

displayString(reversedInput);

}

function reverseString(message) {
  let reversedMessage = '';

for (let index = message.length - 1; index >= 0; index--) {
  reversedMessage += message[index];
}
  return reversedMessage;
}

function displayString(reversedMessage) {
  document.getElementById('msg').textContent = reversedMessage;
  document.getElementById('alert').classList.remove('d-none');
}
                    
                

Explanation:

getValues function is the entry point, AKA the controller function of the js file. Its purpose is to get the user input.

reverseString function is considered the logic of the function and incorporates a 'For' Javascript loop. It translates as follows: Let the index be assigned as the last value of the length of parameter message (message.length - 1). Normally we assign it as 0 since we usually start with the first value, but since we are reversing the string, we are doing this in an opposite fashion. The loop will continue until index is greater than or = to 0, since 0 would be our first value of the string. The final portion of the for loop statment includes the decrementer, index = index - 1, or index--.

displayString function places the results on the page for the user to see the reversed message.