Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I have checked and rechecked this overe and over with AI and I cannot tell what is wrong please help!

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" type="text/css">
  <script src="script.js" defer></script>
</head>
<body>
  <div class="container">
    <input id="text-input" type="text" placeholder="Enter text here">
    <button id="check-btn">Check Palindrome</button>
    <p id="result"></p>
  </div>
</body>
</html>


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

  if (inputText === "") {
    resultElement.textContent = "Please input a value";
    return;
  }

  const cleanInput = inputText.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
  const isPalindrome = cleanInput === cleanInput.split("").reverse().join("");

  if (isPalindrome) {
    resultElement.textContent = `"${inputText}" is a palindrome`;
  } else {
    resultElement.textContent = `"${inputText}" is not a palindrome`;
  }
});

document.getElementById("text-input").addEventListener("input", () => {
  const inputTextValue = document.getElementById("text-input").value.trim();
  const checkBtn = document.getElementById("check-btn");
  checkBtn.disabled = inputTextValue === "";
});


/* file: styles.css */
*{margin:0;
padding:0;
box-sizing:border-box;
background-color:green;
}
.container{
  width:100%;
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  


  

}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Why are you using AI? You are supposed to code this yourself.

  1. You are not using an alert()

  2. You have quotes in the output that isn’t in the requirements.

3

Can you describe what you’ve tried without AI to debug?

Note - you shouldn’t be using AI to write projects.

4

I used the AI to debug my code

5

I would instead try debugging the code yourself.

What happens when you try to manually try one of the test cases?

6

Debugging your code is just as much part of the task as coding it is. Besides, the AI clearly do not understand the requirements if it can’t tell you what is wrong with it.

  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.

Your error message is supposed to be presented to the user, using an alert(), not added to the page.

  1. When the #text-input element only contains the letter A and the #check-btn element is clicked, the #result element should contain the text A is a palindrome.

The A does not have quotes around it. So neither should your text on the page.