Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Unfortunately I’m failing to progress past the third stage what’s wrong here?

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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
<input id="text-input">
<button id="check-btn">.
  <div id="result">/div>
    <script src="script.js"></script>
  </body>
</html>







/* file: script.js */
const checkButton = document.getElementById("check-btn")
checkButton.addEventListener("click" ," ");
function checkPalindrome(){
const inputText = document.getElementById("text-input"). value
const result = document.getDocumentById("result");
const inputArr = inputText.split("").filter((c) => cmatchc.match(/[a-z0-9]/));
for(let i = 0; i<inputText.length; i++){
  if(inputArr[i] !== inputText[inputArr.length - i -1]){
console.log(inputText[i])
result.innerText = `${inputArr}   It is not a palindrome`
return
  }
} 
    result.innerText = `${inputText} It is a palindrome`
}


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1.1 Safari/605.1.15

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

if you add Preformatted text at the end of the link the link will not work

3

Your html is broken, you may want to use an html validator and fix it until it gives no more errors Ready to check - Nu Html Checker

Nothing happens when you click the button because your callback is an empty string, not a function:

checkButton.addEventListener("click", " ");

start fixing those

4

I’m still stuck on step 4 of activating the button, < please input text.

5

and what is your new code?

6

document.getElementById(“check-btn”).addEventListener(“click”, function () {
const input = document.getElementById(“text-input”).value;
const result = document.getElementById(“result”);Preformatted text

8

the whole of it please, otherwise I can’t do no testing

9

Preformatted text### Tell us what’s happening:
Hi here’s the updated fulll code,

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>Palindrome Checker</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Palindrome Checker</h1>
  <p>Enter a string to check if it is a palindrome:</p>
  <input type="text" id="text-input">
  <button id="check-btn">Check</button>
  <div id="result"></div>

  <script src="script.js"></script>
</body>
</html>

type or paste code here



/* file: script.js */
document.getElementById("check-btn").addEventListener("click", function () {
  const input = document.getElementById("text-input").value;
  const result = document.getElementById("result");

  // Function to check if a string is a palindrome
  function isPalindrome(str) {
    // Remove non-alphanumeric characters and convert to lowercase
    const cleaned = str.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
    // Reverse the cleaned string
    const reversed = cleaned.split("").reverse().join("");
    // Compare cleaned string with its reverse
    return cleaned === reversed;
  }

  // Display the result
  if (isPalindrome(input)) {
    result.textContent = `${input} is a palindrome`;

  } else {
    result.textContent = `${input} is not a palindrome`;
  }
});


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1.1 Safari/605.1.15

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

10

Hi have you spotted the bug from this code?

11

I have not seen the code yet

12

you are not doing that at all

  1. When you click on the #check-btn element without entering a value into the #text-input element, an alert should appear with the text "Please input a value" .

There is no part of your code that even looks barely like an attempt at this

do you understand what that test is asking for?

13

Yes checking if you words are reversible with the same meaning or a pattern.

14

Provide an example of what step 4 should look like.

15

Please explain to me what this mean in your own words

  1. When you click on the #check-btn element without entering a value into the #text-input element, an alert should appear with the text "Please input a value" .