The Code for TOP SPOT

                    //Get the string from the page 
                    //controller function
                    function getValue () {
                        document.getElementById("alert").classList.add("invisible");
                        
                        let userString = document.getElementById("userString").value;
                    
                        let returnObj = checkForPalindrome(userString);
                    
                        displayString(returnObj);
                    }
                    
                    //process and check the string for a palindrome
                    //logic function 
                    function checkForPalindrome (userString) {
                        //convert string to lower case
                        userString = userString.toLowerCase();
                    
                        //remove spaces and special characters
                        let regex = /[^a-z0-9]/gi;
                        userString =userString.replace(regex, "");  
                    
                        let revString = [];
                    
                        //reverse a string using a for loop
                        for (let index = userString.length - 1; index >= 0; index--) {
                            revString += userString[index];        
                        }
                    
                        let returnObj = {};
                    
                        //compare user string to reverse string
                        if (revString == userString) {
                            returnObj.msg = "Well done! You entered a palindrome!"
                        }
                        else {
                            returnObj.msg = "Sorry! You did not enter a palindrome"
                        }
                    
                        returnObj.reversed = revString;
                    
                        return returnObj;
                    }
                    
                    //Display the results to the user
                    //View Function
                    function displayString(returnObj) {
                        
                        //write to the page
                        document.getElementById("alertHeader").innerHTML = returnObj.msg;
                        document.getElementById("msg").innerHTML = `Your phrase reversed is: ${returnObj.reversed}`;
                    
                        //show the alert box
                        document.getElementById("alert").classList.remove("invisible");
                    }
                
                

The Code is structured in three functions.

Code Explanation

getValue is a controller function that gets the user's word or phrase from the App page, processes the string, and then displays the result back to the user.

checkForPalindrome is a logic function that processes and checks to see if a string is actually a palindrome. It has only one parameter that brings in the value of the user string from the getValue function. The function first converts the string into lower case. It then removes spaces and special characters from the string using a javascript regular expression. After that, it reverses the string using a for-loop and saves it character by character into a string array. It compares the user string and reversed string to see if they are equal. A message is generated based on this comparision. Finally, the message along with the reversed string are stored into a JavaScript Object, and passed out of the function.

displayString is a view function that takes in a JavaScript object from the getValue function. The object contains the results message and the reversed string which are written in the alert box on the page. The alert box is then revealed to the user.

What I Learned

• Use JavaScript regular expressions for searching patterns that can be used in text search and text replace operations. This eliminated need for multiple lines of code to search and replace characters.
• Use JavaScript objects as a container to hold multiple properties. This allows for easier passing of information between functions.

Possible Improvements

• Show previously entered strings along with their statuses in a running history/list.
• Allow the user to enter multiple different strings at once and check them simultaneously to see if they are palindromes.