The Code

                
                  function getValues(inputId, outputId) {
                    let toCheck = document.getElementById(inputId).value;
                    let results = checkForPalindrome(toCheck);
                    displayResults(results, outputId);
                  }
                
              

This function receives IDs for the input and output elements, using the former to obtain the user's input value. The latter is used to output the results of the palindrome check done on the input.

                
                  function checkForPalindrome(toCheck) {
                    let results = {
                      inputEmpty: false,
                      onlyPunctWS: false,
                      isPalindrome: true,
                      reverse: null,
                    };
                  
                    if (!toCheck) {
                      results.inputEmpty = true;
                      results.isPalindrome = false;
                    } else {
                      let cleanString = toCheck.replace(/[^a-z0-9]/gi, '');
                  
                      if (!cleanString) {
                        results.onlyPunctWS = true;
                        results.isPalindrome = false;
                      } else {
                        cleanString = cleanString.toLowerCase();
                        let i = 0, j = cleanString.length - 1;
                        results.reverse = new Array(cleanString.length);
                  
                        while (results.isPalindrome && i < j) {
                          if (cleanString[i] != cleanString[j]) results.isPalindrome = false;
                          results.reverse[i] = cleanString[j];
                          results.reverse[j--] = cleanString[i++];
                        }
                  
                        while (i < j) {
                          results.reverse[i] = cleanString[j];
                          results.reverse[j--] = cleanString[i++];
                        }
                  
                        if (i == j) {
                          results.reverse[i] = cleanString[i];
                        }
                  
                        results.reverse = results.reverse.join('');
                      }
                    }
                  
                    return results;
                  }
                
              

This function checks if the user's input is in fact a palindrome. All characters that aren't alphanumeric are neglected in the check, and uppercase letters are treated as equivalent to their lowercase counterparts.

The return value is an object containing information related to the check: whether the input is a Palindrome, if the input was completely empty, if the input was lacking alphanumeric characters, and what the reverse of the input string is.

                
                  function displayResults(results, outputId) {
                    let outputHTML;
                  
                    if (results.inputEmpty) {
                      outputHTML = "<h3>Oops, your entry was completely empty!</h3>" + "<hr>"
                        + "<p>Enter a phrase that includes characters other than whitespace and punctuation</p>"
                    } else if (results.onlyPunctWS) {
                      outputHTML = "<h3>Oops, your entry only has whitespace and punctuation!</h3>" + "<hr>"
                        + "<p>Enter a phrase that includes other characters, like letters and numbers</p>"
                    } else {
                      if (results.isPalindrome) {
                        outputHTML = "<h3>Well done! You entered a Palindrome!</h3>" + "<hr>"
                          + `<p>Your phrase reversed is: ${results.reverse}</p>`
                      } else {
                        outputHTML = "<h3>Too bad! You didn't enter a Palindrome...</h3>" + "<hr>"
                          + `<p>Your phrase reversed is: ${results.reverse}</p>`
                      }
                    }
                  
                    let output = document.getElementById(outputId);
                    output.innerHTML = outputHTML;
                    output.classList.remove('invisible');
                  
                    if (results.isPalindrome) {
                      output.classList.add('bg-success-subtle');
                      output.classList.remove('bg-danger-subtle');
                    } else {
                      output.classList.add('bg-danger-subtle');
                      output.classList.remove('bg-success-subtle');
                    }
                  }
                
              

This function receives the returned object from checkForPalindrome and uses it to determine the output to display on the webpage.

There are 4 possible types of messages: if the input is empty, if it lacks alphanumeric characters, if it is not a palindrome, and if it is a palindrome. In the latter 2 cases, the reverse string is shown in the output. In the case where a palindrome is present, the output message has a green background. The background is red in all other cases.