The Code

function getValues(){
    // Grab User Input and assign it to variables for later use
    let messageInput = document.getElementById("message").value;
    let alertMessage = document.getElementById("alertMessage");
    // Assign rewound to be the users input backwards
    let rewound = rewind(messageInput)
    let outputMessage = displayResults(messageInput, rewound, palindromeChecker(messageInput, rewound));
    // Send data to the output message for the user to see
    alertMessage.innerHTML = outputMessage;

}
function rewind(string) {
    // Basic array reversal function
    let rewound = "";
    for (let i = string.length - 1; i >= 0; i--) {
        // Iterate over the string backwards and push to a new array
        rewound += string[i];
    }
    return rewound;
}
function palindromeChecker(input, rewound) {
    // Check the input against the flipped version
    // This is a regex filter to clear any punctuation and whitespace from the string
    let cleaner = /[^a-z0-9]/gi;
    // These next two lines normalize the text using the above
    // regex and by making all letters lowercase
    let inputClean = input.replace(cleaner, "").toLowerCase();
    let rewoundClean = rewound.replace(cleaner, "").toLowerCase();
    // Finally check if the cleaned input is the cleaned output
    return (inputClean == rewoundClean);
}

function displayResults(input, output, palindrome) {
    // Take the users input, flipped input, and whether it's
    // a palindrome or not, and then return a message
    // Make the alert box visible to the user
    document.getElementById("alertMessage").style.opacity = 1;
    // Use a ternary operator to swap between
    // congratulations and consolation
    let result = palindrome ? "Which is in fact a palindrome, congratulations!" : "Which I'm sorry to say isn't a palindrome"
    // Build out the HTML to be displayed
    let message = `<div>Your message, <i>${input}</i> reversed is <i>${output}</i><br>${result}</div>`
    // Change alert colors based on success or failure
    if (palindrome) {
        document.getElementById("alertMessage").classList.add("alert-success")
        document.getElementById("alertMessage").classList.remove("alert-danger")
    } else {
        document.getElementById("alertMessage").classList.add("alert-danger")
        document.getElementById("alertMessage").classList.remove("alert-success")
    }
    return message;
}