Build a Palindrome Checker Project - code works but tests don't run

JavaScript
1

Tell us what’s happening:

I don’t know what can possibly be wrong. I believe the code is correct but I can’t seem to pass test 5 and beyond. The code works in other IDEs and it also shows in the preview of fCC, but when I run the tests, nothing happens. I don’t see any error messages, so I am at a loss :frowning:
Grateful for any advice on how to fix the issue.

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 Checker</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div>
        <h1>Palindrome Checker</h1>
    </div>
    <div class="container">
        <label for="text-input">Enter a word or phrase to check if it's a palindrome!</label>
        <input type="text" id="text-input" placeholder="ABBA">
        <button id="check-btn">Check</button>
        <div id="result" class="resultsDiv"></div>
        <blockquote>" A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing." </blockquote>
    </div>
<script src="script.js"></script>
</body>
</html>

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

const palindromeCheck = () => {
    if (textInput.value === "") {
        alert("Please input a value");
        result.textContent = "";
        return;
    }
    let strippedStr = textInput.value.toLowerCase().replace(/[^A-Z0-9]/gi, "");
    let reversedStr = strippedStr.split("").reverse().join('');
    if (reversedStr === strippedStr) {
        result.textContent = `"${textInput.value}" is a palindrome`;  
    } else {
        result.textContent = `"${textInput.value}" is not a palindrome`; 
    }
    textInput.value = ""; 
    
}
checkBtn.addEventListener("click", palindromeCheck);


/* file: styles.css */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to top, #46381e, #6d5631, #987645, #c7965b, #f8b872);
    background-repeat: no-repeat;
    margin: 0;
    gap: 50px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
h1{
    font-size: 64px;
    color: #fbfcf8;
    text-align: center;
    margin-bottom: 0;
}

label {
    font-size: 22px;
    color: #46381e;
    text-align: center; 
    font-weight: 500;
    margin-bottom: 20px;
    padding: 0 20px;
}

input {
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #46381e;
    background-color: transparent;
    width: 20vw;
    box-shadow: 2px 2px 5px #46381e;
    flex-grow: 1;
}
.container {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    justify-content: center;
    border-image: linear-gradient(transparent, #46381e, transparent) 1 / 4px;
    width: min(80vw, 650px);
    min-height: 100px;
    align-items: center;
    padding: 0 30px;
}

#check-btn {
    background-color: #46381e;
    padding: 10px;
    border-radius: 10px;
    color: #fbfcf8;
    width: 10vw;
    border: none;
    font-size: 18px;
    font-weight: 500;
    box-shadow: 2px 2px 5px #46381e;
    cursor: pointer;
    
}
#check-btn:hover {
    background-color: #ceac7d;
    border: 2px solid #46381e;
    color: #46381e;
}
blockquote {
    line-height: 28px;
    color: #fbfcf8;
    font-size: 22px;
    width: auto;
}
.fa-quote-left {
    color: #46381e;
    margin-right: 20px;
}

.resultsDiv {
    display: block;
    word-wrap: break-word;
    color: #30240d;
    min-width: 40vw;
    text-align: center;
    font-size: 18px;
    line-height: 28px;
    padding: 10px;
}
.bold {
    font-weight: bold;
}
@media only screen and (max-width: 768px) {
    h1 {
        font-size: 48px;
    }

    .container {
        flex-direction: column;
        margin: 0 10px;
    }

    #check-btn {
        width: 50%;
    }
    input {
        width: 90%;
    }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:129.0) Gecko/20100101 Firefox/129.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

You did solve the problem but the tests don’t like the extra quotes and the text input. Because your output didn’t match to what the test expected, those tests failed.

1 Like
3

Thank you so much! It’s solved now :smiley: