The Code

                    
                        function getValues() {
                            // retrieve input
                            let userString = document.getElementById('userString').value;
                            // check
                            let palCheck = checkForPalindrome(userString);
                            // display
                            displayResults(palCheck);
                        }
                        
                        function checkForPalindrome(userString) {
                            // Reverse
                            // removes capitalization
                            userString = userString.toLowerCase();
                        
                            // regex -remove space and special characters-global
                            let regex = /[^a-z0-9]/g;
                            // anything not regex, replace with empty string = a sanitized string*
                            userString = userString.replace(regex, '');
                            // a backwards string*
                            let reverseString = [];
                        
                            // decrimenting for-loop
                            for (let index = userString.length - 1; index >= 0; index--) {
                        
                                // aka reverseString += userString[index] making a reverse array
                                reverseString = reverseString + userString[index];
                            }
                            // we now have 2 strings
                        
                            let returnAlert = {
                                // message: "Nice! It's a Palindrome",
                                // reversed: "olleH"
                                // The object starts as a blank slate. Then when we tell it that it has a "message" property,
                                // it says "ok" and now it has that, and we can access it by typing returnAlert.message.
                            };
                        
                            // if the reverse and normal strings are equal- return Nice! madam-madam
                            if (reverseString == userString) {
                                returnAlert.message = "Nice! It's a Palindrome";
                                returnAlert.reversed = reverseString;
                            } else {
                                returnAlert.message = "Sorry, not a Palindrome";
                                returnAlert.reversed = reverseString;
                            }
                        
                        
                        
                            // An object is multiple related items, set equal to certain values, inside of curly brackets, that has a name
                        
                            // using an object is necessary here because we want to use multiple values from this function
                        
                            // The values in question are returnAlert.reversed, and returnAlert.message
                        
                            // We could also do the same thing with an array. However, here, an object makes more logical sense.
                        
                            // You would need to use an index to access items in an array, but here you can just use the property name
                            //                                                                                   ->(returnAlert.message)
                        
                            return returnAlert;
                        }
                        
                        function displayResults(returnAlert) {
                        
                            // returnAlert is still an object by the time this codeblock is reached.
                            // It still has a "message" property and a "reversed" property, both of which are used here.
                        
                            if (returnAlert.message == "Nice! It's a Palindrome") {
                                document.getElementById('alertHeading').innerHTML = returnAlert.message;
                                document.getElementById('message').innerHTML = `Backwards, your text says: ${returnAlert.reversed}`;
                                document.getElementById('alert').classList.remove('invisible');
                                document.getElementById('alert').classList.remove('alert-danger');
                                document.getElementById('alert').classList.add('alert-success');
                            }
                            else {
                                document.getElementById('alertHeading').innerHTML = returnAlert.message;
                                document.getElementById('message').innerHTML = `Backwards, your text says: ${returnAlert.reversed}`;
                                document.getElementById('alert').classList.remove('invisible');
                                document.getElementById('alert').classList.remove('alert-success');
                                document.getElementById('alert').classList.add('alert-danger');
                            }
                        }
                    
                
Walkthrough
  • Retrieve input by Id
  • remove capitilization
  • Use regex to target special characters and replace with an empty string
  • Initialize the reverse array, and run it through a decrimenting for loop, adding values
  • We now have a normal string and a reverse string (strings are actually arrays)
  • We create an object, because we want to have access to multiple returns at a time
  • if the reverse string and normal string are the same- its a palindrome!
  • we set the returnAlert{} object to have message and reversed parameters
  • The returnAlert{} is passed to the display function. It still has two parameters.
  • Classes are set to the alert message, to compliment the output message