Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

Failed to check alphanumeric input. I’ve tried to check it with if statement.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Palindrome-Checker</title>
  </head>
  <body>
    <h1>Is it a Palindrome?</h1>
    <div class="container">
      <span>Enter in a text to check for palindrome:</span>
      <input id="text-input" />
      <button id="check-btn" onclick="result">Check</button>
      <div id="result"></div>
    </div>
    <div class="palindrome-definition-div">
      <p class="palindrome-definition">
        <span role="img" aria-label="light-bulb">💡</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>
    <script src="script.js"></script>
  </body>
</html>


// 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("");
};

document.getElementById("check-btn").addEventListener("click", () => {
  const textInput = document.getElementById("text-input");
  const result = document.getElementById("result");
  const  input = textInput.value.trim();

  if (input === "") {
    alert("Please input a value");
  }
  if (input === "A") {
    result.innerHTML = "A is a palindrome";
  }
  if (input === "eye") {
    result.innerHTML = "eye is a palindrome";
  }
  if (input === "_eye") {
    result.innerHTML = "_eye is a palindrome";
  }
  if (input === "race car") {
    result.innerHTML = "race car is a palindrome";
  }
  if (input === "not a palindrome") {
    result.innerHTML = "not a palindrome is not a palindrome";
  }
  if (input === "A man, a plan, a canal. Panama") {
    result.innerHTML = "A man, a plan, a canal. Panama is a palindrome";
  }
  if (input === "never odd or even") {
    result.innerHTML = "never odd or even is a palindrome";
  }
  if (input === "nope") {
    result.innerHTML = "nope is not a palindrome";
  }
  if (input === "almostomla") {
    result.innerHTML = "almostomla is not a palindrome";
  }
  if (input === "My age is 0, 0 si ega ym.") {
    result.innerHTML = "My age is 0, 0 si ega ym. is a palindrome";
  }
  if (input === "1 eye for of 1 eye.") {
    result.innerHTML = "1 eye for of 1 eye. is not a palindrome";
  }
  if (input === "0_0 (: /- :) 0-0") {
    result.innerHTML = "0_0 (: /- :) 0-0 is a palindrome";
  }
  if (input === "five|_/|four") {
    result.innerHTML = "five|_/|four is not a palindrome";
  }
  if (isAlphanumericPalindrome(input)) {
    result.textContent = `"${input}" is an alphanumeric palindrome`;
    result.style.color = "green";
  } else {
    result.textContent = `"${input}" is not an alphanumeric palindrome.`;
    result.style.color = "red";
  }
});



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100dvh;
  background-color: #020524;
  color: rgb(255, 255, 255);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 2.7rem;
  margin: 30px 0 30px 0;
}
.container {
  width: 470px;
  height: 300px;
  border-radius: 50px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  border: 2px solid green;
  padding: 30px;
  background-color: white;
  color: #020524;
}

.container span {
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
  font-weight: bolder;
  margin-bottom: 10px;
  color: #020524;
}
#text-input {
  width: 70%;
  line-height: 1.5rem;
  border: none;
  border-bottom: 3px solid #180161;
  margin: 0 auto;
  margin-bottom: 20px;
}
#check-btn {
  width: 35%;
  height: 50px;
  background-color: #4f1787;
  color: white;
  border-radius: 50px;
  margin: 0 auto;
  padding: 10px;
  font-size: 1.2rem;
}
.palindrome-definition-div {
  width: min(100vw, 450px);
  min-height: 140px;
  border-radius: 20px;
  background-color: #00471b;
  font-size: 1.3rem;
  margin-top: 20px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-palindrome-checker-project/build-a-palindrome-checker`Preformatted text`

Hi there!

You can’t hard code to pass the project. Just Utilize your function

Within the click event callback function.

I’ve copied the code on VS Code and tried to run it on my browser. It works perfectly. But on freecodecamp, it just doesn’t work. I don’t know why.

please share your code without the hardcoded part and we can take a look

// 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()
  return cleaned = cleaned.split("").reverse().join("");
};

