Build a Palindrome Checker Project - Build a Palindrome Checker

Hi @sanity , thank you for your suggestion of starting an new thread.
Hi @Teller, I am posting again my message following @sanity suggestion.

My problem: 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

Please below is my js, HTML and CSS codes

Thank you for your time and help

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);
}

There are two problems.

  • Code seem to depend on additional actions that are not performed when tests change directly value of input field.
  • Result element contain slightly different text, than what is expected. For example instead of nope is not a palindrome, result has Sorry “nope” is not a palindrome

Thank you @sanity for your feedback. I am gonna fix those issues pointed.

Hi there,
I am still stuck on this certificate project for days! My code does check a palindrome or not by I could not past the tests. I only passed the first 4 tests. I do not understand.

Here are my questions:

  • are we supposed to write the code for each individual test?
  • or it is a generic code that should be used for all the tests (this was my understanding so far as it makes sense to me, but I have not been successful up to now)

Thank you for your time an support.

Best

It’s the second one. Tests are giving certain examples for how final code should behave in particular types of cases.

Could you share your updated code?

Hi @sanity

I am happy inform you that I passed the Palindrome challenge now by simplifying my code syntax and using only on event listener (instead of both a “click” and key “Enter”) to proceed the check up of the user input.

Thanks heaps for you support!

1 Like