The Code

JavaScript

    //start/main/controller function
    function palindrome() {
        let palindromeString = `not set`;
        let uString = getValues();
        let rString = reverseString();
        if (rString == uString) {
            palindromeString = 
                `<i class="fas fa-check" style="color: green; font-size="larger;"></i>   
                ${reverseString()}
                 IS a palindrome of 
                ${getValues()}
                   <i class="fas fa-check" style="color: green; font-size="larger;"></i>`;
        }
        else {
            palindromeString = 
                `<i class="fa-solid fa-x" style="color: red; font-size="larger;></i>   
                ${reverseString()}
                 is NOT a palindrome of ${getValues()}
                   <i class="fa-solid fa-x" style="color: red; font-size="larger;></i>`;
        };
        displayString(palindromeString);
    }
    
    //get the value from the page
    function getValues() {
        document.getElementById("alert").classList.add("invisible");
        let userString = document.getElementById("userString").value.toLowerCase();
        let regex = /[^a-z0-9]/gi;
        userString = userString.replace(regex, ``);
        return userString;
    }
    
    //logic function
    function reverseString() {
        //reverse the string    
        let uString = getValues();
        
        let revString = [];
        //reverse the string using a for loop  
        for (let index = uString.length - 1; index >= 0; index--) {
            revString += uString[index];
        }
        return revString;
    }
    
    //view function
    function displayString(palindromeString) {
        //display the reversed string   
        document.getElementById("msg").innerHTML = `${palindromeString}`;
        document.getElementById("alert").classList.remove("invisible");
    }
    

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

An explanation:

The code is structured in 3 parts:

palindrome()

Upon the button click, palindrome prepares the algorithm to determine whether a string is a palindrome or not.
But first, it calls getValues and reverseString.
After processing, it returns palindromeString

getValues()

When getValues is called, primarily it reads the input from the page, drops everything to lowercase and, via regex, removes special characters; returning userString.
It also sets up the default alert behavior.

reverseString()

reverseString takes userString and reverses it.
It then returns revString to be compared to userString in the palindrome function.

displayString()

displayString sends palindromeString back to the page's 'msg' element.
The behavior of the alert is set to visible, thus displaying the result.

This code is linear and so completes without interaction beyond the button click.