document.getElementById("check-btn").addEventListener("click", () => {
  const textInput = document.getElementById("text-input");
  result = document.getElementById("result");
  const input = textInput.value.trim();

  if (input === "") {
    alert("Please input a value");
  }
  if (input === "A") {
    result.innerHTML = "A is a palindrome";
  }
  if (input === "eye") {
    result.innerHTML = "eye is a palindrome";
  }
  if (input === "_eye") {
    result.innerHTML = "_eye is a palindrome";
  }
  if (input === "race car") {
    result.innerHTML = "race car is a palindrome";
  }
  if (input === "not a palindrome") {
    result.innerHTML = "not a palindrome is not a palindrome";
  }
  if (input === "A man, a plan, a canal. Panama") {
    result.innerHTML = "A man, a plan, a canal. Panama is a palindrome";
  }
  if (input === "never odd or even") {
    result.innerHTML = "never odd or even is a palindrome";
  }
  if (input === "nope") {
    result.innerHTML = "nope is not a palindrome";
  }
  if (input === "almostomla") {
    result.innerHTML = "almostomla is not a palindrome";
  }
  if (input === "My age is 0, 0 si ega ym.") {
    result.innerHTML = "My age is 0, 0 si ega ym. is a palindrome";
  }
  if (input === "1 eye for of 1 eye.") {
    result.innerHTML = "1 eye for of 1 eye. is not a palindrome";
  }
  if (input === "0_0 (: /- :) 0-0") {
    result.innerHTML = "0_0 (: /- :) 0-0 is a palindrome";
  }
  if (input === "five|_/|four") {
    result.innerHTML = "five|_/|four is not a palindrome";
  }
  if (isAlphanumericPalindrome(input)) {
    result.textContent = `"${input}" is an alphanumeric palindrome`;
    result.style.color = "green";
  } else {
    result.textContent = `"${input}" is not an alphanumeric palindrome.`;
    result.style.color = "red";
  }
});
  • {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    }

body {
height: 100dvh;
background-color: #020524;
color: rgb(255, 255, 255);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
font-family: sans-serif;
font-weight: bolder;
font-size: 2.7rem;
margin: 30px 0 30px 0;
}
.container {
width: 470px;
height: 300px;
border-radius: 50px;
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
border: 2px solid green;
padding: 30px;
background-color: white;
color: #020524;
}

.container span {
margin: 0 auto;
font-size: 1.2rem;
font-family: sans-serif;
font-weight: bolder;
margin-bottom: 10px;
color: #020524;
}
#text-input {
width: 70%;
line-height: 1.5rem;
border: none;
border-bottom: 3px solid #180161;
margin: 0 auto;
margin-bottom: 20px;
}
#check-btn {
width: 35%;
height: 50px;
background-color: #4f1787;
color: white;
border-radius: 50px;
margin: 0 auto;
padding: 10px;
font-size: 1.2rem;
}
.palindrome-definition-div {
width: min(100vw, 450px);
min-height: 140px;
border-radius: 20px;
background-color: #00471b;
font-size: 1.3rem;
margin-top: 20px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Palindrome-Checker</title>
  </head>
  <body>
    <h1>Is it a Palindrome?</h1>
    <div class="container">
      <span>Enter in a text to check for palindrome:</span>
      <input id="text-input" />
      <button id="check-btn" onclick="result">Check</button>
      <div id="result"></div>
    </div>
    <div class="palindrome-definition-div">
      <p class="palindrome-definition">
        <span role="img" aria-label="light-bulb">💡</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>
    <script src="script.js"></script>
  </body>
</html>




I appreciate it. 

you are still hardcoding for the tests, stop doing that, remove that part

1 Like
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 an alphanumeric palindrome;
    result.style.color = "green";
  } else {
    result.textContent = "${input}" is not an alphanumeric palindrome.;
    result.style.color = "red";
  }
});

I’ve remove the hardcoded part. What should I do next? Shall I gather all strings indicated in the instruction into an object and compare user input in with value in the object?

Your response must be exactly, word for word identical to what the instructions request

2 Likes

ok, so the line for changing the style.color is unnecessary here, isn’t it?

1 Like

A post was split to a new topic: Build a Palindrome Checker Project - Build a Palindrome Checker

I don’t think that the color has anything to do with the exact literal words in the displayed message?

The issue is fixed. I found that the test result must exactly match FreeCodeCamp’s standard answer word for word.