Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

Could someone help me with my code please? does not pass any of the palindrome validations

Your code so far

const label = document.getElementById('label');
const result = document.getElementById('result');
const definitionTrigger = document.getElementById('definition-trigger');
const icon = document.getElementById('icon');
const animatedText = document.querySelector('.definition-container__animated-text');
const interrogant = "What is a palindrome?";
const definition = "A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing";

const userInput = document.getElementById('text-input');
const checkButton = document.getElementById('check-btn');

let labelText = 'Check for a palindrome';
label.textContent = labelText;
let labelError = 'Input a text';


//* This function adds a typing effect, pushing a text letter by letter with a minimum delay.

function textTypingEffect(e, text, i = 0) {
    e.textContent += text[i];
    if (i === text.length -1 ) {
        return;
    }
    setTimeout(() => {
        textTypingEffect(e, text, i + 1)
    }, 50);
}


textTypingEffect(animatedText, interrogant)

/*
* This function cleans content and pushes a new text. Takes off icon, text animation, pointer and remove listener.
*/
function clickHandler() {
    animatedText.textContent = "";
    textTypingEffect(animatedText, definition);
    icon.style.display = "none";
    animatedText.classList.remove('animated-text--animation');
    definitionTrigger.style.cursor = 'default';
    definitionTrigger.removeEventListener('click', clickHandler);
}

definitionTrigger.addEventListener('click', clickHandler);


/*
* This function checks if the user's input is a palindome or not.
*/

function checkForPalindrome (input) {

    // ! alert error on empty input
    if (input === '') {
        alert('Please input a value');
        result.style.display = 'none';
        checkButton.classList.add('button--error');
        label.classList.add('label--error');
        checkButton.classList.remove('button--hover');
        label.textContent = labelError;
        setTimeout(() => {
            checkButton.classList.remove('button--error');
            checkButton.classList.add('button--hover');
            label.classList.remove('label--error');
            label.textContent = labelText;
        }, 1000);
        return
    }

    // * remove special characters and spaces from input.
    const cleanInput = input.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();

    result.style.display = 'inline';

    // * Palindrome validation showing text when is <= 20 char. or defaul text.
    if (cleanInput.length <= 20) {
        cleanInput === [...cleanInput].reverse().join('') 
        ? textTypingEffect(result, `${input} is a palindrome`) 
        : textTypingEffect(result, `${input} is not a palindrome`);
    } else {
        cleanInput === [...cleanInput].reverse().join('') 
        ? textTypingEffect(result, `Your text is a palindrome`) 
        : textTypingEffect(result, `Your text is not a palindrome`);
    }
}

// * Trigger function on click.
checkButton.addEventListener('click', () => {
    result.textContent = '';
    checkForPalindrome(userInput.value);
})

// * Trigger function on enter.
userInput.addEventListener('keydown', e => {
    if (e.key === 'Enter') {
        result.textContent = '';
        e.preventDefault();
        checkForPalindrome(userInput.value);
    }
});
<!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=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>Palindrome Checker | freeCodeCamp</title>
</head>
<body>
    <section class="input-container">
        <div class="input-container__entry-area">
            <input class="input-container__entry" type="text" name="entry" id="text-input" required>
            <div id="label" class="input-container__label"></div>
        </div>
        <button id="check-btn" class="input-container__button button--hover">Check</button>
        <div id="text-result" class="input-container__result-div">
            <div id="result" class="input-container__result-text"></div>
        </div>
    </section>

    <section id="definition-trigger" class="definition-container">
        <div class="definition-container__definition">
            <span class="definition-container__animated-text animated-text--animation"></span>
        </div>
    </section>
    <script src="script.js"></script>
</body>
</html>

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

I’m guessing test is checking the result before animation enters the full answer.

1 Like

Thank you very much, I had to delete the text animation but you found the correct solution!