The Code is structured in three functions.

getString()

The getString() function is responsible for retrieving the string the user provides in the input field. It will then pass the string to the checkPalindrome() function and call the displayMessage() function, which are described below.

checkPalindrome()

The checkPalindrome() function takes one parameter which is the string to check for palindrome. The string is processed to get rid of whitespaces and special characters, as well as converting it to all lower case. It then splits the string into an array of its individual characters. This array is then reversed and joined to form a string once again. The initial string is compared to the reversed string and an object with the results is returned.

displayMessage()

The displayMessage() function takes one parameter which is the object with the results. A heading message is displayed depending if the string is a palindorme or not. The reversed string is added to the .innerHTML property of the <p> tag that holds the message. Finally the alert card is made visible.