Build a Palindrome Checker - Code Working as expected yet one test keeps faling

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.

My code is working just as expected yet I am not able to pass all the tests.

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">
    <script src="script.js"></script>
</head>
<body>
    <main class="main">
        <h1>Is it a Palindrome?</h1>
        <div id="box">
            <p>Enter a text to check if it is a palindrome.</p>
            <div class="box-inside">
                <input type="text" id="text-input" required>
                <button id="check-btn" onclick="isPalindrome()" type="submit">Check</button>
                <div id="result">
                </div>
            </div>
        </div>
        <div id="box">
            <p>A <i>Palindrome</i> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
        </div>
        <div id="result"></div>
    </main>
</body>
</html>

/* file: styles.css */
body{
    background-color: rgb(6, 16, 70);
    color: white;
    font-family: fantasy, Cochin, Georgia, Times, 'Times New Roman', serif

}
#box{
    border: 1px solid #000;
    border-radius: 10px;
    width: 400px;
    height: 100px;
    margin: auto;
    padding: 20px;
    margin-top: 30px;
    background-color: rgb(6, 70, 6);
    color: white;
    align-items: center;
    text-align: center;
    box-shadow: 0px 0px 10px 0px black;
}

#box:first-of-type{
    background-color: white;
    color: black;
}

h1{
    text-align: center;
}

.main{
    justify-content: center;
    display: block;
    margin-top: 200px;
}

p{
    font-size: large;
}

#text-input{
    width: 70%;
    height: 5%;
    padding: 10px;
    margin: auto;
    border: 0px solid transparent;
    border-bottom: 2px solid blueviolet;
    border-radius: 2px;
}

#check-btn{
    background-color: blueviolet;
    width:70px;
    height: 40px;
    border-radius: 10px;
    border: transparent;
    color: white;
}
#check-btn:hover{
    cursor: pointer;
}


/* file: script.js */
const extendBox = () => {
    const box = document.getElementById('box');
    const result = document.getElementById('result');
    box.style.height = '150px';
    result.style.marginTop = '20px';
}

const isPalindrome = () => {
    const result = document.getElementById('result');
    const textInput = document.getElementById('text-input');
    
    const checkButton = document.getElementById('check-btn');

    checkButton.addEventListener('click', () => {
        let emptyValue = textInput.value.trim();

        const inputValue = textInput.value;
    
        const validInput = inputValue.replace(/[^a-zA-Z0-9]/g, '');
        const lowercasedValue = validInput.toLowerCase();
        const reversedValue = lowercasedValue.split('').reverse().join('');

      if (emptyValue === '') {
        alert("Please input a value");
    } else {
        if (lowercasedValue === reversedValue) {
            extendBox();
            result.innerHTML = `${inputValue} is a palindrome!`;
        } else {
            extendBox();
            result.innerHTML = `${inputValue} is not a palindrome!`;
        }
    }

    
}
)
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.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

put this as last thing in your body

4

for me, when i tried your code, when i press the button for the very first time without entering a value … nothing happened, then when i press again, it worked. Then when i press again, the alert message appears multiple times consecutively.

The reason for this, is that in your HTML you used the onclick attribute which will execute the function isPlaindrome when clicked which is correct, but in your script.js inside that function you used addEventListener with the event click again for the button, which you already done in your HTML.

So, inside your isPlaindrome function remove the addEventListener and also delete the checkButton constant.
And in your HTML, remove the type="submit" attribute for the button as your button is not inside a from, it is inside a div.

And you’re all good.

5

thanks, it worked! from what you said and what i understood, might the reason was that there were multiple calls to isPalindrome function onclick which was interfering with the tests?

1 Like
6

Yeah you you used the onclick attribute to execute isPalindrome function, and that’s true.

But inside that function you are not actually checking for the palindrome case, you were making another addEventListener with the click event again, which means if you click on the button for the very first time, it will execute the function and in that function it makes another click event for the button, which makes the same code runs multiple times which is not needed at all.

1 Like
7

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