Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hello guys , When i test the code below it works fine but it is not marking my answers. Can someone check , maybe i got the code wrong

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Palindrome Calculator</title>
    <meta charset = "UFT-8">
    <meta content = "device = device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h3>Vicksar Lot</h3>
    <h1>Is it a palindrome ?</h1>
    <div class="r1" id="result">
    <form>
      <label for="search">
       <p> Enter in text to check for a palindrome:</p>
        </label>
      <input id="text-input">
      <button id="check-btn">check</button>
    </form>
</div>
<script src="./script.js"></script>
  </body>
</html>


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


const isAlphanumericPalindrome = (str) => {
  const cleaned = str.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
  console.log(`Cleaned input: ${cleaned}`);
  return cleaned === cleaned.split("").reverse().join("");
};

checkBtn.addEventListener("click", () => {
const input = textInput.value.trim();

if(input === ""){
alert("Please input a value");
return;
}


 if (isAlphanumericPalindrome(input)) {
    result.textContent = `"${input} is a palindrome"`;
    result.style.color = "green";
  } else {
    result.textContent = `"${input} is not a palindrome palindrome"`;

  }
});   

/* file: styles.css */
body{
  background-color:#222222;
  color:#E8DEDE;
  font-family:sans-serif;
text-align:center;

}

h3{
  font-size:30px;

}
h1{
  font-size:45px;

}
.r1{
display: flex;
  align-items: center;
  justify-content: center;

}
form{
  border:solid 1px #E8DEDE;
width:400px;
height:120px;
background-color: #E8DEDE;
border-radius:14px;
box-shadow:
}
label p {
  margin-top:20px;
  color:#222222;

}

input{
  background-color:#E8DEDE;
  width:220px;
  height:25px;
  border:none;
  border-bottom:solid 2px #4574d1;
}

button{
  width:70px;
  height:30px;
  border-radius:10px;
  border:none;
  background-color:#4574d1;
color:#E8DEDE;


}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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

do not put the quotes

3

You also have another issue here:

You are setting the textContent of this div to show the result of the palindrome check, thereby removing all of the elements within the div at the same time. You don’t want to be nesting anything inside this div if you’re going to override its contents like that.

As @ILM says, you need to remove the quotation marks from your result strings, as the template literal is already a string. However, you also need to correct the string which you return when the user enters text which is not a palindrome, as you have a repeated word there.