code

// controller function
function getValues() {
    let inputString = document.getElementById('reverse').value;

    let newString = inputString.replace(/[^\w]/gi,'').toLowerCase();

    let bool = checkForPalindrome(newString);
    displayResults(bool);

}

// logic function
function checkForPalindrome(userString) {

    let firstHalf = '';
    let secondHalf = '';


    for (let i = 0, j = userString.length - 1; i < j; i++, j--) {

        firstHalf += userString[i];

        secondHalf += userString[j];
    }

    if (firstHalf == secondHalf) {
        return true
    } else {
        return false
    }
}

// view function
function displayResults(bool) {

    let pass = "Hey look, that's a palindrome!";
    let fail = "Nope, no palindromes here.";

    document.getElementById('alert').classList.remove('invisible');

    if (bool == true) {
        document.getElementById('alert-heading').innerHTML = pass;
        document.getElementById('alert').classList.remove('alert-danger');
        document.getElementById('alert').classList.add('alert-info');
    } else if (bool == false) {
        document.getElementById('alert-heading').innerHTML = fail;
        document.getElementById('alert').classList.remove('alert-info');
        document.getElementById('alert').classList.add('alert-danger');
    }

}

The code is structured in three functions:

getValues()

This function gets the user input string and uses a regex to remove all punctuation and spaces, as well as convert it to lowercase. Then it passes this modified string as a parameter to the next function:

checkForPalindrome()

This functions uses a for loop with two different variables, to increment from both the beginning and end of the string at the same time, adding each new character to strings firstHalf and secondHalf. It then compares those two variables and returns either true or false depending on whether or not they match. Either way, this boolean value is passed as a parameter to the final function:

displayResults()

This function simply assigns a message to the alert depending on whether the string was a palindrome or not, and assigns one of two CSS classes to the alert to reflect that.