Build a Palindrome Checker - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I am following full stack curriculum and regex lesson is after 2 chapters. I am unable to form a logic how that how I can remove all those symbols and spaces. Please guide me.

PS- I thought I can list all symbols and spaces then split it into array. Then use a for loop and filter, but I got some error and I am heavily confused now. Please help me.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Palindrome Checker</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <label for="text-input">Enter your word here: </label>
    <input id="text-input"></input>
    <button id="check-btn">Check</button>
    <p id="result"></p>
    <script src="script.js"></script>
</body>

</html>


/* file: script.js */
const inputArea = document.querySelector("#text-input");
const checkBtn = document.querySelector("#check-btn");
const outputArea = document.querySelector("#result");


function isPalindrome() {
  inputArea.value = inputArea.value.toLowerCase();
  let newArr = inputArea.value.split("");
  let reversedArr = newArr.reverse();
  let reverseStr = reversedArr.join("");

  if(inputArea.value === "") {
    alert("Please input a value");
  }
  else if(inputArea.value === reverseStr) {
    outputArea.textContent = `${inputArea.value} is a palindrome`;
  }
  else {
    outputArea.textContent = `${inputArea.value} is not a palindrome`;
  }
}

checkBtn.addEventListener("click", isPalindrome);

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker - Build a Palindrome Checker

2

Can you please show us your attempt at filtering out all of the spaces and symbols?

3

This was my logic for removing spaces and other symbols-

const symbols = " _-,.()/\|:";
  const symbArr = symbols.split("");
  
  function filteringStr() {
  for(let i = 0; i < newArr.length; i++) {
    for(const char of symbArr) {
      if(newArr[i] === char) {
        return false;
      }
      else {
        return true;
      }
    }
  };
  }

  const filteredArr = newArr.filter(filteringStr);

  let reversedArr = filteredArr.reverse();

Still none of those 6 test still passed. I can’t identify what is the problem with my logic.

4

I think there is some issue in the looping part but I have never written something like this before so I am not confident.

My idea is very simple-

check for each index if any of the elements from the symbols array is present in the input text’s array.

Please guide me.

5

Can you think of a regular expression you could use to remove any characters that are not alphanumeric?

6

This site can be really useful for regex: https://regex101.com/

Explore the Common Tokens in the Quick Reference in the lower right

1 Like
7

yes, you are checking each character against only the first character in symbols

but it can be fixed and would work

8

Seems like a limiting approach since there could be symbols like @ or ^ or & or *… that are not in the symbols string.

9

yes it is a limiting approach but I think after I learn regex (after 1 more chapter ) then it won’t be limiting. I think this project is given before regex to test our loop, function, callbacks and some methods knowledge.

10

To be honest I didn’t understood anything. :anxious_face_with_sweat: I need to study about it atleast once .

11

how ? please explain me or help me understand it.

12

I think I got it. When my loops matches for a symbol, it returns a boolean so it doesn’t checks further.

How can I fix it ?

13

Are you sure you need to use regex here?

Maybe this previous lesson would be useful:
https://www.freecodecamp.org/learn/full-stack-developer/lecture-working-with-common-string-methods/how-can-you-test-if-a-string-contains-a-substring

14

I didn’t realize that basic regular expressions were not introduced before the Palindrome Checker in the Certified Full Stack Developer curriculum (they are in the legacy JavaScript curriculum).

Since you aren’t prepared to use regular expressions yet, you could take the opposite approach to what you are currently trying to do. You don’t know what special characters the test string might include, but you do know what characters your string is allowed to accept – all alphanumeric characters, right? So maybe check to see if the original string contains an alphanumeric character and if it does, keep it. Skip everything else.

Hope that helps you…

1 Like
15

yes nice idea, let me try it. If I face any issue then I will ask here.

16 
const valids = "abcdefghijklmnopqrstuvwxyz0123456789";
  const validsArr = valids.split("");
  let finalArr = [];
  
  
    for(let i = 0; i < newArr.length; i++) {
      for(const char of validsArr) {
      if(newArr[i] === char) {
        finalArr.push(newArr[i])
      }
    }
  }

  let reversedArr = finalArr.reverse();

I changed the logic as you said but still those 6 tests fail. If there is a problem in looping part then please help me understand it.

17

I thought so, maybe my assumption was wrong.

18

put some console.log() lines in your loop so you can see what’s happening.

Don’t rely on the tests alone! Do your own tests.

19

Add console.log() to your code like this and analyze the result. See what your function is comparing, don’t try to guess and work blind.

  reversedArr = finalArr.reverse();
  console.log("reversedArr:", reversedArr)

  console.log(inputArea.value, reverseStr)
  if(inputArea.value === "") {
    alert("Please input a value");
  }
  else if(inputArea.value === reverseStr) {
    
    outputArea.textContent = `${inputArea.value} is a palindrome`;
  }
  else {
    outputArea.textContent = `${inputArea.value} is not a palindrome`;
  }
20

  1. The loop problem is that the ‘return false’ and ‘return true’ from inside the loop ends the loop at the first character checked. If a match is found, the function should ‘return false’, but if no match is found, it should only return ‘true’ after checking all characters.

  2. And also ’ .reverse()’ modifies the array in place, which might cause side effects.
    It’s better to create a copy before reversing.

  3. Instead of looping through ‘symbArr’, you can use ‘symbArr.includes(char)’, which is cleaner and more efficient.