Palindrome Checker

by kirupa (https://www.kirupa.com/about/whatiskirupa.htm) | filed under Coding Exercises (https://www.kirupa.com/codingexercises/index.htm)

Some words are a little bit magical. Take racecar, for example. Read it forwards, read it backwards, and we get the exact same thing. The same goes for kayak, level, and noon. Words like these are known as palindromes.

Palindromes aren't limited to single words. Entire phrases can be palindromes too, as long as we ignore capitalization, spaces, and punctuation. One of the most famous examples is:

A man, a plan, a canal: Panama!

If we strip out everything except the letters and make everything lowercase, we are left with amanaplanacanalpanama. That reads the same in both directions, so this phrase is a palindrome!

In this exercise, we are going to build a palindrome checker. Here is what it needs to do:

1. Create a function called isPalindrome that takes a word or phrase as its argument
2. The function returns true if what we passed in is a palindrome and false if it isn't
3. Capitalization, spaces, and punctuation should be ignored. This means phrases like Taco cat and Was it a car or a cat I saw? both count as palindromes
4. Use your function to check every item in the phrases array from the starting code, and print the result for each one to the console

When you run your code, the output in the console will look something like the following:

"racecar" is a palindrome!
"kirupa" is not a palindrome.
"Taco cat" is a palindrome!
"A man, a plan, a canal: Panama!" is a palindrome!
...

For some extra credit, try checking for a palindrome without reversing the string at all. Here is a hint: what if we compared the first character with the last character, the second character with the second-to-last character, and kept moving inward until we met in the middle?

Onwards!

Starting Point

Create a new HTML document in your favorite code editor (like Visual Studio Code) and copy/paste the following starting content into it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Palindrome Checker</title>
</head>
<body>
  <script>
    const phrases = [
      "racecar",
      "kirupa",
      "Taco cat",
      "A man, a plan, a canal: Panama!",
      "Was it a car or a cat I saw?",
      "Hello, world!",
      "No lemon, no melon",
      "JavaScript",
      "Never odd or even",
      "Step on no pets"
    ];

  </script>
</body>
</html>

The HTML you see here is just the bare minimum content needed to help us get our web page up and running, along with the phrases we'll be checking. The rest of the content is what you will add entirely on your own! Since our output is printed to the console, be sure to bring up your browser's developer tools to see the results.

Hint: Some Learning Resources

The following tutorials may provide some helpful tips and techniques to help you with this exercise: Console Logging Basics (https://www.kirupa.com/html5/console.htm), Strings in JavaScript (https://www.kirupa.com/html5/strings_in_javascript.htm), Functions in JavaScript (https://www.kirupa.com/html5/functions_in_javascript.htm), Looping in JavaScript (https://www.kirupa.com/html5/loops_in_javascript.htm), If/Else Statements (https://www.kirupa.com/html5/conditional_statements_if_else_switch_javascript.htm)

Getting Your Badge

Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to your collection (https://forum.kirupa.com/badges/):

[Image: Palindrome Checker badge] (https://www.kirupa.com/codingexercises/images/palindrome_checker_badge.png)

To claim it, head over to the forums and respond in the Palindrome Checker topic (https://forum.kirupa.com/t/palindrome-checker-frontend-coding-exercise/683591). Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:

[Image: ] (https://www.kirupa.com/codingexercises/images/create_forum_topic.webp)

Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.

Stuck? Need Help? Want a Code Review?

We want to make this a fun learning activity. If you are stuck and need help, please ask on the forums (https://forum.kirupa.com). Please explain your problem in detail and one of the many helpful forum members will help you out.

Similarly, if you want feedback on your code, please also ask in the forums. This would be an excellent chance for you to learn how you can improve your solution from other web developers!