Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

Please help. The Code perfectly works in local i coded it on vsc and then i copied to freeCodecamp editor.The problem is that the button event doesn’t hapen when i check the console there aren’t any errors only the test faliures appear

Your code so far

// Getting DOM Elements
const input=document.querySelector("input");
const checkButton=document.getElementById("check-btn");
const result=document.getElementById("result");
const resultParagraph=document.querySelector("#result p");

// Defining fuctions
const isEmpty=(string)=>{return string===""};
const cleanInput=(string="")=>{  
  string=string.toLowerCase();
 const regex=/[\W_]/g
 return string.replace(regex,"");
  
};

const classRemover=(element,classes=[])=>{
  for(c of classes){
    if(element.classList.contains(c)){
      element.classList.remove(c);
    }
  }
};
const reverseString=(string="")=>{return string.split("").reverse().join("")};
//Adding event listeners
input.addEventListener("focus",()=>{
  input.style.backgroundColor="#28393b";
  input.placeholder="Put your input here";
});

checkButton.addEventListener("click",()=>{
  const inputText=input.value;
  result.classList.replace("hidden","visble");
  if(isEmpty(inputText)){
    classRemover(result,["sucess","wrong"]);
    result.classList.add("warning")
    resultParagraph.textContent="Your input shouldn't be empty.Try again";
    input.placeholder='Fill me out ';
    input.style.backgroundColor='#FFE451';
    alert("Please input a value")
    
  } else {
    const cleanedText=cleanInput(inputText);
    if(cleanedText===reverseString(cleanedText)){
      classRemover(result,["warning","wrong"]);
      result.classList.add("sucess");
      result.textContent=`${inputText} is a palindrome`;
    } else {
      classRemover(result,["sucess","warnig"]);
      result.classList.add("wrong");
      resultP.textContent=`${inputText} isn't a palindrome`
    }
    input.value='';
  }
});







WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

```text
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

Could you share your HTML/CSS code too please?

//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 Check</title>
  <link rel="shortcut icon" href="interrogation-point-150807_640.png" type="image/png">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <div id="input-container">
      <input id="text-input" type="text" placeholder="Put your input here">
      <button id="check-btn" type="button">Check</button>
    </div>
    <div id="instruccions">
      <p><span class="light-buld">💡</span> A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
    </div>
    <div id="result" class="hidden">
      <p></p>
    </div>


  </main>
  <script src="app.js"></script>
  
</body>
</html>
//CSS
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  font-size: 62.5%;
}
body{
  width: 100vw;
  min-width: 350px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  background-color: #1E1E1E;
}
main{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: 16px;
}
div{
  width: 40%;
  min-width: 60px;
  height: 190px;
  border: 2px solid gray;
  background-color: white;
  border-radius: 20px;
  padding: 10px 5px;
}
#input-container{
  display: flex;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
  column-gap: 15px;
  flex-wrap: wrap;
  
}
#instruccions{
  background-color: rgb(30, 65, 30);
  color: bisque;
  font-size: 2.1rem; 
}

input{
  border: none;
  border-bottom:  2px solid #00aabb;
  width: 120px;
  height: 30px;
  text-align: center;
}
input:focus{
  background-color: #28393b;
  color: aliceblue;
  border-bottom:  2px solid #00aabb; 
  outline: none;
  
  
    
}

:focus::-webkit-input-placeholder{
  color: aliceblue;
  opacity: 20%;
}
button{
  background-color: #28393b;
  width: 120px;
  height: 35px;
  color: whitesmoke;
  font-size: 1.8rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}
button:hover{
  background-color: #00aabb;
  color: black;
  border: 2px solid black;
  font-weight: bold;
}
.hidden{
  display: none;
}
.visible{
  font-size: 2.5rem;
  font-weight: bold;
  color: black;
}
.light-buld{
  width: 40px;
  height: 40px;
}
.warning{
  background-color:#FFE451;
  

}
.wrong{
  background-color: red;
  color: white;
}
.sucess{
  background-color: rgb(15, 226, 15);

}

i already know what’s happening.It’s the js file name :sweat_smile:

Hey, so I am having the same exact issue as you. Everything works on my local VSC and Chrome setup, but I can’t get the app to work on fCC’s editor. I thought added the <script src=“script.js”> before the closing tag, but the button function doesn’t work. I also tried <script src=“./script.js”> What was your solution?

So I figured it out. I accidentally commented out a variable and didn’t catch it. Have a good one!