Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I have gotten all of them but 10 and 14. 10 is the “A man, a plan, a canal. Panama” one and 14 is the “My age is 0, 0 is ega ym.” one.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Palindrome Checker</h1>
    <input id="text-input" type="text" required></input>
    <button id="check-btn" type="submit">Check</button>
    <p id="result"></p>
    <script src="script.js"></script>
  </body>
</html>

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

function noInput() {
  if (textInput.value === "") {
    alert("Please input a value");
    result.innerText = "";
} else {
  palindrome();
}
};

function palindrome() {
  const forward = textInput.value.replace(/([^A-Za-z0-9])/g, "");
  const backward = forward.split("").reverse().join("");

  if (forward === backward) {
    result.innerText = `${textInput.value} is a palindrome`;
} else {
  result.innerText = `${textInput.value} is not a palindrome`;
}
}

checkButton.addEventListener("click", noInput);


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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3 Safari/605.1.15

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

One of the best debugging tools at your disposal is console.log().
I added one to your code and the result should tell you why you’re failing both of those tests:

Untitled
Untitled1500×635 72.5 KB

From the project instructions:

Note: You’ll need to remove all non-alphanumeric characters (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes.

3

Thank you, it’s solved! I had the toLowerCase() before but it wasn’t working. Still not sure what I was getting wrong because I could have sworn I had previously written the same code as above just with the toLowerCase() added and it didn’t work. Thank you anyways!