// Get string from the page
// Controller Function
function getValue() {
    document.getElementById("alert").classList.add("invisible");
    // Get user string
    let userString = document.getElementById("userString").value;
    // Check palindrome
    let returnObj = checkPalindrome(userString)
    // Display result on page
    displayString(returnObj);
}

// Reverse string and perform palindrome check
// Logic Function
function checkPalindrome(userString) {

    // Set input string to lower case and cleanup input string of any whitespace, special characters, and numbers.
    let cleanedString = userString.toLowerCase();
    let regex = /([^a-z0-9])/gi;
    cleanedString = cleanedString.replace(regex, "")

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

    // Reverse cleanedString string via for loop
    for (let index = cleanedString.length - 1; index >= 0; index--) {
        revString += cleanedString[index];
    }

    // Set object property based on palindrome status
    if (revString == cleanedString) {
        returnObj.msg = "Congratulations! You entered a palindrome."
    } else {
        returnObj.msg = "Sorry. Your input isn't a palindrome."

    }

    returnObj.reversed = revString;

    return returnObj;
}

// Display reversed string to user
// View Function
function displayString(returnObj) {

    // Write message to heading
    document.getElementById("heading").innerHTML = returnObj.msg;
    // Write message to page
    document.getElementById("msg").innerHTML = `Your word/phrase reversed is: ${returnObj.reversed}`;
    // Show alert box
    document.getElementById("alert").classList.remove("invisible");
}
                        
                    

The dipslayed code shows the JavaScript used for this project. The main functions are outlined below.

getValue

getValue runs when the Check Palindrome button is clicked on the app. It grabs the user string value and passes it into checkPalindrome.

checkPalindrome

checkPalindrome first takes our string and strips it of junk characters & spaces. We have 2 new variables revString and returnObj to store our results.

Now with the string cleaned, we can iterate through each character starting from the last and going backwards. Each iteration pushes the current character to a new array, revString.

Next, we compare the reversed string with the original(cleaned) input string. We use an if/else conditional to save the appropiate message to the msg property of returnObj we made earlier. We also save the reversed string to the object and return returnObj

displayString

Here we take our returnObj properties to write the message to the page. We also need to remove the "invisible" class from our alert element so our results can display!