Build a Palindrome Checker - Build a Palindrome Checker

JavaScript
21

I corrected the 1st step, now I am pushing the result in a new Array.

I will try implementing your 2nd and 3rd advice. I am reading documentation of some methods after that.

thank you :slight_smile:

1 Like
22

Okay I got your point, I was also trying to that but it is inside a function scope so console statement not working, then I removed function keywords and parenthesis but I didn’t knew how to check output of a loop statement there.

So I wrote a similar code i browser console still I didn’t understood what is the problem.

Screenshot of the code I wrote in browser’s console-

Screenshot 2025-03-20 145945
Screenshot 2025-03-20 145945723×672 21.3 KB

23

For testing you can also set the input statically:

  //inputArea.value = inputArea.value.toLowerCase();
  inputArea.value = "_eye"

And call your function at the end of your code:

checkBtn.addEventListener("click", isPalindrome);
isPalindrome()

make sure to console log these variables so you can see what is being compared:

console.log(inputArea.value, reverseStr)

  if(inputArea.value === "") {
    alert("Please input a value");
  }
  else if(inputArea.value === reverseStr) {
1 Like
24

I am not able to solve it, I am not able to debug it, I added console statements after each method but not able to find the error. Please help me.

25

What is the output of your console statements.

It’s going to help you tremendously in the future to learn to debug your code.

1 Like
26 
const inputArea = document.querySelector("#text-input");
const checkBtn = document.querySelector("#check-btn");
const outputArea = document.querySelector("#result");

inputArea.value = "_eyes";

  inputArea.value = inputArea.value.toLowerCase();


  let newArr = inputArea.value.split("");


  const valids = "abcdefghijklmnopqrstuvwxyz0123456789";
  const validsArr = valids.split("");
  let finalArr = [];

  //console.log(validsArr);
  
  
    for(let i = 0; i < newArr.length; i++) {
      for(const char of validsArr) {
      if(newArr[i] === char) {
        finalArr.push(newArr[i])
      }
    }
  }

  //console.log(finalArr);
  let reversedArr = finalArr.reverse();

  //console.log(reversedArr);
  let reverseStr = reversedArr.join("");
  //console.log(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`;
  }


//checkBtn.addEventListener("click", isPalindrome);

I am getting every output as intended, loop and every method is working fine but test not passing.

27

Why are your console.log lines commented out?

Please share the output of your console.log statements.

Are there any other important variables to log to confirm which strings you are comparing?

28

And learning where to put your console.log() statements is a key part of learning how to debug your code along with learning how to structure your console.log() statements so you know exactly what values you’re looking at.

Let’s look at the where bit first. Your first console.log() statement is outputting the value of validsArr. That probably isn’t going to help you too much since it’s just the valids string converted to an array. Should be no surprises there…

Wise choice, though, to log the value of finalArr, since that’s going to show you what was created inside your nested for loops. If it shows you a value you expect, you’re good to go. Otherwise, you would want to add another console.log() inside the if statement to look at the values there, right? Something like: console.log("i: ",i,"char: ", char);, which is a good way to structure your console.log() statements so you know what you’re looking at.

If your finalArr looks good, logging reversedArr and reverseStr would not be very helpful since all you are doing there is reversing finalArr and turning it back into a string, right?

However, your next code block is an if statement where you make the final decision about whether the input value is a palindrome, yet you have no console.log() statements there. What if your logic is wrong there? How would you know if you don’t console.log() that conditional?

29

To add to what @fcc4b6d10c4-b540-4e2 has described, you could add a console log like this to examine what is being compared in the else if.

30

You were right , there was a logical error in my conditional statement, i fixed it and passed the test.

Sorry for replying so late. I had some exams so I was little busy. Thank you very much.

Learnt to debug my code little bit :smiley:

1 Like
31

Yes there was a logical error in conditional statement part.

I fixed it, test passed.

Also I was little busy due to some exams now I will be active.

Thanks a lot.

else if(finalStr === reverseStr) {
    outputArea.textContent = `${inputArea.value} is a palindrome`;
  }

I created a finalStr variable which has values after the unwanted stuffs were removed then checked it for palindrome. And it worked.

Now this project has been shifted 2 lessons later(under Regex) but I am happy I solved it without it but I will try this again without loop inside loop :sweat_smile: