Palindrome Checker code works but doesn't pass

JavaScript
1

Hi everyone, first post on the forum! Love freeCodeCamp!

I am studying the course on JavaScript and I think I managed to make a Palindrome Checker, but it’s not making me proceed for some reason. Would you mind have a quick look at it? Thank you!

const textInput = document.getElementById("text-input");
const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");

function cleanString (string) {
  const cleanArray = string.replace(/[^\w]/g, '').toLowerCase().split('');
  return cleanArray;
}

function isPalindrome(array) {
  let length = array.length;

  for (let i = 0; i < length / 2; i++) {
    if (array[i] !== array[length - 1 - i]) {
      return false;
    }
  }
  return true;
}

checkButton.addEventListener("click", () => {
    const inputValue = textInput.value;
    if (inputValue) {
      if (isPalindrome(cleanString(inputValue))) {
        result.innerText = '"' + inputValue + ' is a palindrome"';
        result.classList.add("isPalindromeTrue");
        result.classList.remove("isPalindromeFalse");
      } else {
        result.innerText = '"' + inputValue + ' is not a palindrome"';
        result.classList.add("isPalindromeFalse");
        result.classList.remove("isPalindromeTrue");
      }
    } else {
    alert("Please input a value"); // modifies <p>
    }
});```
2

what steps have you taken to debug?

what’s the link to the project? what tests do not pass?

also please hare your html

4

Hi! I have checked it and it works, but the side window in the assessment dashboard keeps saying that I must check for “A”, “eye” etc. to be palindromes - so I don’t really know where the problem lies.

const textInput = document.getElementById("text-input");
const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");

function cleanString (string) {
  const cleanArray = string.replace(/[^\w]/g, '').toLowerCase().split('');
  return cleanArray;
}

function isPalindrome(array) {
  let length = array.length;

  for (let i = 0; i < length / 2; i++) {
    if (array[i] !== array[length - 1 - i]) {
      return false;
    }
  }
  return true;
}

checkButton.addEventListener("click", () => {
    const inputValue = textInput.value;
    if (inputValue) {
      if (isPalindrome(cleanString(inputValue))) {
        result.innerText = '"' + inputValue + ' is a palindrome"';
        result.classList.add("isPalindromeTrue");
        result.classList.remove("isPalindromeFalse");
      } else {
        result.innerText = '"' + inputValue + ' is not a palindrome"';
        result.classList.add("isPalindromeFalse");
        result.classList.remove("isPalindromeTrue");
      }
    } else {
    alert("Please input a value"); // modifies <p>
    }
});



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=content-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Palindrome Checker</title>
</head>
<body>
<h1>Palindrome Checker</h1>
<p>This app will check if your input is a palidrome.</p>
<p>(any punctuation, spaces, and symbols will be removed)</p>

<div class="form-container">
<form id="form">
  <label for="text-input">Input your text here: <input id="text-input"></label>
  <button id="check-btn" type="button">Check</button>
  <p class="result" id="result">The result will appear here.</p>
</div>






<script src="script.js"></script>
</body>
</html>
5

Hi there and welcome to our community!

There are two simple issues to fix.

Firstly, you’re returning a string which includes quote marks. Remove the quote marks from either end of your return strings.

Secondly, your regex doesn’t remove underscores. The /w character class is equivalent to [A-Za-z0-9_], so the negation of this (as you use) will remove all non-alphanumeric characters except for the underscore.

Fix these two issues and your project will pass.

6

Thank you so much, I totally overlooked the quote marks! Still, I am so confused by regex…

This should work, right? [^a-zA-Z0-9] // I am passing alphanumeric, but ^ stands for negation, so everything except alphanumeric

7

Yes, that should work. Another option you have is that shorthand classes have negated counterparts.

For instance, /w is equivalent to [A-Za-z0-9_], whereas /W is equivalent to [^A-Za-z0-9_]. So you could find a way to write your regex a little more concisely, if you wished.

Here’s a useful explainer:

8

this is the link to the project, https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-palindrome-checker-project/build-a-palindrome-checker, please provide the challenge or project link when you ask for help

the issues I found are those pointed out by Igor

9

I see. Well, in the assignment it doesn’t mention underscores as exception, so I considered them as symbols. Thank you for the tutorial!

Btw I think I found a way to make the function even more concise:

const input = "palindrome???";
function isPalindrome (input) {
    let revInput = input.replace(/[^a-zA-Z0-9]/g, '').toLowerCase().split("").reverse().join("");
    return (input.replace(/[^a-zA-Z0-9]/g, '').toLowerCase() == revInput);
}
console.log(isPalindrome(input));
10

yeah, they are not alphanumerical characters. The issue is that \w is alphanumerica plus underscore, so on its own it doesn’t satisfy the project requirements

11

Esatto, grazie Ilenia, risolto! :slight_smile: