Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

When the #test-input element contains the text A man, a plan, a canal. Panama and the #check-btn element is clicked, the #result element should contain the text “A man, a plan, a canal. Panama is a palindrome”.

Shouldn’t the Id be (#text-input). Will this be problem when I submit this project?

Your code so far

<!-- file: index.html -->
<!Doctype html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
   <div>Palidrone Checker</div>
   <h2 id="result"></h2>
   <input type="text" id="text-input" placeholder="Type Here" />
   <button type="submit" id-"check-btn" for="text-input">Submit</button>

   </body>
  </html>

/* file: styles.css */
* {
  box-sizing: border-box;
  text-align: center;
}


/* file: script.js */

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Hi @demegilb1

Try replacing the - with an equals sign after the id attribute property.

Happy coding

3

you are right, that’s a typo, use text-input all the time, you will be fine

4
Palidrome Checker

Submit I can't figure out why the tests won't pass but my code works
5

share your current code please, both html and js

6
Palidrome Checker

Submit
7 
<!Doctype html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
   <div>Palidrome Checker</div>
   <p id="result"></p>
   <input type="text" id="text-input" placeholder="Type Here" />
   <button onclick="isPalindrome(textInput.value)" type="submit" id="check-btn" for="text-input">Submit</button>


<script>
  const result = document.getElementById('result');
  const checkButton = document.getElementById('check-btn');
  const textInput = document.getElementById('text-input');



// Reversal function for the inputted string
const reversal = (input) =>
  input.split('').reverse().join('')
  //clean up string function

  
// Palindrome checking Function

const isPalindrome = (input) => {
 
  const regex = /[\s.,_\/@'";:*^%':;?!()|\-$]/gi;
   let cleanedString = input.replace(regex, "")
  let reversedString = reversal(cleanedString);

  if(textInput.value ===  ""){
    return alert("Please input a value")
    } 
    else if (reversedString.toLowerCase() === cleanedString.toLowerCase()){
    return result.innerHTML = `"${textInput.value} is a palindrome"`
  } 
  else {
    return result.innerHTML = `"${textInput.value} is not a palindrome"`
  }
};





  </script>
   </body>
  </html>
8

remove the quotes from your output

2 Likes
9

Ilenia. I hope you have the best day ever. Love you and thank you. You’re a god walking

10

That’s inappropriate. Please avoid.

11

Noted! Won’t make this mistake again

1 Like
12

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