Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

Hey everyone, I’ve been at this for a while and when I try to test my code in the console nothing shows up. I don’t really know what I’m doing wrong

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="styles.css" rel="stylesheet"/>
    <title>Palindrome Checker</title>
  </head>

  <body>
    <main>
      <h1>Palindrome Checker</h1>
      <div id="input" class="input" >
        <h3>Enter in text to check for a palindrome:</h3>
        <input id="text-input" ></input>
        <button id="check-btn" type="button">Check</button>
      </div>
      <div id="result" ></div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>
/* file: styles.css */
body {
  text-align: center;
  margin-top: 200px;
  font-family:  sans-serif;
  background-color: #A89B8C;
}

main {
  display:  absolute;
  margin-left: auto;
  margin-right: auto;
  border-radius:  30px;
  padding-top:  10px;
  padding-bottom: 30px;
  background-color: #EDF0DA;
  width:  60%;
  max-width:  500px;
  border-bottom: 5px solid black;

}

h3 {
  font-weight:  normal;
  font-size:  15px;
  padding-bottom: 10px;
}

#text-input {
  border: transparent;
  border-bottom:  1px solid black;
  margin-right:  20px;
  padding-right:  100px;
  background-color: transparent;
}

#check-btn {
  width:  90px;
  height: 30px;
  border-radius:  20px;
  border: transparent;
  background-color:  #AA4465;
  color:  white;
  cursor : pointer;
}
/* file: script.js */
const checkButton = document.getElementById('check-btn');
const result = document.getElementById('result');
const textInput = document.getElementById('text-input');

function palindrome(str) {
  //var for converting str in lowercase and remove non-alpha
  const alphanumericOnly = str.lowerCase().match([/a-z0-9/g]).join('') ;
  const reverseAlpha = alphanumericOnly.reverse().join('')
  //determine if palindrome
  if (alphanumericOnly === reverseAlpha) {
    result.innerText = `${str} is a palindrome`;
    } else {
      result.innerText = `${str} is not a palindrome`;
      }
  
}

//check button for no input
checkButton.addEventListener('click', ()=> {
  if (textInput === "") {
    alert("Please input a value");
  } else {
      return result;
  }
})
//target button

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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

Hello!

There are some issues here:

  • lowerCase() => toLowerCase()
  • the g(lobal) in the regex must be outside of the class[ ]
  • you have to split() a string before you can reverse it, reverse() needs an array as input

You also need to check and return textInput.value in the if else at the bottom.

ah thanks :sweat_smile: I have another issue. I get the error " [TypeError: Cannot read properties of undefined (reading ‘trim’)] " and I’ve removed all the code from script.js and still get it. I can’t see anything wrong with the html unless I’m bugging?

Maybe it’s from the tests, and it gives an error because you have not written all the code?

oh okay cool thanks. I thought I was doing something wrong and tried to fix it before going on

You can repost your code if you still don’t pass and we’ll see how we can fix it.