//Get the string from the page
  //controller function
  const getValue = () => {
    document.getElementById('alert').classList.add('invisible');
    let userString = document.getElementById('userString').value;
    let revString = reverseString(userString);
    displayString(revString);
  };

  //Reverse the string
  //logic function
  const reverseString = (userString) => {
    let revString = [];

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

    return revString;
  };

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


                
            

REWIND is structured into three Javascript functions.

getValue

The first function, "getValue" pulls the entered string from the page and acts as the controller function. The function manipulates the Document Object Model (DOM) by taking in the 'alert' and 'invisible' attributes. The "userString" and "revString" variables are declared in this function.

reverseString

The "reverseString" function contains the app's logic and reverses the user's inputted string. The "revString" variable declares an empty array. A decrementing for loop begins the index count at the end of the string by assigning the start point with "userSTring.length - 1". The indices are walked through in reverse one at a time with "i--".

displayString

The "displayString" function displays the result of the completed function. The reversed string (revString), 'alert' and 'invisible' attributes are all called to display on the page with the button click.