Build a Palindrome Checker Project - Build a Palindrome Checker

I have entered the necessary code with a little extra stuff to make the result disappear after a certain amount of time and for the textbox to be empty after clicking ‘Check’. However, when I ‘Run the Tests’, it shows me as only completing four of the first requirements. I’ve run the code in FCC and in CodePen and it works. Why is the ‘Run the Tests’ not acknowledging that the rest of the requirements passes?

Your code so far

<!-- file: index.html -->
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alex's Palindrome</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <main>
      <h1><strong>PALINDROME CHECKER</strong></h1>
      <h3><i><span class="palindromeword">Palindrome</span> is a word or sentence that is spelled the same way forward and backword disregarding punctuation, case, and spacing.</i><h3>
        <div class="inputarea">
          <p class="check">Check if your text is a palindrome:<p>
          <input id="text-input" type="textbox" pattern="^[a-zA-Z]" required></input>
          <button id="check-btn">Check</button>
          <div id="result" class="answer"></div>
        <div>   
    </main>
  </body>
  <script src="./script.js"></script> 
</html>
/* file: styles.css */
body {
  background: #FDA172;
}

h1 {
  text-align: center;
  font-family: Corbel, Times New Roman;
  font-weight: bold;
  margin-top: 50px;
  font-size: 55px;
  color: #e40066;
}
.inputarea {
  width: 500px;
  height: 175px;
  background-color: #6AA5A9;
  border-radius: 8px 10px;
  z-index: 1;
}

h3 {
  color: #e40066;
  margin-left: 375px;
  margin-right: 375px;
  margin-top: 15px;
}

.palindromeword {
  text-decoration: underline;
}

input {
  position: relative;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 3px solid #f4b333;
  text-align: center;
  font-size: 20px;
  color: #67032f;
  bottom: -25px;
  margin-left: 95px;
  width: 250px;
  background: #f4b333;
}

button {
  position: relative;
  background: #fb4d3d;
  color: white;
  bottom: -25px;
}

.check {
  position: relative;
  top: 25px;
  right: -85px;
  font-size: 20px;
  color: #45625D;
  z-index: 0;
}

.answer {
  position: relative;
  bottom: -25px;
  right: -105px;
  font-size: 19px;
  color: #45625D;
}
/* file: script.js */
const textInput = document.getElementById("text-input");
const button = document.getElementById("check-btn");
const result = document.getElementById("result");

button.onclick = getResult  

function getResult() {
if (textInput.value == "") {
     alert("Please input a value.");  
   }  else {
     palindrome()
   }
}

function palindrome() {
  const temp = textInput.value.toLowerCase() 
                .replace(/[^A-Za-z]/g, ''); 
  const rev = temp.split("").reverse().join(""); 
  if(temp === rev) {
 result.innerText = textInput.value + "\u00A0" + "is a palindrome";
    clear(textInput);
  } else {
   result.innerText = textInput.value + "\u00A0" + "is not a palindrome ";
   clear(textInput);
}
   end(); 
  }

function end(){
  setTimeout(() => {
    const result = document.getElementById("result");
     result.style.visibility = "hidden";
    }, 2000); 
}

  function clear(textInput) {
  textInput.value = "";
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

Tests are expecting using standard spaces in result, rather than the \u00A0.

Thanks for the reply,

I’ve tried using the standard spaces. They don’t work.

What’s your updated code?

Welcome to the forum @s_alexis09

Since this is for a project I won’t give you the specific code.

There may be an issue with how your values are stored and updated.

If you enter A the correct result is shown.
When you enter A a second time, nothing is shown.
From then onwards the checker does not display a message for any letter or word, except for the alert.

Happy coding

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alex's Palindrome</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <main>
      <h1><strong>PALINDROME CHECKER</strong></h1>
      <h3><i><span class="palindromeword">Palindrome</span> is a word or sentence that is spelled the same way forward and backword disregarding punctuation, case, and spacing.</i><h3>
        <div class="inputarea">
          <p class="check">Check if your text is a palindrome:<p>
          <input id="text-input" type="textbox" pattern="^[a-zA-Z]" required></input>
          <button id="check-btn">Check</button>
          <div id="result" class="answer"></div>
        <div>   
    </main>
  </body>
  <script src="./script.js"></script> 
</html>
body {
  background: #FDA172;
}

h1 {
  text-align: center;
  font-family: Corbel, Times New Roman;
  font-weight: bold;
  margin-top: 50px;
  font-size: 55px;
  color: #e40066;
}
.inputarea {
  width: 500px;
  height: 175px;
  background-color: #6AA5A9;
  border-radius: 8px 10px;
  z-index: 1;
}

h3 {
  color: #e40066;
  margin-left: 375px;
  margin-right: 375px;
  margin-top: 15px;
}

.palindromeword {
  text-decoration: underline;
}

input {
  position: relative;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 3px solid #f4b333;
  text-align: center;
  font-size: 20px;
  color: #67032f;
  bottom: -25px;
  margin-left: 95px;
  width: 250px;
  background: #f4b333;
}

button {
  position: relative;
  background: #fb4d3d;
  color: white;
  bottom: -25px;
}

.check {
  position: relative;
  top: 25px;
  right: -85px;
  font-size: 20px;
  color: #45625D;
  z-index: 0;
}

.answer {
  position: relative;
  bottom: -25px;
  right: -105px;
  font-size: 19px;
  color: #45625D;
}
type or paste code here
const textInput = document.getElementById("text-input");
const button = document.getElementById("check-btn");
const result = document.getElementById("result");

button.onclick = getResult  

function getResult() {
if (textInput.value == "") {
     alert("Please input a value.");  
   }  else {
     palindrome()
   }
}

function palindrome() {
  const temp = textInput.value.toLowerCase() 
                .replace(/[^A-Za-z]/g, ''); 
  const rev = temp.split("").reverse().join(""); 
  if(temp === rev) {
 result.innerText = textInput.value + "\s" + "is a palindrome";
    clear(textInput);
  } else {
   result.innerText = textInput.value + "\s" + "is not a palindrome ";
   clear(textInput);
}
   end(); 
  }

function end(){
  setTimeout(() => {
    const result = document.getElementById("result");
     result.style.visibility = "hidden";
    }, 2000); 
}

  function clear(textInput) {
  textInput.value = "";
}

The code runs but without a whitespace. Instead, the letter ‘s’ appears where there should be a space. I tried it different ways but still no space.

Thanks for the reply,

The issue you mentioned is only in FCC not Codepen. Maybe it’s something with their testing?

1 Like

The tests are strict, so sometimes valid code may not pass.

I have the same issue as s_alexis09. My code does discriminate a palindrome from a non-palindrome yet for now I did not succeed to pass any of the tests. I am stuck on the very first one (i.e. the check on trhe letter A). I am confused. Any hint? Thanks

Hi @Konan

Please post you code and the issue you are having in a new post so the forum can assist.

Happy coding

Hi @s_alexis09

Typed mom
image

The result has an s with no space between the input value and the message.

The time delay was tricking my eyes.

Hi @Teller, please below is my js, HTML and CSS codes
Thank you for your time

My js code

const palindromeInputArea = document.querySelector(".palindrome-play-area input");
const checkButton = document.querySelector(".palindrome-play-area button");
const showResult = document.getElementById("result");
let filterPalindromeInputArea;


checkButton.addEventListener("click", (e) => {
   e.preventDefault();
  //alert message when there is no entered value in <input>
    if (palindromeInputArea.value === "") {
    alert("Please input a value");
  }
  //seperates the input into individual charaters; reverse their order
  //and join them together into a single word
  let reversePalindromeInputArea = filterPalindromeInputArea.split("").reverse().join("");
  //shows the palindrome test result 
  //by displaying a dedicated space 
  //for that
  showResult.style.display = "block";
  
  
  
  if (filterPalindromeInputArea !== reversePalindromeInputArea) {
    return showResult.innerHTML = `Sorry <span>"${palindromeInputArea.value}"</span> is not a palindrome`;
  }
  return showResult.innerHTML = `Well done! <span>"${palindromeInputArea.value}"</span> is a palindrome`; 
 
}
);

//event listener on the <input> to collect entered value bu users
palindromeInputArea.addEventListener("keyup", () => {
  //the code below removes spaces & all special characters from input value
  filterPalindromeInputArea = palindromeInputArea.value.toLowerCase().replace(/[^A-Za-z0-9]/ig, "");
  if (filterPalindromeInputArea) {
    return checkButton.classList.add("active");
  }
  showResult.style.display = "none";
  checkButton.classList.remove("active");

});

My HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Build a Palindrome Checker
    </title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
   
  <main>
     <h3 class="title">&copy; freeCodeCamp</h3>
    <header>
      <h1>Is it a Palindrome?</h1>
    </header>
    <div id="palindrome-input-area" class="palindrome-play-area">
      <p for="text-input" class="description-input">Enter in text to check for a palindrome:</p>
      <input id="text-input" name="text-input" type="text" placeholder="Enter a text and/or numer">
      <button id="check-btn">Check</button>
      </input>
      <div>
        <div id="result"></div>
      </div>
    </div>
    <div class="palindrome-description">
      <p id="idea-bull">💡</p>
      <p id="palindrome-text">A palindrome is a word or sentence </br> 
      that's spelled the same way both </br>
      forward and backward, ignoring </br>
      punctuation, case, and spacing.</p>
    </div>
  </main>
  <script src="./script.js"></script>
  </body>
</html>

My CSS code

 * {
    box-sizing: border-box;
}

:root {
  /* colors */
  --body-color: #0a0a23;
  --button-color: #5a01a7;
  --bkg-description-color: #00471b;
  --shadow-color: #022895;

body {
  background-color: var(--body-color);
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100%vh;
}

main {
 position: absolute; 
 top: 150px;
}


.title,
h1,
#palindrome-text {
  color: white;
}

.title {
  text-align: center;
  font-weight: lighter;
  font-size: 20px;
  position: relative;
  top: 5px;
}

h1 {
  font-size: 2.15rem;
}

.palindrome-play-area {
background-color: white;
max-width: 300px;
padding: 0em 1em 1em 1.5em; 
border-radius: 10px;
box-shadow: 2.5px 5px var(--shadow-color);

}

.palindrome-play-area button.active {
  opacity: 1;
  pointer-events: auto;
}


#check-btn {
  background-color: var(--button-color);
  border-radius: 7.5px;
  padding: 2.5px;
  color: white;
  font-size: 11px;
  cursor: pointer;
  width: 75px;
}

.palindrome-description {
  display: grid;
  grid-template-columns: 0.18fr 2fr;
  position: relative;
  top: 20px;
  background-color: var(--bkg-description-color);
  width: 300px;
  border-radius: 10px;
  padding: 0em 1em 1em 1.5em;
}
input {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1.80px solid var(--button-color);
}
.description-input {
  padding: 15px 0; 
} 

#result {
  padding-top: 15px;
  display: none;
  
}

span {
  color: var(--button-color);
}

Hi all,

Thank you guys for all the support. I solved the problem. The problem was in four areas. The main issue was the solution portion for checking for a palindrome. In the end I was able to keep my clear function.

\s is not a space :slightly_smiling_face: . Space is just " ".

@Konan for convenience please start new thread for your problem.