Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I am getting the correct output however, the grader is not accepting the input as correct. I previously had the result div also contain the h3 and img elements then only have the p element to try and please the grader. It will not accept any of the tests even though I’ve tested them all on my own and they are working correctly. How can I get the grader to accept my answer?

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>
        <h1>Is it are an am <i><u>Palindrome?</u></i></h1>
        <p>If word are same in reverse than in normal than is yes on <i><u>Palindrome!</u></i></p>
        <input type="text" id="text-input" />
        <button id="check-btn">Check Me!</button>
        <!-- I hate the way that the freeCodeCamp grader is strict on the text part of the result-->
        <div id="result-div" class="result hide">
            <div id="result">

            </div>
        </div>
        <script src="./script.js"></script>
    </body>
</html>

/* file: styles.css */
:root {
    --background-color: #454545;
    --text-color: #e4e4e4;
    --correct-color: #90ee90;
    --nogo-color: #ee9090;
}

* {
    background-color: var(--background-color);
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif
}

h1, p {
    color: var(--text-color);
    text-shadow: 1px 1px 2px black;
    margin-bottom: 50px;
}

input, button {
    background-color: var(--text-color);
}

#result-div {
    margin: 50px auto 0px auto;
    width: 35vw;
    height: 35vh;
    border: 5px solid #000000;
    border-radius: 10px;
}

.is-palin > *, .is-palin {
    background-color: var(--correct-color);
}

.no-palin > *, .no-palin {
    background-color: var(--nogo-color);
}

h3 {
    font-weight: bold;
    font-size: 36px;
    margin: 15px auto 5px auto;

}

.p-result {
    margin: 5px auto 20px auto;
    text-decoration: underline;
    font-size: 18px;
}

img {
    width: 125px
}

.hide {
    display: none;
}

/* file: script.js */
const inputBox = document.getElementById("text-input");
const checkButton = document.getElementById("check-btn");
const resultDiv = document.getElementById("result-div");

checkButton.addEventListener('click', isValidInput);

function isValidInput() {
    resultDiv.classList.add('hide');
    resultDiv.classList.remove('no-palin');
    resultDiv.classList.remove('is-palin');
    const dirtyString = inputBox.value;
    if (dirtyString === "") {
        alert("Please input a value");
        return;
    }
    const cleanString = cleanInputString(dirtyString.toLowerCase());
    const result = isPalindrome(cleanString);
    if (result) {
        displayGo(dirtyString);
    } else {
        displayNoGo(dirtyString);
    }
}

function cleanInputString(str) {
    const regex = /[()\\/_\-.,\s]/g;
    return str.replace(regex, '');
}

function isPalindrome(string) {
    const reversedString = [...string].reverse().join("");
    console.log(string);
    console.log(reversedString);
    return string === reversedString ? true : false;
}

function displayGo(string) {
    console.log(`${string} is a palindrome`);
    resultDiv.classList.remove('hide');
    resultDiv.classList.add('is-palin');
    resultDiv.innerHTML = `
    <h3>YES</h3>
    <div id="result" class="is-palin">
    <p class="p-result">${string} is a palindrome.</p>
    </div>
    <img src="img\\go.png" />
    `
}

function displayNoGo(string) {
    console.log(`${string} is NOT a palindrome`);
    resultDiv.classList.remove('hide');
    resultDiv.classList.add('no-palin');
    resultDiv.innerHTML = `
    <h3>NO</h3>
    <div id="result" class="no-palin">
    <p class="p-result">${string} is not a palindrome.</p>\
    </div>
    <img src="img\\nogo.png" />
    `;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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

2

I was able to play around with your code for a bit and it looks like the issue is how you are displaying the result here in both your displayGo and displayNoGo functions

I was able to get it working by updating the HTML first

   <div id="result-div" class="result hide">
        <h2 id="result-div-title"></h2>
        <div class="result-styles" id="result"></div>
    </div>

Then I accessed the h2 and result div elements using getElementByID at the top of the file and assigned them to new const variables.

Then I consolidated your displayGo and displayNoGo functions into just one since they pretty much identical with a few small differences. I also added a second parameter to that function called result so I can conditionally render the different styles and text based on if it is a palindrome or not

Lastly, I updated your code to just update the text content and classes instead of the entire HTML like you were doing earlier with innerHTML

Without giving away the answer, since that is not allowed on the forum, here are general hints to point you into the general direction to resolve the issues you are having.

// I passed in the result for the second argument here inside your isValidInput function
 if (result) {
        displayResult(dirtyString, result);
    } else {
        displayResult(dirtyString, result);
    }

function displayResult(string, result) {
    const resultOutputStr = `${string} ${result ? 'is' : 'is not'} a palindrome`
    console.log(resultOutputStr);
    resultDiv.classList.remove('hide');
    resultDiv.classList.add(`${result ? 'is' : 'no'}-palin`);
   // update the text content for the h2 element and result div output here
  // use conditional rendering for displaying the correct text instead of using two functions
}

Hope that helps

3

This helped a bunch, thank you for the help!

4

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