The Code for KAYAK

                    //get the user input
                    function getValue(){
                    
                        document.getElementById("alert").classList.add("invisible");
                    
                        let originalString = document.getElementById("userInput").value.replace(/[^0-9a-zA-Z]/g, '').toLowerCase();
                    
                        let userString = document.getElementById("userInput").value.replace(/[^0-9a-zA-Z]/g, '').toLowerCase();
                    
                        let revString = reverseString(userString);
                    
                        checkValues(revString, originalString);
                    }
                    
                    //reverse the string
                    function reverseString(userString){
                    
                        let revString = [];
                    
                        for (let i = userString.length - 1; i >= 0; i--) {
                            revString += userString[i];
                        }
                        return revString;
                    }

                    //check for palindrome
                    function checkValues(revString, originalString){
                    
                        //check to see if first user input string is equal to reversed string (should be a truthy statement); if yes, good message; if falsy, bad message
                        if (revString === originalString) {
                            document.getElementById("alertHeading").innerHTML = `Well done! You entered a palindrome!`;
                            document.getElementById("msg").innerHTML = `Your message reversed is: ${revString}`;
                            document.getElementById("alert").classList.remove("invisible");
                        } else {
                            document.getElementById("alertHeading").innerHTML = `Sorry!`;
                            document.getElementById("msg").innerHTML = `That's not a palindrome.`;
                            document.getElementById("alert").classList.remove("invisible");
                        }
                    }

                    //inline scripts from app.html for button trigger
                        //bottom of app.html
                        document.getElementById("btnSubmit").addEventListener("click",getValue);
                        //inside text-box html element
                        onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSubmit').click(getValue)"

                    
                

The code shown contains all of the Javascript used in this project. Most of the Javascript is contained inside of an external script, site.js. Two-ish lines of Javascript runs inline inside of app.html. A few key pieces of it are explained below.

getValue

getValue is a function that is triggered when the "Check It" button is clicked on the app webpage. (See the bottom of the Javascript.)
Line 4: It first makes the "alert" HTML element invisible to the user, (which it will then make visible later once the string has been reversed.)
Line 6: A variable is declared that will be used to represent the original user input unaltered (except for making all characters lowercase and removing non-aphanumeric characters.
Line 8: Same as line 8, but this string will be used in our revString function.
Line 10: A variable is declared and set equal to our revString function (which is called) with the variable userString set as the parameter.
Line 12: The function checkValues is called.

reverseString

This function takes in userString and reverses it using a for loop. Then, the variable revString is returned.

checkValues

An if else statement is created that compares the variables revString and originalString. If these variables are exactly the same, then a success message is presented. If they are not the same, then an error message is presented. Also, in either case, the class "invisible" is removed from our alert so the message can be seen.