The Code

//entry point
function getUserInput() {
    let userInput = document.getElementById('userString').value;

    let trimmedText = regularExpression(userInput);

    let revString = reverseTheString(trimmedText);

    PalindromeeChecker(trimmedText, revString);
}






//this function takes the user input and trmis off any non alphabet characters and all whitespace then returns the trimmed string back to entry point function
function regularExpression(stringToTrim) {

    let txt_new = stringToTrim.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();

    console.log(stringToTrim);

    return txt_new;

}

//this function takes the string that was trimmed by the regular expression function and reverses the string
function reverseTheString(string) {

    let startingArray = string.split('');

    let reverseArray = [];

    for (let i = 0; i < startingArray.length; i++) {

        reverseArray.unshift(startingArray[i]);
    }
    return reverseArray.join('');
}

//Palindrome Verifier Function

function PalindromeChecker(stringToCheck, reversedString) {

    let message = `Your phrase reversed is ${reversedString}`

    let messageSpot = document.getElementById('resultsGood');

    if (stringToCheck !== reversedString) {

        document.getElementById('alertBad').classList.remove('invisible');
    } else {

        document.getElementById('alertGood').classList.remove('invisible');

    }

    messageSpot.innerHTML = message;
}

The code is structured in four function

`getUserInput()`

This function serves as the controller or entry point function. It is responsible for retreiving the user input from the web page. It also creates variables from the return functions of the other three functions. It also passes all the parameters to the other three functions.

`regularExpression()`

This function is responsible for taking the user input passed by the first function and (via a regular expression) replaces (via 'replace method') all non alphabet characters with nothing, essentially deleting it. It then forces all the characters remaining to become lowercase. It then returns the 'trimmed' string back to the controller function.

`reverseTheString()`

This function is responsible for taking the string that was 'trimmed' by the regular expression and reversing that string and assigning it to a new variable called 'reverseArray'. The reversed string is then retruned to the controller function.

`PalindromeChecker()`

This final function is responsible for taking the string processed by the regular expression as well as the reversement of that string and comparing them to each other with an if statement thereby checking to see if its a palindrome. Via an if statement you will receive a red "not a palindrome" message or a green successful message. This function, in addition to displaying the failure and success cards, also displays the reversed version of the original phrase you entered.