//get the string from the page

                        function getPhrase(){
                            document.getElementById("alert").classList.add("invisible");
                            const regex = /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/g;
                        
                        
                            let userPhrase = document.getElementById("userPhrase").value;
                            let  isPalindrome =  checkIfPalindrome(userPhrase.toLowerCase().replace(/\s+/g, '').replace(regex, ''));
                        
                            displayPalindrome(isPalindrome);
                        }
                        
                        function checkIfPalindrome(userPhrase){
                        
                            //reverse string
                            let revString = [];
                        
                        for (let index = userPhrase.length-1; index >= 0; index--) {
                            revString += userPhrase[index];
                            
                        }
                        
                        //check if rev is same as user string
                            if(revString == userPhrase){
                                return true;
                            } else{
                                return false;
                            }
                        
                        
                        }
                        
                        function displayPalindrome(isPalindrome){
                            if(isPalindrome){
                                let result = "is a palindrome";
                                document.getElementById("msg").innerHTML = `Congrats! Your word/phrase ${result}.`;
                                document.getElementById("alert").classList.remove("invisible");
                        
                            }else{
                                let result = "is not a palindrome";
                                document.getElementById("msg").innerHTML = `I'm Sorry! Your word/phrase ${result}.`;
                                document.getElementById("alert").classList.remove("invisible");
                            }
                        
                        }
                        
                    

getPhrase()

The getPhrase() function's purpose is 1) to get the user's value 2) check if the value is a palindrome by calling the checkifPalindrome() function 3) displaying the results by calling the displayPalindrome() function.

In this function we do a few things as well, we make sure to convert the user's phrase into lowercase and get rid of any white space or symbols.

checkIfPalindrome()

The checkIfPalindrome() function is where all the magic happens. Here we are reversing the string first with a for loop and adding each letter into a new array. After that process is done, we are using an if statement in order to check whether the reversed string/phrase is equal to the user's original string/phrase. This function will return a true or false.

displayPalindrome()

The displayPalindrome() function displays the results. If it's not a palindrome it displays a message of: "I'm sorry! Your word/phrase is not a palindrome." If it is a palindrome it will display a message of: "Congrats! Your word/phrase is a palindrome."