// get message from user input to check if it's palindrome
                        function getValues() {
                        
                            // get message input from the page
                            let message = document.getElementById('message').value;
                        
                            // validate the input: make sure the input is not empty
                            if ( message.length == 0 ) {
                                swal.fire({
                                    icon: 'error',
                                    backdrop: false,
                                    text: 'Please enter a message to check.'
                                })
                            } else {
                        
                                // pass the message to checkForPalindrome and assign its return
                                let palindromeMsg = checkForPalindrome(message);
                        
                                // give the palindrome message to display results to show on the page
                                displayResults(palindromeMsg);
                            }
                        }
                        
                        // check the user input grabbed by getValues to see if it is a palindrome
                        function checkForPalindrome(message) {
                        
                            // Declare variables
                            let msgClean = '';
                            let msgCleanRev ='';
                            let regex = /[A-Za-z0-9]/;
                            let output = [];

                            for (let i = 0; i < message.length; i++) {

                                // Take out all the characters from the input from the user that are not a letter or number
                                if (regex.test(message[i])) {
                                    msgClean += message[i].toLowerCase();
                                }
                            }
                        
                            // Reverse the clean message
                            for (let i = msgClean.length - 1; i >= 0; i--) {
                                msgCleanRev += msgClean[i];
                            }
                            
                            // If there is nothing in the clean message return error
                            if ( msgClean == '' ) {
                                output.push('error');
                                return output;
                            
                            // If the reverse of the clean message is equal to the clean message it's a palindrome!
                            } else if ( msgClean == msgCleanRev ) {
                                output.push(true);
                                output.push(msgCleanRev);
                                return output;
                            }
                            
                            // If it's anything else, it's not a palindrome
                            else {
                                output.push(false);
                                output.push(msgCleanRev);
                                output.push(msgClean.length*5 % 100 + 20);
                                return output;
                            }
                        
                        // display result of checkForPalindrome back to user
                        function displayResults(message) {
                        
                            // Remove classes
                            document.getElementById('alert').classList.remove('invisible', 'alert-danger', 'alert-warning', 'alert-success');
                        
                            // Display success message if the input from user is a palindrome
                            if (message[0] == true) {
                                document.getElementById('results').textContent = 'A Palindrome! Take a breather.';
                                document.getElementById('msg').textContent = `Your message reversed is: ${message[1]}`;
                                document.getElementById('alert').classList.add('alert-success');
                        
                            // Display error message if the input from user does not have any letters or numbers to check
                            } else if ( message[0] == 'error') {
                                document.getElementById('results').textContent = 'Error!';
                                document.getElementById('msg').textContent = `Please enter letters or numbers`;
                                document.getElementById('alert').classList.add('alert-warning');
                            }
                            
                            // Display fail message if the input from user is not a palindrome
                            else {
                                document.getElementById('results').textContent = `Not a Palindrome! Drop and Give Me ${message[2]}!`;
                                document.getElementById('msg').textContent = `Your message reversed is: ${message[1]}`;
                                document.getElementById('alert').classList.add('alert-danger');
                            }
                        }
                    
                

TL;DR

To check if a word or phrase (string) is a palindrome, use a for loop to loop through the string. Start from the end of the string, and place each character into a new variable. Use an if statement to check if the original string is equal to the reversed string in the new variable.

Code Explanation

My Gym was created with the following three functions.

getValues kicks everything off. When the "Time for Push Ups?" button is pressed, it grabs the value of the string from the user by accessing the DOM. It also uses an if-else statement to check if a string was entered. If no string was entered a sweetalert is displayed notifying the user to enter a string. If all is good, it continues to execute checkForPalindrome and displayResults.

checkForPalindrome uses a for loop and Regex on the string recieved from the user to keep letters and numbers and assign them to a new variable. Another for loop is used to reverse the clean string by grabbing each character from the string starting from the end of the string and adding it to a new variable. An if statement is used to check if the clean string is a palindrome by checking if the reversed clean string is the same as the clean string. If not, it will return 'error' if there is nothing in the clean string variable otherwise, it will let you know the word or phrase entered is not a palindrome. The result is then returned as an array.

displayResults uses an if statement and getElementById to grab the elements that need to be updated so the results from checkForPalindrome can be displayed accordingly.

What I learned

• Regex can be used to easily filter messages to keep only valid characters or search for a particular combination of characters.
• There can be multiple returns in a function to return different values depending on certain conditions.

Improvements

• Combine the two for loops in the checkForPalindrome function
• In displayResults use an object to return the results instead of an array for readability.