Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

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

2

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.

3

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?

4

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

5

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

6

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

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.