Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

Hello!
I cant figure out why only the tests 1-4 pass. Although everything works in the preview tab when I enter test lines by hand.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Palindrome</title>
        <link rel="stylesheet" href="styles.css">
        <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=Abril+Fatface&family=Kanit:ital,wght@1,100&family=Roboto:wght@100;300&display=swap" rel="stylesheet">
    </head>
    <body>
        <main>
        <h1>Is it a Palindrome?</h1>
        <section class="palindrome">
            <label for="text-input" class="palindrome-text">Enter in text to check for a palindrome:</label>
            <input class="palindrome-input" id="text-input">
            <button class="palindrome-btn" id="check-btn">Check</button>
            <div class="results-div hidden" id="result">teste</div>
        </section>
        <div class="palindrome-definition-div">
            <p class="palindrome-definition">
💡  A palindrome 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="script.js"></script> 
    </body>
</html>
/* file: styles.css */
main {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

body {
    background-color: #113f67;
    margin: 0;
    padding: 0;
}

h1 {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    justify-content: center;
    text-align: center;
}

.palindrome {
   width: min(100vw, 450px);
    min-height: 100px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    margin: 10px 0;
    background-color: white;
    flex-direction: column;
}

.palindrome-text {
    color:  #113f67;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
}

.palindrome-input {
    height: 30px;
    width: 250px;
    text-align: center;
    font-size: 1.2rem;
    margin: 10px;
    border: none;
    border-bottom: 2px solid #a2a8d3;
}
.palindrome-btn {
    width: 90px;
    border: none;
    padding: 10px;
    border-radius: 15px;
    background-color: #a2a8d3;
    color: #fff;
    cursor: pointer;
    opacity: 0.5;
}
.palindrome-btn.active {
    opacity: 1;
    pointer-events: auto;
}

.hidden {
    display: none;
}

.results-div {
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    color: #113f67;
    text-align: center;
    padding-top: 30px;
}

.palindrome-definition-div {
    width: min(100vw, 450px);
    font-size: 1.3rem;
    min-height: 140px;
    background-color: #e7eaf6;
    margin-top: 20px;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    color: #113f67;
}

.palindrome-definition {
    vertical-align: middle;
    text-align: center;
}
/* file: script.js */
const stringInput = document.getElementById("text-input");
const button = document.getElementById("check-btn");
const resultText = document.getElementById("result");
let cleanString;

button.addEventListener("click", () => {
    if(stringInput.value === "") {
        alert("Please input a value");
    } else {
      //reversing the input string
      let reverseString = cleanString.split("").reverse().join("");
      resultText.classList.remove("hidden");
      if (cleanString !== reverseString) {
        return (resultText.innerText = `${stringInput.value} is not a palindrome`);
      }
      return (resultText.innerText = `${stringInput.value} is a palindrome`);
    }
})

stringInput.addEventListener("keyup", () => {
    //removing all non-alphanumeric characters
    cleanString = stringInput.value.replace(/[^A-Za-z0–9]/g, "").toLowerCase();
    if(cleanString) {
        return button.classList.add("active");
    } 
    button.classList.remove("active");
});














Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

Does it still have a problem if you remove the “hidden” property on your result?

Hello!

I tested your code and it works when I run it in incognito mode (no browser extensions to interfere) and reload with the clear cache option in the Chrome dev tools.

Maybe give this a try.

Yes, still doesn’t work. Thank you