//Get the string/value from the page
//Controller function
function getString() {
  document.getElementById('alert').classList.add('invisible')

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

  let revString = reverseString(userString)

  displayString(revString)
}

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

  //reverse a string using a decrementing for loop
  for (let index = userString.length - 1; index >= 0; index--) {
    //add to revString on every iteration
    revString += userString[index]
  }

  //give back to getString
  return revString
}

//Display the message with the reversed string to the user
//View function
function displayString(revString) {
  //write to the page
  document.getElementById(
    'userMessage'
  ).innerHTML = `Your string reversed is: ${revString}`
  //show the alert box
  document.getElementById('alert').classList.remove('invisible')
}

            

The code is structured in three functions.

Get String

The getString function is used as my controller function, getting the user inputted value from the document/HTML and handing that to the reverseString function via parameters. The reversed string is then returned to it inside an array and handed off to the displayString function by calling with the revString parameter.

Reverse String

The reverseString function is my logic function, getting the users inputted string from getString and using a decrementing for loop to reverse that string. The index (a single character in the string) is added to an empty array upon every iteration. The array (revString) then returns the now complete reversed string back to getString.

Display String

My final function gets handed the revString array and uses this to to display the correct reversed string to the user. A template literal is used to add the message to the correct place in the document and an invisible class is removed from the alert box to finally display the final message.