"use strict";

                            // Controller function
                            // get the input string value
                            function getValue() {

                                // make sure alert msg is not initially visible and default background color is set
                                document.getElementById('alert').classList.add('alert-success');
                                document.getElementById('alert').classList.add('invisible');

                                // get the user input string
                                let userStr = document.getElementById('userString').value;

                                // clean up user string - remove symbol, punctuation, numbers
                                userStr = userStr.toLowerCase();
                                userStr = userStr.replace(/[\p{P}$+<=>^`|~]/gu, '');
                                userStr = userStr.replace(/[^\p{L}\p{N}\s]/gu, '');
                                userStr = userStr.replace(/[^\p{L}\p{N}\p{Z}]/gu, '');
                                userStr = userStr.replace(/[^\p{L}\p{N}\s]/gu, '');
                                userStr = userStr.replace(/[0-9]/gu, '');
                                let newUserStr = userStr.split(" ").join(""); // remove space

                                // call the reverse function
                                let reverseStr = reverseString(newUserStr);

                                // pass the reversed string to the display function
                                displayString(reverseStr, newUserStr, userStr);

                            }

                            // logic function
                            // reverse the string value
                            function reverseString(userStr) {
                                // declare empty array to be populated
                                let reverseStr = [];

                                // reverse string with a decrementing for loop
                                for (let i = userStr.length - 1; i >= 0; i--) {
                                    // concatenate and populate the array with index values
                                    reverseStr += userStr[i];

                                }

                                // retrun the reversed string
                                return reverseStr;

                            }

                            // view function
                            // display the reversed string value back to the page
                            function displayString(reverseStr, newUserStr, userStr) {

                                if (reverseStr === newUserStr) {
                                    // change alert background color
                                    document.getElementById('alert').classList.remove('alert-danger');
                                    document.getElementById('alert').classList.add('alert-success');
                                    // write to the page using a template literal
                                    document.getElementById('msg').innerHTML = `${userStr}
${reverseStr} is a palindrome!`;

                                    // turn on inline alert success message
                                    // (remove 'invisible' from the class listings) 
                                    document.getElementById('alert').classList.remove('invisible');

                                } else {
                                    // write to the page using a template literal
                                    document.getElementById('msg').innerHTML = `${userStr}
${reverseStr} is not a palindrome!`;

                                    // change alert background color
                                    document.getElementById('alert').classList.remove('alert-success');
                                    document.getElementById('alert').classList.add('alert-danger');
                                    // turn on inline alert success message
                                    // (remove 'invisible' from the class listings) 
                                    document.getElementById('alert').classList.remove('invisible');
                                }



                            }
                        
                    

JS TACOCAT

Using HTML, Javascript, Bootstrap and custom CSS we can design an application to solve and present the question... "Is it a palindrome?"

getValue() function

Here we use javascript to set an inline alert message's css class to 'invisible', it's default background color and to "Get" the user input field value in the HTML file by using document.getElementById to locate the html tags with id's of 'alert' and 'userString'. We then clean the string of any characters or spaces that would interfere with our test.

reverseString() function

Then we pass the clean 'newUserStr' array to a logic function that uses a decrementing for loop to move backwards through the index of the string array where each index item is cancatenated and then added to the empty reverseStr = [] array. Once the for loop is complete we return this reversed array back to the getValue() controller function.

displayString() function

From the Controller function we call the view function displayString() passing it the reversed array variable 'reverseStr', the cleaned 'newUserStr' and orginal user input 'userStr'. Then using getElementbyId and it's classList and innerHTML properties we modify the inline alert box and it's CSS classes based on the success or failure of the if statement.