Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I’m almost done, but I only get about half of them right because I’m not able to get rid of the non-alphanumeric characters.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Palindrome Checker</h1>
    <input id="text-input" type="text" required></input>
    <button id="check-btn" type="submit">Check</button>
    <p id="result"></p>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const checkButton = document.getElementById("check-btn");
const textInput = document.getElementById("text-input");
const result = document.getElementById("result");

function noInput() {
  if (textInput.value === "") {
    alert("Please input a value");
    result.innerText = "";
} else {
  palindrome();
}
};

function palindrome() {
  const forward = textInput.value.replace(/^a-z0-9/g, "").toLowerCase();
  let charArray = textInput.value.split("");
  charArray.reverse();
  const backward = charArray.join("");

  if (forward === backward) {
    result.innerText = `${textInput.value} is a palindrome`;
} else {
  result.innerText = `${textInput.value} is not a palindrome`;
}
}

checkButton.addEventListener("click", noInput);


/* file: styles.css */
body {
  background-color: pink;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3 Safari/605.1.15

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

If you need to fix your regex you can use a tool like regexr.com to check what your pattern is doing and test it against some strings.

3

Hi there!

You also need to fix the above lines of code by chain the split, reverse and join at once.

4

It looks like mine should be fine. I cannot for the life of me figure out why it isn’t working. It says “eye” is a palindrome but “_eye” isn’t. I added the brackets and parentheses and it’s still not working. Another thing is that a capital A by itself is supposed to be a palindrome, but isn’t everything supposed to be in the same case? How are “A” and “eye” supposed to both be palindromes when everything has to be in the same case.

5

I think you misread the instructions. They said to turn everything to either lower or upper case as a tip to help your algorithm work.

An A is a palindrome because if you look at it from the left it is A and from the right it is A and therefore it is a palindrome.

As for _eye, it is a palindrome because if you ignore the underscore (which they said to ignore when they said to remove all non-alphanumeric characters), the letters are read e, y, e in both directions so it is also a palindrome.

6

So is it not actually required to make everything the same case in the code? Cause that’s the only way A and eye can both be palindromes. And I understand how _eye would be a palindrome with the right code, the only problem is I don’t know how to remove all non-alphanumeric characters. I’ve tried everything.

7

You can remove all non-alphanumerics using correct regex pattern. You need a regex pattern that have a character class with alphanumeric characters and you pattern should have a global flag.

Currently you didn’t have the character class in your regex pattern.

8

I just realized I didn’t have the brackets there, but shouldn’t /[^a-z0-9]/g work?

9

You should write the code any way you want but they gave you two tips which were there to help you. Making the strings all lowercase and stripping the non alphanumeric characters before doing the check to see if the string is a palindrome is just common sense.

You can strip the non alphanumeric characters very simply by looping through the string’s characters and checking each one to see if it is a number or letter or not.