Build a Palindrome Checker Project - Build a Palindrome Checker

one single character class, not 22, one character class matches one character, your regex matches a string like this, and replacees it with an empty string:

! @ # % ( ) - { } [] [] : ; ', ? \ / _ | *` ~ $ ^ + = < >  “

You really need to review about regular expressions

But I need JS to ignore these characters when checking if input’s palindrome. I searched online but I can’t find anything good.

const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");
const input = document.getElementById("text-input");
const inputValue = input.value.trim();
function check() {
  if (inputValue === "") {
    alert("Please input a value");
  } else { 
    return false;
  }
}

function palindrome() {
  inputValue.replace(/[^0-9a-zA-Z]/g, '').toLowerCase();
  const inputValueReversed = inputValue.split("").reverse().join("");
  if (inputValueReversed === inputValue) {
    result.innerText = `${input.value} is a palindrome`;
  } else if (inputValueReversed !== inputValue) {
    result.innerText = `${input.value} is not a palindrome`;
  }
}
checkButton.addEventListener("click", palindrome);
checkButton.addEventListener("click", check);

I tried a different regex. It seems to be working now.
But else doesn’t. I tried else and else if. The consolle doesn’t see any errors but I only get if and not else or else if. Same with the first function.

input.value changes while the program execute, whilte inputValue doesn’t, its value is determined once the preview load and never changed

I added inputValue in every function but now my code doesn’t work.
Is there some kind of mistake? It’s said “read only” when I open my console. Tried searching online but I still don’t get it. Here’s my code:

function palindrome() {
  const inputValue = input.value.trim();
  inputValue.replace(/[^0-9a-zA-Z]/g, '').toLowerCase();
  const inputValueReversed = inputValue.split("").reverse().join("");
  if (inputValueReversed === inputValue) {
    result.innerText = `${input.value} is a palindrome`;
  } else {
    result.innerText = `${input.value} is not a palindrome`;
  }
}

Tried with const, let and just inputValue = input.value.trim(); . All the same.

replace() returns a new string, you always have to assign its return to something (or chain off of it).

Make sure you use input.value in your check function as well.


When I fix your replace code inside the palindrome function and use input.value in your check function your code passes all the tests for me.

When the #text-input element contains the text race car and the #check-btn element is clicked, the #result element should contain the text race car is a palindrome - isn’t working

When the #test-input element contains the text A man, a plan, a canal. Panama and the #check-btn element is clicked, the #result element should contain the text A man, a plan, a canal. Panama is a palindrome - isn’t working

When the #text-input element contains the text never odd or even and the #check-btn element is clicked, the #result element should contain the text never odd or even is a palindrome - isn’t working

When the #text-input element contains the text nope and the #check-btn element is clicked, the #result element should contain the text nope is not a palindrome - isn’t working

When the #text-input element contains the text almostomla and the #check-btn element is clicked, the #result element should contain the text almostomla is not a palindrome - isn’t working

When the #text-input element contains the text My age is 0, 0 si ega ym. and the #check-btn element is clicked, the #result element should contain the text My age is 0, 0 si ega ym. is a palindrome - isn’t working

When the #text-input element contains the text 0_0 (: /-\ :) 0-0 and the #check-btn element is clicked, the #result element should contain the text 0_0 (: /-\ :) 0-0 is a palindrome - isn’t working

When the #text-input element contains the text five|\_/|four and the #check-btn element is clicked, the #result element should contain the text five|\_/|four is not a palindrome - isn’t working

My code:

const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");
const input = document.getElementById("text-input");
const inputValue = input.value.trim();
function check() {
  const inputValue = input.value.trim();
  if (inputValue === "") {
    alert("Please input a value");
  } else { 
    return;
  }
}

function palindrome() {
  const  inputValue = input.value.trim();
  let inputValueNew = inputValue.replace(/[^0-9a-zA-Z]/g, '').toLowerCase();
  const inputValueReversed = inputValue.split(" ").reverse().join(" ");
  if (inputValueReversed === inputValueNew) {
    result.innerText = `${input.value} is a palindrome`;
  } else {
    result.innerText = `${input.value} is not a palindrome`;
  }
}
checkButton.addEventListener("click", palindrome);
checkButton.addEventListener("click", check);

I see you marked a solution, did you manage to solve it?

Yes, I did:) :sparkling_heart: :sparkling_heart: :sparkling_heart: :sparkling_heart: :sparkling_heart:

1 Like