//control function
function getValue() {
    let message = document.getElementById("message").value;
    let revMessage = reverse(message);
    displayMessage(message, revMessage);
}


//buisness logic
function reverse(message) {

    //string an array of characters  with index and values
    let reversedMesssage = "";

    //decrementing for loop
    for (let index = message.length-1; index >= 0; index--) {

        reversedMesssage += message[index];
    }
    return reversedMesssage;
}

function displayMessage(message, revMessage) {

    let div= document.createElement("div")
    
    let newMessage = message.replace(/\s/g, "");
    let newRevMessage = revMessage.replace(/\s/g, "");

        if(newMessage.toLowerCase() === newRevMessage.toLowerCase()){
        
            results.innerHTML = "Yes, This is a palindrome.";
            results.classList.add("success");
        
        } else {
        
            results.innerHTML = "No, This is not a palindrome.";
            results.classList.add("fail");
    }
    results.appendChild(div);
        
}

                        
                    

The Code is structured in three functions

"getValue"

This is the control function. It takes the string from the input in the HTML page and gives it a variable name. It then passes that string to the logic function.

"reverse"

This function takes the values of the string and palces it into an arry with no spaces using a for loop and a regex. The arrys are then sent to the display function.

"displayMessage"

This function takes both arry's (forwards and backwards) are then converted to lower case and if they are the same it returns one message. And if they are not equal it returns another.