Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hey, I can pass the first tests but when it comes to checking for a palindrome the auto tests does not count even though it does work when I do it manually. I verified if the id’s corresponded multiple times. I do not believe there is a typo but maybe you can find one. If it’s not a typo I clearly don’t see the mistake because the app works well.
I hope someone can help me.
Thank you !

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Palindrome checker</title>
    <meta charset="utf-8">
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
    <h1>Palindrome or not ?</h1>
    <div id="white">
      <div id="vertical">
        <input id="text-input" required>
        <button id="check-btn">Check</button>
        <div id="fit">
          <p id="result"></p>
        </div>
      </div>
    </div>
    <div id="info-div">
      <p id="info">Basically, a <i>palindrome</i> is a word that has the same backward and forward pronunciation, ignoring punctuation.</p>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

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



function cleanInputString(str){
  const regex = /[!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~\s]/g;
  return str.replace(regex, "");
}

const checkPal = () => {
  const getCleanUserInput = cleanInputString(userInput.value);
  const reversedInput = getCleanUserInput
  .split("")
  .reverse()
  .join("")

  if(reversedInput.toLowerCase() == getCleanUserInput.toLowerCase()){
    result.innerHTML = `<strong>${userInput.value}</strong> is a palindrome`
    return;
  }
  else {
    result.innerHTML = `<strong>${userInput.value}</strong> is not a palindrome`
    return;
  }
}

function checkValue (str){
  if (str === ""){
  t = 1;
  return;
}
}




checkBtn.addEventListener("click", () => {
  checkValue(userInput.value);
  if (t==1) {
    alert("Please input a value");
    result.innerHTML="";
    return;
  }
  else {
    checkPal();
  }
  userInput.value = ""
})

/* file: styles.css */
*{
  margin: 0;
  padding: 0;
}

body{
  background-color: #622222;
}


img{
  display: block;
  margin: auto;
  padding-top: 25px;
  width: 305px;
  height: 40px;
}

h1{
  color: white;
  text-align: center;
  font-size: 45px;
  padding: 55px 0;
}



#white{
  background-color: white;
  text-align: center;
  width: 400px;
  height: max-content;
  margin: auto;
  border-radius: 25px;
  word-break: break-all;
}

#vertical{
  padding-top: 55px;
  padding-bottom: 30px;
}

#text-input{
  width: 250px;
  height: 30px;
  border-top: none;
  border-right: none;
  border-left: none;
}

#check-btn{
  background-color: #622222;
  color: white;
  height: 35px;
  width: 70px;
  border-radius: 25px;
  margin-left: 9px; 
}




#result{
  margin-top: 20px;
  font-size: 30px;
  display: inline-block;
}

#info-div{
  background-color: #6c6d03;
  width: 400px;
  height: 80px;
  margin: auto;
  margin-top: 40px;
  padding-top: 15px;
  text-align: center;
  border-radius: 25px;
  font-weight: bold;
  font-size: 18px;
  color: white;
}

hr{
  margin: 0;
  padding: 0;
  display: inline-block;
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

3

On further testing, I think this global variable is the problem.

I moved it to the last evenlistener block and commented out the checkValue function and re-ran and all the palindrome tests passed.

So I would rewrite this section.

1 Like
4

Yes man it was it ! I initially dit it as a “backend value” (idk if I can call it like that) because I wanted to clear the value of the input of the user without userInput.value(“”) (it created some bug idk why) but now I found another way to dit it, removed this variable and everything worked ! Thank you !

1 Like
5

No problem. (You may note that I am not a man though. :pray:t3:)

1 Like
6

Oh yeah sorry; :laughing:
(note that i do not assume every programmer is a man and that it really was unintentional)(may seem like an unneccessary precision but u never know what can happen without nowadays)

7

it’s fine. I don’t usually correct people to be fair. But just felt like it that time.

8

Yeah why not ur completely right, I understand that having people u help not calling u the right way all day long may be exhausting. Anyways keep it up ! Your responses really help a lot of people !

1 Like