Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

No matter what I type, the message always says it is a palindrome. I know the else statement at the end should work so I think the problem is further up in the code. What is the best way to troubleshoot this problem?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="styles.css"></style>
  </head>

  <body>
    <div id="main">
      <h1>Is it a Palindrome?</h1>
      <input id="text-input"></input>
      <button id="check-btn" for="text-input">Check</button>
      <p id="result"></p>
      <script src="script.js"></script>
    </div>
  </body>
</html>


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

const cleanString = textInput.value.replace(/\W/g, '');

checkButton.addEventListener("click",() => {
  if (textInput.value === "") {
    alert("Please input a value");
  } else if (textInput.value.length === 1) {
    result.innerText = `${textInput.value} is a palindrome`;
  } else if (cleanString === cleanString.split('').reverse().join('')) {
    result.innerText = `${textInput.value} is a palindrome`;
  } else {
    result.innerText = `${textInput.value} is not a palindrome`
  }
});

/* file: styles.css */
body {
  background-color: #fff5d7;
}

#main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-family: Verdana
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) 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

2

You could try going through the function by hand step-by-step, trying to figure out what values would have specific variables at a given time and what should then happen.

Another option is adding some logging to console, to confirm ie. that cleanString is what is expected.

1 Like
3

Thanks for the help. My cleanString variable was in the wrong place. I moved it and changed the regex to remove underscores and the added code to change all letters to lower case. All done!