Palindrome Checker - Is this a good start? + Issues

Hi there, I was hoping to get some feedback on the start of my Palindrome code. I think I have the right idea for the general structure, but I’m running into to some issues.

  1. The alert message does not display when the checked button is clicked. I think it is an issue with my textInput and an issue not recognizing an empty string? I’ve tried a few things, but nothing has worked.

  2. The checkInputString() does not work at all, but do I have the right I idea that basically, I’m using regex to search an input string, and then to display the appropriate message? I think my issue here is that I need to verify if the string is true/false based on if it matches the regex and then if it’s true, call result.innerHTML = "input is a Palindrome"

Anything that could point me in the right direction would be great.

//checks input upon clicking "Check" button
function checkInput() {
  if (textInput === " ") {
    alert("Please input a value.");
  } else {
    checkInputString();
  };

};

//function to check input string
function checkInputString(str) {     
  const stringA = "A";
  const regEx = /A/;
  result.innerHTML = "A is a Palindrome";
Javascript
//variable definitions
const checkButton = document.getElementById("check-btn");
const textInput = document.getElementById("text-input");
const result = document.getElementById("result");


//checks input upon clicking "Check" button
function checkInput() {
  if (textInput === " ") {
    alert("Please input a value.");
  } else {
    checkInputString();
  };

};

//function to check input string
function checkInputString(str) {
  const stringA = "A";
  const regEx = /A/;
  result.innerHTML = "A is a Palindrome";

};

//When checkbutton is clicked, start the checkInput()
checkButton.addEventListener = ("click", checkInput);
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>
    <header>
        <img src ="https://upload.wikimedia.org/wikipedia/commons/3/39/FreeCodeCamp_logo.png"></img>
    </header>
    <main>
        <section class="palindrome-box-container" id="palindrome-input-box">
            <p>Enter text to check for a palindrome</p>
                <input id="text-input" type="text" placeholder="Type palindrome"></input>
                <input type= "button" id="check-btn" value="Check"></button>
                <div id="result">
                </div>
        </section><br>
        <section class="definition-box" id="definition-box">
            <p>A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
            </p>
        </section>     
    </main>
    <script src="./script.js"></script>
  </body>
</html>

Hi @CodingForACareer955

You need to access the value of textInput. Your comparison is for a space, not an empty string.

The syntax is not correct for an event listener.

You are hard coding a result.

To check for a palindrome, you’ll need to check it both forwards and backwards.

Good work so far.

Happy coding

1 Like

To fix:

  1. Get input value properly.
  2. Pass input to checkInputString().
  3. Revise regex for palindrome.
  4. Check if input is palindrome.

Revised code:

solution redacted

@Aishamushtaq123

Please do not provide portions of the answer.
This is a certification project.

It is best to provide hints so they can solve it on their own and earn the certification that way

Thanks for the feedback! You’ve definitely gave me an idea as to where I went wrong. Especially checking for the palindrome. I think I know what to do next.

1 Like

Thanks for breaking down the general steps to this program. It gives an idea how to write my code now.