What makes this olive so evil?


                            //Get user input -- CONTROLLER FUNCTION
function getValue() {

    //Ensures that the class properties of target element are read 
    //first so that they are applied when the page loads.
    document.getElementById("alert").classList.add("invisible")

    //Reads user input from the field on the web page. Removes
    //capitalization for easier readability.
    let userString = document.getElementById("userString").value.toLowerCase();

    //Removes punctuation
    let regex = /[^a-zA-Z0-9]/gi;
    userString = userString.replace(regex, "");

    //Reverses the user input
    let revString = reverseString(userString);

    //Displays what the user typed, but backward.
    displayString(revString);
}

//Reverse the string -- LOGIC FUNCTION
function reverseString(userString) {

    //Defines revString as an array, which gives the ability to assign
    //array functionality to the characters the user entered.    
    let revString = [];

    //As a string is also an array, and arrays have numerical indices,
    //a for loop can be used to read and then reverse those indices.
    //To determine the last position in an array with an unknown number of
    //characters, use userString.length - 1.
    for (let index = userString.length - 1; index >= 0; index--) {
        revString += userString[index];
    }

    return revString;

}

//Display the reversed user input -- VIEW FUNCTION
function displayString(revString) {

    //Writes a message that will be seen by the user on the app page.
    document.getElementById("alert").innerHTML = `When reversed, your phrase is: ${revString}`;

    //The alert that was made invisible in line 6 above now needs to 
    //be made visible again. Specify the specific classList to remove
    //by using .remove followed by parentheses containing the name of the 
    //class you wish to eliminate contained in quotation marks.
    document.getElementById("alert").classList.remove("invisible");

}

The JavaScript code at left contains three basic segments:

- Controller Function

- Logic Function

- View Function

The controller function lays the foundation for the JavaScript behavior. The text that the user submits is examined for punctuational characters and those characters are summarily removed; this is handled by way of the regex variable declaration. This makes the phrase that was entered more readable upon its reversal. Capitalization is also eliminated for this same reason, and this is performed by value.toLowerCase within the userString variable declaration. Finally, user input is reversed via the revString variable declaration, and displayed using displayString(revString).

The logic function handles the reversal of the user input. The reverseString function is defined first so that it can hold both a variable and a for loop. The variable converts the user's input from a string to an array, which is done so that numerical indices can be assigned to whatever characters the user may decide to type. It is necessary to do this because there is no way to know in advance if the user is going to type 3 characters or 30. But if the characters are instead identified by numerical values, it is far easier to create instruction within JavaScript that reverses those numerical values simply by counting down from the largest one within the array.

The last segment contains the code that makes up the view function. The instructions here simply call on the revString variable that was declared in the controller function above, and then writes the now-reversed user input into an alert that was heretofore set to a hidden value. The hidden value was definied via the addition of a classList of "invisible" that has now been removed. The user is now able to see the previously hidden text, which displays back to them the text that they entered, only now in reverse.