//Get values from the HTML, reverse the message and then display.
function getValue(){
    let message = document.getElementById("message").value;
    let revMessage = reverse(message);
    displayMessage(message, revMessage);

}
//Return the reversed string.
function reverse(message){
    let revMessage = "";
    //decrementing for loop
    for (let i = message.length-1; i >= 0; i--){
        revMessage += message[i];
    }
    return revMessage;
}
//Input the message and reversed message.
//Compare the two and display the results.
function displayMessage(message, revMessage){
    message = message.toLowerCase();
    message = message.replace(/[^a-z0-9]/g, "");
    revMessage = revMessage.toLowerCase();
    revMessage = revMessage.replace(/[^a-z0-9]/g, "");

    results.innerHTML = '';
    let h3 = document.createElement("h3");
    if (message === revMessage){
        h3.classList.add("bg-success", "text-center");
        h3.innerHTML = ("Palindrome!");
    } else {
        h3.classList.add("bg-danger", "text-center");
        h3.innerHTML = ("NOT a Palindrome!");
    }
    document.getElementById("results").appendChild(h3);
}