Build a Palindrome Checker - Build a Palindrome Checker

Curriculum Help
1

Tell us what’s happening:

Which expert can help take a look at where the problem lies. I see all the results are ok, but can’t pass the tests. I’m really appriciate.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Palindrome Checker</title>
    <link rel='stylesheet' href='./styles.css'/>
</head>

<body>
<h1>Is it a Palindrome?</h1>
<div class='container'>
<p>Enter in text to check for a palindrome:</p>
<div><input id='text-input' type='text'>
<button id='check-btn' value='check'>Check</button>
</div>
<p id='result'></p>
</div>


<script src='./script.js'></script>
</body>

</html>


/* file: styles.css */
h1 {
  color: white;
  text-align: center;
}
body {
  background-color: rgb(181, 181, 199);
}
.container {
  display: grid;
  justify-content: center;
  width: 100%;
  height: 140px;
  align-items: center;
  background-color: blue;
  border: 1px soild gray;
}
input{
  margin: 0 5px;
  text-align: centern;
}
#result {
  visibility: hidden;
}

/* file: script.js */
const checkBtn = document.getElementById('check-btn')
const inputs=document.getElementById('text-input')
let inputStr = ''
const result=document.getElementById('result')

inputs.addEventListener('input',()=>{
  inputStr = inputs.value
})


checkBtn.addEventListener('click',()=>{
  if(inputStr === ''){
    alert('Please input a value')
    result.style.visibility='hidden'
    return;
  }
  if(isPalind(inputStr)){
    result.textContent = inputStr + ' is a palindrome';
    result.style.visibility='visible';
    inputs.value=''
  }else{
    result.textContent = inputStr + ' is not a palindrome';
    result.style.visibility='visible';
    inputs.value=''
  }
})

function isPalind(str){
    const regex = /[a-z]+/ig;
       let filterStr = str.match(regex)
       filterStr = filterStr
       console.log(filterStr)
    if(filterStr === null){
      return true;
    } 
    if(filterStr.length ===1 && filterStr[0].length===1){
      return true;
    }
      filterStr = filterStr.join('').toLowerCase()
  let reStr = filterStr.split('').reverse().join('');
  if(reStr === filterStr){
    return true
  }else{
    return false;
  }
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker - Build a Palindrome Checker

2

What specific tests are failing?

What specifically have you done in your efforts to debug?

3

All the tests that check the ‘#result’ element text content are all failed. But I see the result on HTML are correct.

4

As you have an input element which will automatically display user input as it is typed, why do you have this?

inputs.addEventListener('input',()=>{
  inputStr = inputs.value
})

I think if you refactor to remove this and just test the value of inputs in your click event listener, you’ll pass a few more tests. There may be issues with your palindrome logic though, as there will still be failing tests.

5

Thanks very much, now solved. But still don’t understand why the results in the HTML is correct. The other issue is the number must be included. Thanks.