function getValues() {
                                let container = document.getElementById("display-container");
                                let userString = document.getElementById("userString").value;
                                // removes ant special characters
                                userString = userString.replace(/[^a-zA-Z ]/g, "");
                                // makes everything lowercase
                                userString = userString.toLowerCase();                            
                                let string = reverse(userString);                             
                                if (userString == string) {
                                  container.style.background = "green";
                                } else {
                                  container.style.background = "red";
                                }                       
                                display(string);
                              }




                              function reverse(userString) {
                                let string = [];  
                                for (let i = userString.length - 1; i >= 0; i--) {
                                  string += userString[i];
                                }                    
                                return string;
                              }




                              function display(string) {
                                string = string.replace(/[^a-zA-Z ]/g, "");
                                string = string.toLowerCase(); 
                                document.getElementById("display").innerHTML = string;
                              }
                 
                    
                

getValues()

The getValues function starts by getting values from the front end, the main one being the userString. The user's string is stored into a variable that is then stripped of any special characters and turned into lowercase so that there is uniformity all around. The reverse function is then called upon and stored as a variable. if the user string is a palindrome then the background will turn green, if not then it will turn red.

reverse()

The reverse function has a parameter of the user's string. It starts with an empty array. Then a for loop that counts from the length of the user's string down to zero. What is returned is a loop that reverses a string.

display()

The display function takes the string that was created and reversed in the reverse function and strips it from any special characters and changes it to lowercase just like is done in the getValues function. The string is then inserted into the HTML.