//Getting the input from the user
function getValues(){

    //Ensuring that the alert is invisible 
    document.getElementById("alert").classList.add("invisible");

    //Getting the user string 
    let userString = document.getElementById("userString").value;

    if (userString.length > 2) {
    //Test for a palindrome
    let returnObj = checkForPalindrome(userString);

    //Displaying the result to the user
    displayMessage(returnObj);
    }
    else {
        alert("You must enter three or more characters!");
        }
}

//Test if the string is a palindrome
function checkForPalindrome(userString){

    //Ensuring that the input will be converted to lower case if it is not
    userString = userString.toLowerCase();

    //Ensuring that special characters and spaces are removed
    let regex = /[^a-z0-9]/gi;
    userString = userString.replace(regex, "");

    let revString = [];
    let returnObj = {};
    let blankString = "";

    for (let index = userString.length - 1; index >= 0; index--) {
        revString += userString[index];
    }

    //Checking if userString = revString
    if (revString == userString & revString != blankString) {
        returnObj.msg = "Fantastic! You have entered a palindrome"
    }
    else{
        returnObj.msg = "You did not enter a palindrome! Try again"
    }

    returnObj.reversed = revString;

    return returnObj;

}
//Display a message to the string
function displayMessage(returnObj){

    document.getElementById("alertHeader").innerHTML = returnObj.msg;
    document.getElementById("msg").innerHTML = `Your reversed word/ phrase is: ${returnObj.reversed}`;
    document.getElementById("alert").classList.remove("invisible");

}
                    
                    

Description

The code can be broken down into three main functions:

1.) getValues()

The Javascript code of this application begins with the getValues function. The very first step is to ensure that the results element is not visible. Making the results element invisible is done by adding the invisible class. Afterwards, the user's input is stored in a variable. This variable is checked to confirm that a value was entered. If the user has not entered a value before pressing the submit button, the user will get alerted to try again. I have also added an if-statement that prompts the user to enter three or more characters.

2.) checkForPalindrome()

A new variable named returnObj is set equal to the checkForPalindrome function in which I used userString as a parameter. After the checkForPalindrome function returns a value, returnObj is utilized as a parameter for the displayMessage function. The input is modified using the regex function and the toLowercase function. Using the toLowerCase function will improve the readability of the output by converting it to lowercase. I have used the regex function along with a regular expression to replace characters with an empty strings except for 'A' to 'Z' and '0' to '9'. I have used the variable array revString to hold the reversed string after it is created. A for-loop is responsible for reversing the string. To start the for-loop, I have set the index equal to the length of the userString array subtracted by one. Once the loop finishes decrementing the index, the finished revString array is passed on to the getValues function. The final message is determined with an if statement. A reversed property is added to returnObj, and it's set equal to the revString variable.

3.) displayMessage()

In this section of the code, I have implemented the functionality that allows us to render and display the message to the user. The inner HTML of the alert header is set to the message property after the displayMessage function receives returnObj. Lastly, the invisible class is removed to display the result.