How to create a Palindrome Checker with JavaScript

Palindrome Checker with JavaScript

In the world of coding, one of the most interesting challenges for beginners is to write a function that checks whether a given string is a palindrome. A palindrome is a word, phrase, number, or other sequence of characters that reads the same forward and backward (ignoring spaces, punctuation, and capitalization). Examples include "racecar", "madam",Eye, 

In this post, we'll walk through how to create a simple palindrome checker using JavaScript. This is a great way to practice your string manipulation skills and understand how to handle user input.

What is a Palindrome?

A palindrome is a word, phrase, number, or sequence of characters that reads the same forward and backward, ignoring spaces, punctuation, and capitalization. For example, the word "radar" is a palindrome because it reads the same from left to right as it does from right to left. Another example is the phrase "A man, a plan, a canal, Panama!" which, when you strip away the spaces and punctuation, reads the same forward and backward. Palindromes can be simple, like "madam" or "level," or more complex, like entire sentences or numbers.

The Plan:

We'll write a JavaScript function that:

1. Normalizes the input string by converting it to lowercase and removing non-alphanumeric characters.

2. Reverses the string.

3. Compares the original string with its reversed version to determine if it’s a palindrome.

Here’s how you can write the palindrome checker in JavaScript:

Palindrome Checker in JavaScript

Copy the code below to use a simple palindrome checker in JavaScript:

// Function to check if a string is a palindrome
function isPalindrome(str) {
    // Convert the string to lowercase and remove non-alphanumeric characters
    str = str.toLowerCase().replace(/[^a-z0-9]/g, '');
    
    // Reverse the string
    const reversedStr = str.split('').reverse().join('');
    
    // Check if the original string is equal to the reversed string
    return str === reversedStr;
}

// Get user input
const userInput = prompt("Enter a string to check if it's a palindrome:");

// Check if the input is a palindrome
if (isPalindrome(userInput)) {
    console.log("The string is a palindrome.");
} else {
    console.log("The string is not a palindrome.");
}

Step-by-Step Breakdown

1. Normalization:

   The first step in our function is to standardize the input by converting it to lowercase and removing all non-alphanumeric characters. This ensures that phrases like "A man, a plan, a canal, Panama" are correctly identified as palindromes.

   ```javascript

   str = str.toLowerCase().replace(/[^a-z0-9]/g, '');

   ```

2. Reversing the String:

   Next, we split the string into an array of characters, reverse the array, and then join it back into a string.

   ```javascript

   const reversedStr = str.split('').reverse().join('');

   ```

3.Comparison:

   Finally, we compare the normalized string to its reversed version. If they are identical, the input is a palindrome.

   ```javascript

   return str === reversedStr;

   ```

User Interaction

To make the checker interactive, we’ve added a `prompt` function to get input from the user. When the user enters a string, the function checks whether it's a palindrome and logs the result to the console.

Conclusion

This simple palindrome checker is a great way to practice basic JavaScript concepts like string manipulation, regular expressions, and user input handling. Feel free to expand upon this by creating a more complex checker or by adding a graphical user interface (GUI) using HTML and CSS.

Try It Yourself!

You can copy the code above and try it in your browser's console or in your own JavaScript projects. Happy coding!

By following this guide, you’ll not only learn how to create a palindrome checker but also gain a deeper understanding of how JavaScript handles strings and user input. Whether you’re a beginner looking to improve your skills or a seasoned developer revisiting the basics, this exercise is a fun and educational way to engage with coding.