Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I need help with this code for the Palindrome Checker project. It won’t accept my code even though it is correct.

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>Is it a Palindrome?</title>
    <link rel= "stylesheet" href = "./styles.css">
    </head>
    <body>
      <h1>Is it a Palindrome?</h1>
      <div class= "searchbox">
        <h2>Enter in text to check for a palindrome:</h2>
        <input id="text-input">
        <button type= "submit" id="check-btn">Check</button>
        <div class="result">
            <p id="result"></p>
        </div>
      </div>
      <script src="script.js"></script>
      </body>
  </html>

/* file: styles.css */
body {background: #8165;}
h1 {text-align: center; color: #353590; margin: 70px}
.searchbox {border: 2px solid #124577; border-radius: 15px; width: 450px; height: 200px; text-align: center; margin-top: -10px;margin-left: 50px;background: #359090}
h2 {font-size: 1.1em;}
#text-input {margin: 10px; border: 2px solid #124577; border-radius: 10px;}
button{border: 2px solid #124577;
height: 20px; width: 40px; border-radius: 15px; background: rgb(255, 127, 127); font-size: 0.5em;}
.result {border: 2px solid #124577; border-radius: 15px; text-align: center; width: 150px; margin-left: 130px;}

/* file: script.js */
// Select necessary elements
const character = document.querySelector("#text-input");
const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");

// Regular expression to remove non-alphanumeric characters
const regex = /[^a-z0-9]/gi;

// Function to clean the string (remove non-alphanumeric characters and convert to lowercase)
function cleanCharacter(str) {
  return str.replace(regex, "").toLowerCase();
}

// Function to check if input is empty and alert the user
function inputAlert(str) {
  if (str === "") {
    alert("Please input a value");
    return true;
  }
  return false;
}

// Event listener for the check button
checkButton.addEventListener("click", () => {
  const inputValue = character.value;

  // If input is empty, show alert and return
  if (inputAlert(inputValue)) return;

  // Clean the input and check if it's a palindrome
  const cleaned = cleanCharacter(inputValue);
  const reversed = cleaned.split("").reverse().join("");

  // Check if the cleaned string is a palindrome
  if (cleaned === reversed) {
    result.textContent = `"${inputValue} is a palindrome"`; // Wrap the entire result in quotes
  } else {
    result.textContent = `"${inputValue} is not a palindrome"`; // Wrap the entire result in quotes
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Can you say more about how you absolutely know your code is perfect?

1 Like
3

The palindrome is working a returning the required result message including the qoutes in the beginning anf the end

4

And how do you know the required result message is perfect?

5

It matches every character of the assignment.

6

And you verified this how?

7

With my own eyes. It seems like you are trying to guide me to noticie something, but I am not sure what. Unless you are being snarky. I did not say my code was perfect, but correct. Are you seeing a mistake somewhere?

8

I’m trying to get you to say a specific set of steps you took to check your code so we can have a conversation about what you did. I’m just getting vague statements like “with my eyes”, which is hard for me to work with.

9

I see. The code works. It delivers the message it’s supposed to deliver. It checks for palindromes and when the list of required words and phrases are entered it correctly identifies them. To me that signifiies it being correct. The error messages are not specific in why the individual steps are not deemed correct.

10

Ok, well since you’re still not giving a specific set of steps you took, I can’t say much. :person_shrugging: There’s a problem in your output.

11

How does the result appear on the screen?

12

Hi there. your output element should not have the quote marks around it’s text.

13

Yes you are correct. It accepted the project once I removed them. I have however removed them in the past and it still did not accept it. I have noticed in the past that solutions are not accepted sometimes but wheb the exact same information is entered again it is accepted. Thank you.

1 Like
14

Usually that means you made more than just one change.

1 Like
15

are you saying that the sequence of changing more than one thing in the code is triggering an error? i copied the exact same code that i had just erased and it accpeted it.

16

No, I’m saying that you likely had another issue in there that you did not realize.

17

that would seem like the likely explanation except it is literally the same code copied so clearly something else is going on. i do appreciate you taking your time to answer me though.

18

Then your web browser is broken and not correctly executing JavaScript as written :person_shrugging: