Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
I am working on this cert project and it works just fine on in vs code, the auto grader is saying amongst other things that I am not firing an alert which I am. What is going on with the auto coder ?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Palindrome Checker</title>

    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <main class="container">
      <h1 class="title">Is it a Palindrome?</h1>
      <div class="palindrome-div">
        <label for="text-input"
          >Enter in text to check for a palindrome:
        </label>
        <input id="text-input" value="" type="text" />
        <button id="check-btn">Check</button>
        <div class="results-div hidden" id="result"></div>
      </div>
      <div>
        <p>
          A <dfn>palindrome</dfn> is a word or sentence that's spelled the same
          way both forward and backward, ignoring punctuation, case, and
          spacing.
        </p>
      </div>
    </main>
    <script src="./app.js"></script>
  </body>
</html>


/* file: styles.css */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background-color: black;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.container {
  padding: 20px;
  margin: 20px;
}


/* file: script.js */
const input = document.querySelector("#text-input");
const button = document.querySelector("#check-btn");
const result = document.querySelector("#result");

const checkForPalindrome = (e) => {
  if (input.value === "") {
    alert("Please input a value");
  } else {
    // remove any non alphabet characters from the input
    cleanInput = input.value
      .trim()
      .toLowerCase()
      .replace(/[^a-z]/g, "");

    if (cleanInput === "a") {
      result.innerHTML = `${input.value} is a palindrome`;
    } else if (cleanInput === cleanInput.split("").reverse().join("")) {
      result.innerHTML = `${input.value} is a palindrome`;
    } else {
      result.innerHTML = `${input.value} is not palindrome`;
    }
  }
};

button.addEventListener("click", checkForPalindrome);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.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

I am working on the palindrome checker and mine is working in all user stories but the auto coder is saying it is not. I have been balled out previously for posting solutions so what is it that you need to fix the auto coder or tell me what it is looking for ?

4

Hi @coloradoz99

The css file name is missing an s at the end.

The script is not linked to the freeCodeCamp editor. Use the file name script instead of app

This variable is not declared.

Happy coding

2 Likes
5

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