// get all values

                    let alertDiv = document.getElementById('alert');

                    let title = document.getElementById('title');

                    let message = document.getElementById('message');

                    function start() {
                        // retrieve the input value, and using a regular expression
                        // we trim out the white spaces and all the special characters
                        let input = document.getElementById("phrase").value;
                        let inputValue = input.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();

                        // make sure the title and message are empty
                        title.textContent = "";

                        message.textContent = "";

                        // make sure the alert div is invisible
                        alertDiv.classList.add('invisible');

                        // check if any value was passed
                        if (!inputValue) {
                            title.textContent = "Something went wrong...";
                            message.textContent = `
                                You must enter a string in order for this to work... Try again.
                            `;
                            alertDiv.classList.remove("invisible");
                            document
                        } else {
                            let rotatorValue = rotator(inputValue);
                            displayResult(rotatorValue, inputValue, input);
                        }
                    }

                    // reverse the string
                    function rotator(inputValue) {
                        let result = [];

                        for (let i = inputValue.length - 1; i >= 0; i--) {
                            result.push(inputValue[i]);
                        }

                        return result.join('');
                    }

                    function displayResult(rotatorValue, inputValue, input) {
                        if (rotatorValue === inputValue) {
                            title.textContent = "Congratulations!";
                            message.innerHTML = `
                            You have entered a Palindrome.

                            The original value is :${input}

                            The reversed value is : ${rotatorValue}
                            `;
                        } else {
                            title.textContent = "Oh no:(";
                            message.innerHTML = `
                            The string you entered is  not a Palindrome .

                            The original value is :${input}

                            The reversed value is : ${rotatorValue}
                            `;
                        }

                        alertDiv.classList.remove("invisible");
                    }

                    document.getElementById('submitButton').addEventListener('click', () => {
                       start();
                       document.getElementById("phrase").value = "";
                    });

                    document.getElementById('form').addEventListener('submit', e => {
                       e.preventDefault();
                       start();
                       document.getElementById("phrase").value = "";
                    });
                    

The Code is structured in three functions

First we select elements from and save them to variables to be easier later.

start

First we retrieve the value value passed it and save it the input variable. Next, using the .replace function and with the help of a regular expression we eliminate any white spaces or special characters from the input and save the result to a new variable.
Next we make sure that the title and message elements are empty and that the alert element is invisible by using .classList.add and inserting the .invisible class.
After that we check if the input is empty using a if statement. If it is, we insert a title and a message letting the user know he needs to enter a string before continuing.
If the the input is not empty, we then call the rotator function and pass it the inputValue(the value that has been trimmed by the regular expression), and save the result to a new variable called rotatorValue . Lastly we call the displayResult function where we pass rotatorValue, inputValue and variables.

rotator

We take as parameter the inputValue variable. We create a new empty array, and using a for loop we go throught the received string in reverse order, and each time, using the loop's index (i) we insert each letter in the created array.
Lastly, using the .join('') method on the array we return a new string from the array by replacing the separator (,) from the array with an empty string ('').

displayResult

This function takes three parameters :

• rotatorValue
• inputValue
• input

Next, using a if / else statement we check to see if the inversed variable (rotatorValue) is the same as the value that has been passed to the input field after it was trimmed by the regular expression (inputValue). Depending on the result we we insert the appropriate text to the title and message elements from the alertDiv. Finally we remove the .invisible class from the alertDiv to make it visible on the page.