// Get user input
function getValues(){

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

    //get user string from page
    let userString = document.getElementById("userString").value;

    // check for a palindrome
    let returnObj = checkForPalindrome(userString);

    // display our message to the screen
    displayMessage(returnObj);
}

// check if string is a palindrome
function checkForPalindrome(userString){

    // need to remove all special characters and convert all char to lower case for comparison

    // convert to lowercase
    userString = userString.toLowerCase();

    // remove spaces and special characters
    let regex = /[^a-z0-9]/gi;
    userString = userString.replace(regex,"");

    let revString = [];
    let returnObj = {};

    // build the reverse string
    for(let i = userString.length - 1; i >= 0; i--){
        revString += userString[i];
    }

    // if the reverse string is the same as userstring it is a palindrome
    if(revString == userString){

        // set the msg, and also change classes to alter color of alert box to green
        returnObj.msg = "Well Done! You entered a Palindrome!"
        document.getElementById("alert").classList.add("alert-success");
        document.getElementById("alert").classList.remove("alert-danger");
        document.getElementById("msg").classList.remove("redText");
        document.getElementById("msg").classList.add("greenText");
        document.getElementById("alertHeader").classList.remove("redText");
        document.getElementById("alertHeader").classList.add("greenText");
        
    }
    else{

        // set the msg, and also change classes to alter color of alert box to red
        returnObj.msg = "Sorry! You did not enter a Palindrome!"
        document.getElementById("alert").classList.remove("alert-success");
        document.getElementById("alert").classList.add("alert-danger");
        document.getElementById("msg").classList.remove("greenText");
        document.getElementById("msg").classList.add("redText");
        document.getElementById("alertHeader").classList.remove("greenText");
        document.getElementById("alertHeader").classList.add("redText");
    }

    returnObj.reversed = revString;

    return returnObj;

}

// display a message to the user
function displayMessage(returnObj){

    // display the resulting info to the user
    document.getElementById("alertHeader").innerHTML = returnObj.msg;
    document.getElementById("msg").innerHTML = `Your phrase reversed is ${returnObj.reversed}`
    document.getElementById("alert").classList.remove("invisible");

}
                    
                    

The Code is structured in three functions.

getValues()

getValues is a controller function that gets the string value from the user and passes the string to the checkForPalindrome() function. That function returns an object which contains info on if the string is a palindrome or not, and that is then sent to the displayMessage() function.

checkForPalindrome()

checkForPalindrome is a logic function that receives a string, and then creates a reversed version of it. It then compares those two strings to see if they are the same. If they are, we have a palindrome, and return an object stating this information as well as the reversed string. If not, we return an object stating the opposite. We also adjust the alert color based on the results.

displayString()

displayString is a display function that receives the object containing the palindrome message as well as the reversed string, and use that to display the resulting information to the user.