Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

Describe your issue in detail here.
I’m having alot of trouble with this project. I have a hard time knowing where to start with JavaScript. I’ve been working on this project for several weeks of and on and I can’t get past the first three tests. I’m not sure what I’m not understanding.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Palindrome Checker</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Palindrome Checker</h1>
    <div class="border">
    <p>Check for a palindrome:</p>
    <input id="text-input">
    <button id="check-btn">Check</button>
    </div>
    <div id="result" required></div>
    <script src="./script.js"></script>
  </body>
</html>
/* file: styles.css */
html {
  background-color: orange;
}
.border {
  display: inline-block;
  border: 3px solid green;
  padding: 9px;
  background-color: lightgreen;
  margin-left: 350px;
}
h1, p {
  text-align: center;
}
#text-input{
  background-color: green;
  color: orange;
}
/* file: script.js */
const checkBtn = document.getElementById('check-btn');

const input = document.getElementById('text-input');

const result = document.getElementById('result');

let value = ''



const checkPalidrome = () => {
if (!str.length) {
  alert('Please input a value')
  } else {    
    const replacedStr = str.replace(/\W/g,'').replace(/_/g,'').toLowerCase()     
    const reversedStr = replacedStr.split('').reverse().join('')
    if (replacedStr === reversedStr) {
    result.innerHTML = str + ' is a palindrome'
    } else {
      result.innerHTML = str + ' is not a palindrome'
    }
  }
}

checkBtn.addEventListener('click', () => {checkPalidrome(value)})

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

1 Like

Hi @holiday387

Your code references the str variable, however the code has not declared that variable.

A few points

Notice that you’re not passing a value argument in the checkPalindrome() function initialization but passing one when you call the function.
Therefore str is not defined.

The value variable is not being updated with any value so it is still the empty string you initially set it to be.