Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hello! May I ask for some help? I can’t figure out what is wrong with my code. I still get step 10( “A man, a plan, a canal. Panama is a palindrome”.) and step 14(My age is 0, 0 si ega ym. is a palindrome" .) wrong.

Your code so far

<!-- file: index.html -->
<body>
    <div class="container">
      <h1><span class="word tooltip">Palindrome</span> Checker</h1>
      
      <div class="palindrome-box">
        <label for="text-input">Enter in text to check for a palindrome:</label>
        <input id="text-input" class="box-input" value="" type="text"  />
        <button class="btn" id="check-btn" >
          <svg xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="0 -960 960 960" width="25px" fill="#bac2c3"><path d="m358-488-97-96 42-42 54 54 100-100 42 42-141 142Zm426 368L532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
        </button>
        <div id="result" class="result hidden" ></div>
      </div>


    </div>
      


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

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

const checkIfPalindrome = (input) =>{
  const userText = input;

  if(input === ""){
    alert("Please input a value");
    return;
  }

  palindromeResult.replaceChildren();
  
  let userInputRegEx = input.replace(/[^A-Za-z0-9]/gi, "");
  
  let resultNote =`${userText} ${userInputRegEx === [...userInputRegEx].reverse().join("") ? "is" : "is not"} a palindrome`;


  const p = document.createElement("p");
  p.innerText = resultNote;
  palindromeResult.appendChild(p);
}




checkButton.addEventListener("click", () => {
  checkIfPalindrome(userTextInput.value);
});

/* file: styles.css */

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Hi there!

Remove the i flag from regex pattern.

4

I did, but it didn’t change anything

5

Hi

You need to add the toLowerCase() method to your userInputRegEx variable value.

2 Likes
6

Thank you. Now it works. I am not sure I 100% understand but is that because the reversed sentences don’t match the original ones, like in “My age is 0, 0 si ega ym” the "ym "word doesn’t match “My” because it starts with the lower case?

7

Yes that’s it. You can see from your tests that it didn’t work for those ones until you did this. It’s also a requirement of the test to turn everything to lower or upper case.

1 Like