Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Hello, my code is working perfectly well in vscode, I’ve tried every text the projects asks you to test, for example: (A man, a plan, a canal. Panama), (0_0 (: /-\ :slight_smile: 0-0) and the website detected they were a palindrome. but on the freecodecamp site when I copied my code it didn’t work, when I press check the text below the input doesn’t show up. Btw how can I make so when I click Enter it works like the button? Should I maybe instead of an arrow function make a normal function and add a onclick and a onkeydown attribute to my button and pass in the function? Thank you for the help!

Here’s my code:

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles.css" rel="stylesheet">
    <title>Palindrome Checker</title>
</head>
<body>
    <main>
        <img class="logo" src="https://user-images.githubusercontent.com/20648924/133188813-5cceb6b3-a610-444c-b44c-4061bfc5b5c5.png">
        <h1 class="title">Is it a Palindrome?</h1>
        <div class="input-container">
            <p class="description-text">Enter in text to check for a palindrome:</p>
            <div class="input-btn-div">
                <input type="text" id="text-input">
                <button id="check-btn">Check</button>
            </div>
            <div class="result-div" id="result"></div>
        </div>
        <div class="palindrome-desc">💡A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</div>
    </main>
    <script src="index.js"></script>
</body>
</html>

/* file: styles.css */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #0a0a23;
    color: white;
    font-size: 1.25rem;
}
main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.logo{
    width: 400px;
    height: auto;
}
.title{
    font-size: 3rem;
    margin-bottom: 1em;
}
.input-container{
    background-color: white;
    width: 400px;
    height: 150px;
    border-radius: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-shadow: 0 6px 6px #002ead;
    margin-bottom: 1.5em;
}
.description-text{
    color: #000;
    text-align: center;
    display: block;
    margin: 10px;
}
input{
    border: none;
    border-bottom: 2px solid rgb(77, 0, 128);
    margin-right: 10px;
    width: 200px;
    height: 30px;
    line-height: 20px;
    font-size: inherit;
}
button{
    background-color: rgb(77, 0, 128);
    color: white;
    width: 90px;
    height: 35px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
}
.palindrome-desc{
    background-color: rgb(8, 83, 8);
    width: 400px;
    height: auto;
    border-radius: 35px;
    padding: 20px;
}
.result-div{
    color: black;
    font-size: 1.5rem;
    margin: 10px;
}


/* file: script.js */
const inputElement = document.getElementById('text-input');
const buttonElement = document.getElementById('check-btn');
const result = document.getElementById('result');

buttonElement.addEventListener('click', ()=>{
    const input = inputElement.value;
    const correctedInput = input.toLowerCase().replace(/[^a-z0-9]/g, '');
    const reversedInput = reverseString(correctedInput);
    inputElement.value = '';
    if(correctedInput === ''){
        alert('Please input a value');
    }
    else if(correctedInput === reversedInput){
        result.innerHTML = `<strong>${input}</strong> is a palindrome`;
    }
    else{
        result.innerHTML = `<strong>${input}</strong> is not a palindrome`;
    }
});

function reverseString(str) {
    return str.split('').reverse().join('');
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

The script file has to be named script.js

<script src="script.js"></script>
3

Thank you so much, I didn’t even think about that

4

about the keydown event, I tried doing it but something’s not working. Now the button won’t work when I press it neither pressing Enter. I tried removing the runPalindrome() function and doing an arrow function inside each event listener, the button worked again but pressing Enter didn’t.

Here’s my code:

const inputElement = document.getElementById('text-input');
const buttonElement = document.getElementById('check-btn');
const result = document.getElementById('result');

buttonElement.addEventListener('click', runPalindrome());
inputElement.addEventListener('onkeydown',(event)=>{
    if(event.key === "Enter"){
        runPalindrome();
    }
});

function runPalindrome(){
    const input = inputElement.value;
    const correctedInput = input.toLowerCase().replace(/[^a-z0-9]/g, '');
    const reversedInput = reverseString(correctedInput);
    inputElement.value = '';
    if(correctedInput === ''){
        alert('Please input a value');
    }
    else if(correctedInput === reversedInput){
        result.innerHTML = `<strong>${input}</strong> is a palindrome`;
    }
    else{
        result.innerHTML = `<strong>${input}</strong> is not a palindrome`;
    }
}

function reverseString(str) {
    return str.split('').reverse().join('');
}
5

try changing ‘onkeydown’ with ‘keydown’ instead, i think you used the property not the event

6

Yep that worked, thank you so much! I forgot that I’m supposed to remove the ‘on’. But what about the click button? It still doesn’t work for some reason.

7

try to pass the reference of the function not the function call
it means simply removing the parentheses of your function.

8

It worked thank you so much, but why can’t I call the function the normal way in an event listener, and what’s the difference between calling a function and referencing it?

9
  • runPalindrome() means you call that function, which means the function will be executed directly.
  • while when you have element.onclick = runPalindrome, this is called a callback.
  • Where runPalindrome doesn’t get executed directly but only when a certain event is fired (in this case when there’s a click on the element)

so when you assign a function call to a variable like :

let greeting = hello();

means "Call hello() ASAP, and set its return value to greeting "
On the other hand, this:

let greeting = hello;

means "greeting is an alias for hello . If you call greeting inside some other function , you get the same results as calling hello() "

10 
let greeting = hello();

calls the function immediatly and stores it in greeting

let greeting = hello;

here only when we call greeting the function gets called right?
What I want to know is why the click event listener we referenced the function and the keydown event listener we called the function? Do we have to always reference functions in event listener? Is it because I had an arrow function in the keydown event that’s why I could call the function?
Btw thanks for the help I really appreciate it.

1 Like
11

in the ‘keydown’ event listener you had your function call inside an if statement

inputElement.addEventListener('onkeydown',(event)=>{
    if(event.key === "Enter"){
        runPalindrome();
    }
});

this means that your function call will not get executed until the if condition becomes true, (its scoped no body can hear it and return something)

while in the other hand your ‘click’ event listener, doesn’t have this condition statement to stop the function from running, its just an event in the first argument ‘click’ and on the second argument there is a function to receive it, if you choose to call your function immediatly without waiting for the event to occur
(this will give you the alert message as soon as you finish typing but not when the event ‘click’ is fired)
but if you give a reference to it instead this will hold it there until the event start which works here just like a condition.

1 Like
12

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