The Code

                    
                        function getValues() {
                            let userMessage = document.getElementById('message').value;
                        
                            // Process the input to remove non-alphanumeric characters and convert to lowercase
                            let processedMessage = userMessage.toLowerCase().replace(/[^a-z0-9]/gi, '');
                        
                            // Check if the processed message is less than 2 characters
                            if (processedMessage.length < 2) {
                                Swal.fire({
                                    icon: 'error',
                                    backdrop: false,
                                    title: 'Oops',
                                    text: 'Please enter at least 2 alphanumeric characters to check for palindrome.'
                                });
                        
                                return;
                            } else {
                                // Check if the processed message is a palindrome
                                let isPalindrome = checkForPalindrome(processedMessage);
                                // Reverse the original user message for display
                                let userMessageReversed = reverseString(userMessage);
                        
                                // Create an object with the original and reversed messages and the palindrome result
                                let results = {
                                    input: userMessage,
                                    reversed: userMessageReversed,
                                    isPalindrome: isPalindrome
                                };
                        
                                // Display the results
                                displayResults(results);
                            }
                        }
                        
                        function displayResults(results) {
                            let alert = document.getElementById('alert');
                            alert.classList.remove('invisible', 'alert-success', 'alert-danger');
                        
                            if (results.isPalindrome == true) {
                                // Make the alert green for success
                                alert.classList.add('alert-success');
                                alert.querySelector('h4').innerHTML = 'Well Done! You entered a palindrome';
                            } else {
                                // Make the alert red for failure
                                alert.classList.add('alert-danger');
                                alert.querySelector('h4').innerHTML = 'Oh No! That is not a palindrome';
                            }
                        
                            // Display the input and reversed messages in the alert body
                            alert.querySelector('p').innerHTML = `You entered: ${results.input}.
Your message reversed is: ${results.reversed}`; } function checkForPalindrome(input) { // The input is already processed (lowercased and non-alphanumeric characters removed) let reversed = reverseString(input); // Check if the reversed string is the same as the input let isPalindrome = reversed === input; // Return a value indicating whether it is or is not a palindrome return isPalindrome; } function reverseString(inputString) { let result = ''; // Loop through the string from the end towards the beginning for (let index = inputString.length - 1; index >= 0; index--) { result += inputString[index]; } return result; }

The code is structured in 4 functions

getValues()

The getValues function retrieves the user's input from a text box, processes it to remove non-alphanumeric characters, and converts it to lowercase. It then checks if the processed input is a palindrome. If the input is too short, it displays an error message using Sweet Alert to prompt the user to enter more characters. If the input is valid, it reverses the input string, determines if it is a palindrome, and then prepares the results for display.

displayResults()

The displayResults function updates the HTML to indicate whether the user's input is a palindrome. It modifies the alert's appearance based on the result, using a green alert for success and a red alert for failure. The function also displays both the original and reversed input strings, formatting them in bold for emphasis. This visual feedback helps the user quickly understand the result of their input.

checkForPalindrome()

The checkForPalindrome function takes a processed string, removes any non-alphanumeric characters, and converts it to lowercase. It then reverses this processed string and compares the reversed string to the original processed string. If the two strings are identical, it returns a boolean value indicating that the input is a palindrome. This function simplifies the main logic by isolating the palindrome check into a single, reusable component.

reverseString()

The reverseString function reverses the input string by iterating from the end of the string to the beginning. It constructs the reversed string character by character in a loop. This function is essential for both displaying the reversed input to the user and checking for palindromes. By handling the reversal separately, the code remains modular and easier to maintain.