Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

What shall I do for the code listed? The code is still working but does not meet the instructions from 6 to the end.

Your code so far

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <div class="container">
      <div class="form">
      <h4>Enter a text to check for palidrome</h4>
        <form class="form-container">
          <input id="text-input" name="input" type="text">
          <button id="check-btn" class="btn" >Check</button>
        </form>
      <div>
        <p id="result"></p>
      </div>
    </div>
    <div class="info">
<p class="info-txt"> A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
    </div>
    </div> 
    <script src="script.js"></script>   
</body>

</html>

/* file: script.js */
let textInput=document.getElementById("text-input");
let checkBtn=document.getElementById("check-btn");
let result=document.getElementById("result")
console.log(checkBtn.value)
checkBtn.addEventListener("click",(e)=>{
   
   if(textInput.value===""){ 
  alert("Please input a value");
    
  }
  else{
    if(isPalindrome(textInput.value)){
result.innerHTML=`${textInput.value} is a palindrome.`
  }
  else{
    result.innerHTML=`${textInput.value} is not a palindrome.`
  }
  }
}) 


function isPalindrome(text){
  let updatedText=text.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
  
  let reversedText=updatedText.split('').reverse().join('').toLowerCase();
  return updatedText===reversedText;
} 

/* file: styles.css */
.form-container #text-input{
  border:none;
  border-bottom:2px solid purple;
  margin-right: 2rem;
  outline:none;
  background:transparent;
  font-size:20px;
font-family:Arial;
  }
body{
  padding:0;
  margin:0;
}
.container{
  display: flex;
  flex-direction:column;
  justify-content:centre;
  align-items:centre;
}
.form{
  background:white;
  box-shadow:0 10px 2px blue;
  width: 400px;
  height: 200px;
  border: 2px solid black;
  padding: 1rem;
  border-radius:10px;
}
.btn{
  background:blue;
  color:white;
  font-weight:500;
  font-size:15px;
  border:none;
  padding:.5rem 1rem;
  border-radius:10px;
  cursor:pointer;
  
}
.info{
  background:rgb(0,115,0);
  border-radius:10px;
  padding: 1rem;
  margin-top:2rem;
}
.info-txt{
  font-family:Arial;
  font-size:22px; 
  color:white;

}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

1 Like
2

Hi @tedys2662

Try removing period at the end of the sentence.

I’m not sure why the tests are failing. At the moment they are taking a long time to complete.

Happy coding

3

Thank you for your kind response!
The code still not much the requirements after I made the correction suggested from you. Is there any means to solve this issue?

4

I don’t know why the tests are failing and agree with @Teller that the tests are sluggish. I went through your code and added missing semi-colons, removed the unused e parameter passed to the event listener, removed the period in your result messages, and removed an unnecessary toLowerCase() method. The tests are still not passing yet all the results match the test results in the preview screen. I’d say copy your code and come back to this later. Maybe it’s a network issue.

5

the tests are submitting the form, the page is reloading, and so the tests are failing.

You can fix this in multiple ways, but you should or avoid the submitting, or when submitting prevent the reloading

1 Like
6

I did not get it. Could you clarify please

7

when the form is submitted it reloads the page, so the tests are not able to see the result

you need to remove that action, there are ways working with forms, or you could not work with a form

1 Like
8

do u mean preventDefault() method?

9

Thank you all for your kindness! I get it.