The Code

JavaScript

        
    function getValues(){
        let userString = document.getElementById("userString").value;
    
        //check palindrome
        let returnObject = checkForPalindrome(userString);
    
        //display message
        displayMessage(returnObject);
    }
    
    function checkForPalindrome(userString){    
        userString = userString.toLowerCase();
    
        let regex = /[^a-z0-9]/gi;
    
        userString = userString.replace(regex,"");
    
        let revString = [];
        let returnObject = {};
    
        for (let i = userString.length -1; i >= 0; i--){
            revString += userString[i];
        }
    
        if (revString == userString){
            let check = 
            `<i class="fas fa-check" style="color: green; font-size="larger;"></i>`;
            returnObject.header = `${check}     PALINDROME DETECTED!     ${check}`;
            returnObject.msg = ` IS a palindrome of `
    
        }
        else{
            let xMark = 
            `<i class="fa-solid fa-x" style="color: red; font-size="larger;></i>`;
            returnObject.header = `${xMark}     no palindrome found     ${xMark}`;
            returnObject.msg = ` is NOT palindrome of `
        }
    
        returnObject.original = userString;
        returnObject.reversed = revString;
    
        return returnObject;
    }
    
    function displayMessage(returnObject){
        document.getElementById("alertHeader").innerHTML = returnObject.header;
        document.getElementById("msg").innerHTML = 
        `<strong>${returnObject.reversed}</strong>
        ${returnObject.msg} 
        <strong>${returnObject.original}</strong>`;
        document.getElementById("alert").classList.remove("invisible");
    }
    

This code displays without error thanks to: https://tohtml.com

An explanation:

The code is structured into 3 functions:

getValues()

This function initializes the program using 3 statements:

1. grab the user's input from the page
2. create the object we'll be using in the code
3. call the display message when it is time

checkForPalindrome()

The algorithm:

1. set userString to Lower Case characters
2. set a regex (regular expressions) string
3. set userString to omit unwanted characters
4. intialize an array: revString
5. initialize an object to be returned: returnObject
6. decrementally iterate through the userString
1. quasi append [i] to revString
7. if statement:
1. if palindrome, set strings on object one way
2. if not, set strings on object another way
8. set userString and revString to be properties of returnObject
9. return the returnObject for use in another function

displayMessage()

This function uses 3 statements to get the output on the page:

1. pass data to the page for the alert header
1. alertHeader is set with value from returnObject: check or x-mark
2. pass data to the page for the alert message
1. msg is set 'returnObject.reversed' + 'returnObject.msg' + 'returnObject.original'
2. programmatically sets "IS" or "is NOT" to the alert message and sticks it between the original and reversed sets of characters
3. reveal the alert