//get user input
    function getValue(){
        //make alert box invisible to start
        document.getElementById("alert").classList.add("invisible");
        //get user string from the page
        let userString = document.getElementById("userString").value;
    
        //check for a palindrome
        let returnObj = checkForPalindrome(userString);
    
        //display message to screen
        displayMessage(returnObj);
    }
    //check if string is a palindrome
    function checkForPalindrome(userString){
    
        //make all lower case
        userString = userString.toLowerCase();
    
        //remove spaces and special characters
        let regex = /[^a-z0-9]/gi;
        //replace special characters with empty string
        userString = userString.replace(regex,"");
    
        //reverse the string with for loop
        let revString = [];
        let returnObj = {};
    
        for (let index = userString.length - 1; index >= 0; index--) {
            revString += userString[index]; 
        }
    
        if (revString == userString) {
            returnObj.msg = "Well done! You entered a Palindrome!"
        }
    
        else{
            returnObj.msg = "Sorry! You did not enter a Palindrome!"
        }
    
        returnObj.reversed = revString;
    
        return returnObj;
    
    }
    //displat a message to the screen
    function displayMessage(returnObj){
    
        document.getElementById("alertHeader").innerHTML = returnObj.msg;
        document.getElementById("msg").innerHTML = `Your string reversed is: ${returnObj.reversed}`;
        document.getElementById("alert").classList.remove("invisible");
    }

The Code is structured in three functions to seperate the controller, the logic and the display.

Functions

getValues()

Resets the results box by adding invisible class. Sets userString variable as value of input box. Passes input to checkForPalindrome() then returns the result via the displayMessage() function.

checkForPalindrome()

Transforms text to lowercase and removes any special characters. Creates an empty array and object for returning values. The function then reverse loops through the user input and compares it with the initial input, returning a message depending on the result.

displayMessage()

Passes the user input result and the return message to the hidden HTML, removing the invisible class to display the alert message.