Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Please help. I don’t know what is wrong. It is not working.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Palindrome Checker</title>
    <meta charset="UTF-8"></meta>
    <link rel = "stylesheet" href="styles.css">
  </head>
  <body>
    <section class="section-header">
      <img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" />
      <h1>Is it a Palindrome?</h1>
    </section>
    <section class="section-body">
      <p id="body-text">Enter a text to check for a palindrome:</p>
      <label for="text-input"></label>
      <input id="text-input" type="text" />
      <button id="check-btn" type="button">Click</button>
      <span id="result"></span>
    </section>
    <section class="section-footer">
      <p>💡 A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
    </section>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const inputValue = document.getElementById("text-input");
const checkButton = document.getElementById("check-btn");
const buttonClick = checkButton.onclick();
const result = document.getElementById("result");
const checkPalindrome = (inputValue) => {
    const cleaned = inputValue.value.trim().toLowerCase().replace(/[\W_]/g,'');
  const reversed = value.split('').reverse().join('');
  if(inputValue.value.trim() === ""){
    alert("Please input a value");
    return false;
  }
  else if(inputValue.value.toLowerCase() === "A"){
    return true;
  }
  else{
  return cleaned === reversed;
}
};
checkButton.addEventListener("click", () => {
  const isPalindrome = checkPalindrome();
  if(isPalindrome){
    result.innerText = `${inputValue.value} is a palindrome`;
  }
  else{
    result.innerText = `${inputValue.value} is not a palindrome`;
  }
})


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

body{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  background-color: #0a0a23;
  padding: 5vh;
  margin: 0vh;
}

.section-header{
  color: #ffffff;
  margin: 1vh 30vh 1vh 30vh;
  font-size: 3vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 5vh 0px 4vh 0px;
}

img{
  width: 25%;
  margin: 0px 0px 25px 0px;
}

.section-body{
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 10px blue solid;
  padding: 15px 15px 2px 15px;
  margin: 5vh;
}

.section-footer{
  background-color: #00471b;
  color: #ffffff;
  padding: 5vh;
  margin: 1vh 55vh 0vh 55vh;
  font-size: 2vh;
  text-align: center;
}

#text-input{
  border-color: #a020f0;
  border-width: 0px 0px 3px 0px;
  padding: 5px 10px 5px 10px;
  margin: 5px 15px 25px 35px;
  width: 25vh;
}

button{
  background-color: #a020f0;
  color: #ffffff;
  border-radius: 10px;
  padding: 5px;
  margin: 5px;
  width: 10vh;
  height: 4vh;
}

button:hover{
  cursor: pointer;
  background-color: #a060f0;
}

#body-text{
  text-align: center;
  margin: 35px 5px 25px 15px;
  font-size: 20px;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Hi. Can you please state which tests have not passed. When I put it through I think only the first 3 passed? I suggest you work on one bit at a time like getting the checkbutton and click to work.

When posting your updated code in the forum post please add 3 backticks before and after your code.