getValue is the controller function. It gets the string entered by the user, then calls the logic function reverseString, and finally calls the displayString function.

______________________________________

reverseString is the logic function. It reverses the string using a backwards for loop

______________________________________

displayString displays the reversed string back to the user

//Get the value from the string
function getValue() {
  document.getElementById("alert").classList.add("invisible")

  let userString = document.getElementById("userString").value

  let reversedString = reverseString(userString)

  displayString(reversedString)
}

//Reverse the string
function reverseString(userString) {
  let revString = []

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

  return revString
}

//Display the message with the reversed string
function displayString(revString) {
  document.getElementById("msg").innerHTML = `Your string reversed is: ${revString}`

  document.getElementById("alert").classList.remove("invisible")
}