Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Not sure where I’m going wrong here, I keep getting “Uncaught TypeError: cleanText.split is not a function”, but if I just use cleanText.reverse everything comes up as not a palindrome.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Palindrome Checker</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link ref="stylesheet" href="./styles.css"/>
  </head>
    <body>
      <h1>Is It A Palindrome?</h1>
      <h2>Type a word or phrase into the box to find out:</h2>
      <div id="input">
        <input type="text" id="text-input" placeholder="Is it a Palindrome?" required></input>
        <button id="check-btn" for="text-input">Check</button>
        </div>
        <div id="result">
          </div>
      <script src="./script.js"></script>
      </body>
</html>

/* file: styles.css */
body{background: forestgreen;
  height:100vh;
width:100vw;
margin: 0 0;
}
h1{
  font-size:2.25rem;
  text-align: center;
  text-decoration: underline;
}
h2{
  text-align: center
}
#input{
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px black;
  border-radius: 50%;
  width: 75%;
  height: 30%;
  margin: auto;
  background-color: white
}
input{
  border-bottom: solid 1px black;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
button{
  border: outset;
  margin-left: 5px;
}
#result{
  background: rgb(250, 50, 0);
  height:10%;
  width: 50%;
  margin: 10px auto;
  text-align: center;
  color: black;
}



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

  const palCheck = () => {
  if (text.value === "") {alert("Please input a value")
  }

  const cleanText = text.value.replace(/[^0-9a-zA-Z]/g, "").toLowerCase;
const revText = cleanText.split("").reverse().join("");

  if (cleanText === revText) {
   result.innerHTML = `${text.value} is a Palindrome.`
  } else {
result.innerHTML = `${text.value} is not a Palindrome.`
  }
};
btn.addEventListener("click", palCheck)

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

add console.log(cleanText) before the line that errors out, see if it has the value you expect

1 Like
3

What does this line store into cleanText? (It isn’t what you think)

4

I was thinking that was taking the text as a string and removing anything that wasn’t alphanumeric and then converting it all to lowercase. should .value not be there?

5

Did you try using console.log yet?

6

yeah I have console.log(clean text);
right under that line but the console is still displaying “your test output will go here”

7

ok, so I changed my clean text declaration line to:
const cleanText = text.value.replace(/[\W\s]/g, '').toLowerCase
to target non-numeric and white space characters and the console log is now returning:
[Function: toLowerCase]

8

And that was your issue to begin with. Your regex pattern looked good before.

9

There is the problem

10

and do you want it to be a function? or do you want to use that function?

11

ahhh! got it. I added the parenthesis after .toLowerCase, and I’m getting the right returns in the console now. Also no more error on the revText declaration. amazing how such a simple overlook can throw off the whole code. thank you for your time!

12

certification passed! Thank you JeremyLT, ILM, and [fcc4b6d10c4-b540-4e2], that was driving me nuts!