The Code for TOP SPOT

//Get the string from the page
//controller function
function getValue () {
    document.getElementById("alert").classList.add("invisible");

    let userString = document.getElementById("userString").value;

    let returnObj = checkForPalindrome(userString);

    displayString(returnObj);
}

//process and check the string for a palindrome
//logic function
function checkForPalindrome (userString) {
    //convert string to lower case
    userString = userString.toLowerCase();

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

    let revString = [];

    //reverse a string using a for loop
    for (let index = userString.length - 1; index >= 0; index--) {
        revString += userString[index];
    }

    let returnObj = {};

    //compare user string to reverse string
    if (revString == userString) {
        returnObj.msg = "Well done! You entered a palindrome!"
    }
    else {
        returnObj.msg = "Sorry! You did not enter a palindrome"
    }

    returnObj.reversed = revString;

    return returnObj;
}

//Display the results to the user
//View Function
function displayString(returnObj) {

    //write to the page
    document.getElementById("alertHeader").innerHTML = returnObj.msg;
    document.getElementById("msg").innerHTML = `Your phrase reversed is: ${returnObj.reversed}`;

    //show the alert box
    document.getElementById("alert").classList.remove("invisible");
}

The Code is structured in three functions.

Code Explanation

getValue is a controller function that gets the user's word or phrase from the App page, processes the string, and then displays the result back to the user.

checkForPalindrome is a logic function that processes and checks to see if a string is actually a palindrome. It has only one parameter that brings in the value of the user string from the getValue function. The function first converts the string into lower case. It then removes spaces and special characters from the string using a javascript regular expression. After that, it reverses the string using a for-loop and saves it character by character into a string array. It compares the user string and reversed string to see if they are equal. A message is generated based on this comparision. Finally, the message along with the reversed string are stored into a JavaScript Object, and passed out of the function.

displayString is a view function that takes in a JavaScript object from the getValue function. The object contains the results message and the reversed string which are written in the alert box on the page. The alert box is then revealed to the user.

What I Learned

• Use JavaScript regular expressions for searching patterns that can be used in text search and text replace operations. This eliminated need for multiple lines of code to search and replace characters.
• Use JavaScript objects as a container to hold multiple properties. This allows for easier passing of information between functions.

Possible Improvements

• Show previously entered strings along with their statuses in a running history/list.
• Allow the user to enter multiple different strings at once and check them simultaneously to see if they are palindromes.