Palindrome Checker Bug

When I test my code in a live server from VScode, the palindrome checker works perfectly fine. Yet, when I paste it into freecodecamp to pass the user tests, it fails to function.

For instance, when I try the palindrome checker and input “Mom”, and click the submit button, nothing changes in the freecodecamp viewport, whereas if I do it in a live server, the text “Mom is a palindrome” appears below the input box.

Here is the HTML, CSS, and JS:

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="styles.css">
        <script src="script.js" defer></script>
    </head>
    <body>
        <section class="hero">
            <h1>Is it a palindrome?</h1>
            <h2>Check if it is, indeed, very much so, a palindrome!</h2>
        </section>
        <section class="palindrome-checker-container">
            <div class="palindrome-checker">
                <h3 class="instructions">Enter text to check if it is indeed a palindrome:</h3>
                <input type="text" id="text-input" placeholder="Enter text here...">
                <button id="check-btn">Submit</button>
                <div id="result"></div>
            </div>
            <div>
                    <p>Did you know: A palindrome is a word that is spelt the same backwards and forwards?</p>
                    <p>For instance: "Wow" is spelled the same forwards and backwards.</p>
                    <p>No matter which order you do it in, you just get the same word: Wow!</p>
            </div>
        </section>
    </body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    font-family: "Josefin Sans";
    font-size: 18px;
    box-sizing: border-box;
}

html {
    background-color: rgb(88, 86, 189);
}

.hero {
    text-align: center;
    background-color: aquamarine;
    padding: 0.5rem;
}

.palindrome-checker-container {
    padding: 1rem;
}

.palindrome-checker-container div {
    margin: 1rem;
}
.palindrome-checker-container div * {
    margin: 0.7rem;
}

.palindrome-checker{
    text-align: center;
}

h1 {
    font-size: 2rem;
    font-weight: 500;
    color: rgb(48, 48, 48);
    letter-spacing: 1px;
}

h2 {
    font-size: 0.8rem;
}

JS:

function checkIfPalindrome(input) {
  const regex = /[-.,!"'/$\s_—]/g;
  const cleanedInput = input.replace(regex, "").toLowerCase();
  const preparedInput = input
    .replace(regex, "")
    .split("")
    .reverse()
    .join("")
    .toLowerCase();
  if (preparedInput == "") {
    result.innerHTML = "Please input a value";
  } else if (preparedInput == cleanedInput) {
    result.innerHTML = `${input} is a palindrome`;
  } else {
    result.innerHTML = `${input} is not a palindrome`;
  }
}

const result = document.getElementById("result");
const submitButton = document.getElementById("check-btn");
const input = document.getElementById("text-input");

submitButton.addEventListener("click", (e) => {
  checkIfPalindrome(input.value);
  input.value = "";
});

Any ideas on why it fails in the freecodecamp site but works when it is opened in a browser would be greatly appreciated!

In what way does it “fail to function”? Can you describe the failure?

Try referencing your files from your HTML with ./[file_name]

When I try the palindrome checker and input “Mom”, and click the submit button, nothing changes in the freecodecamp viewport, whereas if I do it in a live server, the text “Mom is a palindrome” appears below the input box.

Apologies, relatively new here - But how would that affect things, and how does one go ahead to implement such a thing?

Should be href=“./styles.css”

Similar for the JS file.

perhaps you dont need the defer attribute in :- script src=“script.js” defer>

p.s your script does work in my browser

also “./etc” or not works both ways.

Yeah, it works in my browser as well… Just not in the freecodecamp editor. Tried removing the “defer” attribute as well, but to no avail - Thanks anyway, think I’m just gonna let this assessment slide, knowing that it actually works in most browsers!

Tried this, but it still doesn’t work in specifically the freecodecamp editor. Thanks anyway!

Solved, by putting the script at the very end instead, effectively manually deferring the script instead of giving it the attribute. Thanks everyone!