Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
I HAVE NO IDEA WHAT ITS ASKING
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 .
AND IT KEEPS SAYING ‘Please enter a valid input’ AND NOT DOING THE INPUT

Your code so far

<!-- file: index.html -->
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Palindrome Checker</title>
  </head>
  <body>
    <main>
     <h1>Is it a Palindrome?</h1>
    <input 
      type="text" 
      id="text-input" 
    />
    <button id="check-btn">Check</button>
    <div id="result"></div>
    </main>
  </body>
      <script src="script.js"></script>
</html>

/* file: styles.css */


/* file: script.js */
/* file: script.js */
const checkButton = document.getElementById("check-btn");
const input = document.getElementById("text-input").value;
const result = document.getElementById("result");


// check if palindrome and update div text
function palindrome(str) {

  // lowercase and remove alphanumerics
  const alphanumericArray = str.toLowerCase().match(/[a-z0-9]/g);
  const cleanString = alphanumericArray.join("");
  const reverseString = alphanumericArray.reverse().join("");

  //check for palindrome
  if (cleanString === reverseString) {
    result.innerHTML = `${input} is a palindrome`;
  } else {
    result.innerHTML = `${input} is not a palindrome`;
    result = input.value
  }
};


// check if string is empty
function validInput() {
  if (input === "") {
    alert("Please input a value");
    return;
  } else {
    palindrome(input);
  }
}


checkButton.addEventListener("click", validInput);

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

The input variable is not defined properly.

Even when text in entered, the alert says to enter valid input.

Happy coding

4

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