//Get the string from the page
//Controller function
function getValues() {

    document.getElementById("alert").classList.add("invisible");

    //Get string from page
    let userString = document.getElementById("userString").value;
    let revString = reverseString(userString);

    displayString(revString);

}

//Reverse the string
//Logic function
function reverseString(userString) {

    let revString = [];

    //let name = Bobby
    //name[0] = "B";
    // name[4] = "y";
    // last position in an array name.length - 1;
    
    //reverse a string using a for loop
    for (let index = userString.length - 1; index >= 0; index--) {

        revString += userString[index];
        
    }
    return revString;
}

//Display the reversed string to the user
//View function
function displayString(revString) {

    //write the message to the page
    document.getElementById("msg").innerHTML = `Your string reversed is: ${revString}`; 

    //turn on the alert box
    document.getElementById("alert").classList.remove("invisible");
}
                
                

Code explaination to the Rewind Project

getValues Function

This sets the alert from html to invisible because I only want it to appear when the button is clicked so it has to be invisible until called. Next, I call the userString value from the html because that is the string that will be reversed. Then, I set the var revString equal to the reverseString(userString) function so I can call it in that function. If I didn't do this then userString could not be used in the reverseString function. Lastly, I call the function displayString(revString).

reverseString Function

I first start out in this function with a paramater of userString so I can use that var inside this function The first var of revString is set to an empty array because an array is going to be used to reverse the string. Then I used a for loop and set the index equal to the length of the userString (the input value) - 1 because in an array the first char is 0 so if there is 5 letters in the string the last letter would be a value of 4. So if the index is great than or equal to 0 then the index--. So then I needed to have revString += to the userString[index] (the outcome of the for loop) then I returned the value of the revString.

displayString Function

I first start out in this function with a paramter of reString because I need to be able to use that var in this function. I then had to get the p tag with an id of msg from the html because that is where im going to display the reversed string so I used a template literal to display revString so it will simply change as the var value changes. Last, I had to make the alert that I made insivible in the first function be visible because we now want to display it.