// controller function
const getValues = () => {
  // get the user's input
  let userInput = document.getElementById("message").value;
  // send it through the reversed string function
  let reversedInput = reverseString(userInput);

  displayString(reversedInput);
}

// business logic
const reverseString = (message) => {
  // declare empty string
  let output = '';

  for (let i = message.length - 1; i >= 0; i--) {
    output += message[i];
  }
  // iterate over current string
  return output;
}

// view function
const displayString = (reversedMessage) => {
  // display string on the page 
  document.getElementById("msg").textContent = reversedMessage;
  document.getElementById("alert").classList.remove('d-none');
}


            
          

There are three key functions that make this program run properly:

getValues

This function searches our HTML by ID for the corresponding value that the user enters.

reverseString

This function will take our entered string and iterate over it backwards. An empty variable called "output" is declared first, and then the loop adds each new character to output starting last to first.

displayString

This function is simply here to show off the output onto the website for the user. It looks for a labeled space to send the text and pastes the variable as a string of text.

Together, these functions keep each piece of complexity separate, so that it is easy to read, understand, and manipulate.