The Code

 
                     
function getValues() {
    // get the text out of input and assign to a variable
    let msg = document.getElementById('userInput').value;

    // check to make sure input is not empty
    if(msg.length == 0) {
        Swal.fire(
            {
                icon: 'error',
                backdrop: false,
                title: 'Oops',
                text: 'Please enter in a message to 
                       check for palindome'
            });
    }
    else {
        // send the input to be checked if it is a palindrome
        let results = checkForPalindrome(msg);
        // send results to be displayed
        displayResults(results);
    }   
}

The Palindrome checker is a a JavaScript Coding Challenge to show a developer's ability to work with loops and arrays. The challenge starts with getting a user's input that you want to check. This is accomplished in the getValues function. It recieves the user's input from the form. There is a validation check to make sure that the user at the very least enters some text in the form. If they don't, I utilized a SweetAlert to popup and advise the User to add some text to the input field. If there is input, then it is sent to the checkForPlindrome function.

 
                                     
                
                
function checkForPalindrome(msg) {
    // variable created for output
    let output = '';
    let regex = /[^a-zA-Z0-9 ]/g // accept these 
                                    // characters ONLY!!!
    
    // for loop to run through all characters of a string
    // decrementing for loop
    for(let i = msg.length - 1; i >= 0; i--){
        let letter = msg[i];
        output += letter
    }
    
    // check to see if msg and output the same forwards and backwards 
    // regardless of spaces or Capital letters or special characters
    // return results of the check AND the reversed string 
    if(output.toLowerCase().split(' ').join('').replace(regex, '') 
    != msg.toLowerCase().split(' ').join('').replace(regex, '')){
        return [false, output]
    }
    else {
        return [true, output];
    } 
}

In the checkForPalindrome function, the actual check on whether or not the user's input is in fact a palindrome.

It start by taking in the input and running it through a deprecating for loop to reverse the string. Once the reversed string is created, it is checked against the original string along with a few conditions. One is to remove spaces. Another is to ignore special characters. This is done by utilizing Regex.

A TRUE or FALSE value is returned along with the reversed string to be used in the displayResults function.

 
                                     
                
                
// displays the result
function displayResults(results) {
    // if results return as "TRUE"
    if(results[0] == true){
        // set the message for the alert
        document.getElementById('msg').textContent = 
        `Your message IS a palindrome: ${results[1]}`;
        // remove these existing classes
        document.getElementById('alert').classList.remove('invisible');
        document.getElementById('alert').classList.remove('alert-success');
        document.getElementById('alert').classList.remove('alert-danger');
        // add this class
        document.getElementById('alert').classList.add('alert-success');
    }
    // If the results returns as "FALSE"
    else{
        // set the message for the alert
        document.getElementById('msg').textContent = 
        `Your message IS NOT a palindrome: ${results[1]}`;
        // remove these existing classes
        document.getElementById('alert').classList.remove('invisible');
        document.getElementById('alert').classList.remove('alert-success');
        document.getElementById('alert').classList.remove('alert-danger');
        // add this class
        document.getElementById('alert').classList.add('alert-danger');
    }

}

In displayResults, the results are displayed depending on what value is returned. If TRUE is reurned, The a success alert is displayed to the user along with the reversed string. If FALSE is returned an unsuccessful message is displayed along with the reversed string.