The Code

                    
                        // Entry Point
function getValues() {
    // Get values from the page
    let inputString = document.getElementById('pString').value;

    // Call logic function to test if palindrome
    let palResults = checkForPalindrome(inputString);
    // Call display function to report to user.
    displayResults(palResults, inputString);
}


// Logic Function
// Determine if string was a palindrome or not.
function checkForPalindrome(inputString) {
    // Take string, remove punctuation
    let stringRegEx = /[a-z]/ig;

    inputString = inputString.match(stringRegEx);
    let revInputString = [];

    // Reverse string, store it
    for (i = inputString.length - 1; i >= 0; i--) {
        revInputString.push(inputString[i]);
    }
    // Compare

    if (revInputString.toString().toLowerCase() === inputString.toString().toLowerCase()) {
        return true;
    } else {
        return false;
    }

    // Return true or false. 


}

// Display function
// Insert into the page html
function displayResults(palResults, inputString) {

    if (palResults == true) {
        let stringRegEx = /[a-z]/ig;
        inputString = inputString.match(stringRegEx);
        inputString = inputString.toString().replaceAll(',', "").toLowerCase();
        document.getElementById('results').textContent = `"${inputString} is a palindrome!"`;

    } else {
        document.getElementById('results').textContent = "It is NOT a palindrome!";
    }

}
                    
                

The code is structured in three functions. Called functions will be detailed in their own sections. Click a headline() to scroll to that section of the code. And click the function name within the code to scroll to that write up section.

getValues()

---

This is the start of our app. We call each of these blocks of code, a function. Since this is our entry point, we call this our entry point function. First we create inputString and set it to document.getElementById('pString').value.

Let's break that down.
document refers to our HTML page.
getElementById('pString') grabs the html element with the unique name(id) of 'pString'.

.value pulls the input information of that html element. This is either assigned by the html or given to us by the user.

We then create palResults set to the result of our solving, checkForPalindrome() when it is given the inputString argument.

We then call our display function, displayResults(), to return the information to the user. This is passed the palResults and inputString arguments.

checkForPalindrome()

---

This is our logic function.We give it the parameter of inputString which will be the string that the user created on the page. Then, this function is what will do all the checks necessary to see if our input string is a palindrome. For this we use RegEx or (Reg)ular (Ex)pressions. RegEx is a way to use search patterns to find and replace text in strings, or to validate inputs.

stringRegEx
This variable stores our RegEx parameters, /[a-z]/ig. This pattern finds all the letters from a to z while ignoring case (i) and checking globally (g) which just means it checks every word. So in the end we get a return of the entire string, minus any punctuation, spaces or numbers. We do this with the next line using the .match method to match the pattern of our RegEx.

revInputString
This variable is being created as an empty array that we can use within our for loop to store our empty string. All strings are just arrays of letters behind the scenes.

The last major part of this function is our for loop. We use for loops quite often to to iterate through processes. This starts the same as many for loops where we give it three expressions. First we create i and set it to a beginning value. This time we've set it to inputString.length - 1. Since all strings are arrays, we can calculate the length of our input string, subtract 1, and that gives us the last index of our string. We then say that while i >= 0 execute the code. Then, during each loop we decrement i by 1 using our decrement operator --.

Only a single process happens in this for loop. We take our inputString and use the fact that a string has array properties to our advantage. We start at the end of the inputString's index and use .push() to add that that to the revInputString array. We have simply turned it backwards. That is all the for loop does. When i goes below 0, the loop concludes.

After our for loop we use an if statement to determine if our revInputString is equal to our inputString. We use .toString() to return a string representation of an array, then we use .toLowercase() to get rid of any of the uppercase letters as they would cause inequality between the two strings despite being the same letters. If it is equal, we return true, else we return false.

displayResults()

---

The final function in our small scale javascript palindrome detector is displayResults(). It has the parameters of palResults which is the result of our logic function checkForPalindrome() and inputString which is our user input.

The if statement asks if palResults is equal to true. If so, we use our RegEx system again to remove everything from the original string that isn't a letter. Then we turn our inputString from the array back to a string with the method toString() again, remove all the commas from the array with the method.replaceAll() and finally use .toLowerCase() to set it all to lowercase again. We then use our trusty document.getElementById() to grab the element by the id of 'results'. We use .textContent to fill that results element with a string template literal with ${} to insert a variable or expression. This will let our users see their string returned to them lowercase, and reversed.

The else statement is the same as the last part of the if statement except it simply informs the user that their string was not a palindrome.