Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

The program works as it is supposed to but does not pass the tests. for example, if i myself type in the test cases i get the desired results but when i Run the Tests it fails. Please assist

Your code so far

<!-- file: index.html -->
<!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>
    <div id="main">
      <h1>Palindrom Checker</h1>
      <p id="instruction-text">Enter text to check if its a palindrom:</p>
      <input type="text" id="text-input" class="text-input">
      <button id="check-btn" class="check-btn">Check</button>
      <p id="result" class="result"><i>''Result''</i></p>

      <p id="info">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>

/* file: styles.css */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: 244855;
}

h1 {
  font-family: Cambria;
  text-align: center;
}

#main {
  border: 1px solid black;
  padding: 19px;
  border-radius: 6px;
  background-color: E64833;
  width: 350px
}

#instruction-text {
  font-family: Trebuchet MS;
  text-align: center;
}

.text-input {
  width: 100%;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px;
  font-family: Trebuchet MS;
}

.check-btn {
  background-color: 244855;
  border-radius: 7px;
  width: 100%;
  height: 30px;
  color: white;
  font-family: Trebuchet MS;
  opacity: 0.7;
  cursor: pointer;
  /*pointer-events: none;*/
}

.check-btn.active {
  opacity: 1;
  pointer-events: auto;
}

.result {
  background-color: white;
  border-radius: 4px;
  padding: 7px;
  text-align: center;
  font-family: Trebuchet MS;
}

#info {
  font-family: Trebuchet MS;
  text-align: center;
  padding-top: 30px;
}


/* file: script.js */
const checkBtn = document.querySelector("#check-btn");
const inputText = document.querySelector("#text-input");
const resultText = document.querySelector("#result");
let filterInput;

checkBtn.addEventListener("click", () => {
  
  if (inputText.value === "") {
    alert("Please input a value");
    return
  }
  else {
    let reverseInput = filterInput.split("").reverse().join("");
    if (reverseInput !== filterInput) {
    resultText.innerText = `${inputText.value} is not a palindrome`;
    return;
  }
  resultText.innerText = `${inputText.value} is a palindrome`;
  }
  
});


inputText.addEventListener("keyup", () => {
  filterInput = inputText.value.toLowerCase().replace(/[^A-Z0-9]/ig, "");
  /*if(filterInput) {
    return checkBtn.classList.add("active");
  }
  checkBtn.classList.remove("active");*/
});

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

1 Like
2

Hello,
move this line filterInput = inputText.value.toLowerCase().replace(/[^A-Z0-9]/ig, ""); inside the callback function of the click event of the check button just before the line let reverseInput = filterInput.split("").reverse().join(""); and remove the addEventListener attached inputText variable

3

Thank you lots it finally passed. If you do not mind could you please explain to me why the addEventListener() function was causing it to fail.

1 Like
4

Actually, this line filterInput = inputText.value.toLowerCase().replace(/[^A-Z0-9]/ig, ""); was causing the problem, I recommended deleting the addEventListener because it will have an empty body
If you revert back to your original code, just press the console button, scroll a little bit you will find this error message Uncaught TypeError: Cannot read properties of undefined (reading 'split'), this happens because the user can click the check button without entering anything and filterInput will still be equal to undefined which causes the error above

2 Likes
5

Alright that makes so much more sense now. Thanks again.

2 Likes