Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
This code works , the auto coder stops at the alert check and I can clearly see the alert is working, as are all of the other user story requirements . Why is the auto coder saying it does not pass ?

Your code so far

const input = document.querySelector(“#text-input”);
const button = document.querySelector(“#check-btn”);
const result = document.querySelector(“#result”);

const checkForPalindrome = () => {
if (input.value === “”) {
alert(“Please input a value”);
} else {
// remove any non alphabet characters from the input
cleanInput = input.value
.trim()
.toLowerCase()
.replace(/[^a-z]/g, “”);

if (cleanInput === "a") {
  result.innerHTML = `${input.value} is a palindrome`;
} else if (cleanInput === cleanInput.split("").reverse().join("")) {
  result.innerHTML = `${input.value} is a palindrome`;
} else {
  result.innerHTML = `${input.value} is not palindrome`;
}

}
};

button.addEventListener(“click”, checkForPalindrome);

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Palindrome Checker</title>

    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <main class="container">
      <h1 class="title">Is it a Palindrome?</h1>
      <div class="palindrome-div">
        <label for="text-input"
          >Enter in text to check for a palindrome:
        </label>
        <input id="text-input" value="" type="text" />
        <button id="check-btn">Check</button>
        <div class="results-div hidden" id="result"></div>
      </div>
      <div>
        <p>
          A <dfn>palindrome</dfn> is a word or sentence that's spelled the same
          way both forward and backward, ignoring punctuation, case, and
          spacing.
        </p>
      </div>
    </main>
    <script src="./app.js"></script>
  </body>
</html>


/* file: styles.css */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background-color: black;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.container {
  padding: 20px;
  margin: 20px;
}


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

const checkForPalindrome = () => {
  if (input.value === "") {
    alert("Please input a value");
  } else {
    // remove any non alphabet characters from the input
    cleanInput = input.value
      .trim()
      .toLowerCase()
      .replace(/[^a-z]/g, "");

    if (cleanInput === "a") {
      result.innerHTML = `${input.value} is a palindrome`;
    } else if (cleanInput === cleanInput.split("").reverse().join("")) {
      result.innerHTML = `${input.value} is a palindrome`;
    } else {
      result.innerHTML = `${input.value} is not palindrome`;
    }
  }
};

button.addEventListener("click", checkForPalindrome);

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

Hi @coloradoz99

I replied to your post earlier with the following.

The css file name is missing an s at the end.

The script is not linked to the freeCodeCamp editor. Use the file name script instead of app

This variable is not declared.

Try making the changes and going from there.

Happy coding

4

Thanks did not see your reply. Odd that my codes works just fine with out making cleanInput a const.
Now stuck on the following - per the definition in this project " eye for of 1 eye is a palindrome" ???
When the #text-input element contains the text 1 eye for of 1 eye and the #check-btn element is clicked, the #result element should contain the text 1 eye for of 1 eye. is not a palindrome .

5

Hi @coloradoz99

You have a typo.

Happy coding

6

Thankyou and yes I did , now all works except for this one
When the #text-input element contains the text 1 eye for of 1 eye. and the #check-btn element is clicked, the #result element should contain the text 1 eye for of 1 eye. is not a palindrome .

Issue is that this is actually a palindrome so my code says it is a palindrome to it is not
Thanks

1 Like
7

hi @coloradoz99

you have to change .replace(/[^a-z]/g, “”) to .replace(/[^a-z0-9]/g, “”) .
and you forget to add “a” to “is not palindrome”.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.