Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

my code always returns that the word is not a palindrome

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>palidrome checker</title>
        <link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
        <main>
            <div class="title-container">
                <h1 class="title">This Is A Palindrome Checker</h1>
                <input type="text" id="text-input" name="text" placeholder="Write your word Here">
                <button type="button" id="check-btn" name="check-btn" aria-label="Check">Check</button>
            </div>
            <div id="result">
                <h2 id="Result-text">This is the result area</h2>
            </div>
            <script src=script.js></script>
        </main>
    </body>
</html>

/* file: styles.css */
h1 {
    color: crimson;
    margin: auto;
    width: 50%;
    padding: 10px;
}
#text-input {
    margin: 0 auto;
    width: 50%;
    padding: 5px;
    text-align: center;
}

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

if (inputField.value = null) {
    alert("Please input a value")
}
function filterText() {
    const text1 = inputField.value
    return text1.split('').filter(char => /[a-zA-Z0-9]/.test(char)).join('').toLowerCase()
}

function reverseText() {
    const text2 = inputField.value
    return text2.split('').reverse().filter(char => /[a-zA-Z0-9]/.test(char)).join('').toLowerCase()
}

function check() {
    if (filterText === reverseText) {
        resultText.textContent = inputField.value + " is a palindrome";
    } else if (filterText != reverseText) {
        resultText.textContent = inputField.value + " is not a palindrome";
    } 
}

checkBtn.addEventListener("click", check)

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 OPR/107.0.0.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Hey, what’s your question? What have you tried so far?

1 Like
3

you should really know what your values are. aren’t these functions?

4

yes i want the code to check if the return of these functions is equal or not

5

i understand that there is so many things wrong with the code it’s my first time trying to write it from scratch with no help but what i have tried is
1- what you see
2- i tried assigning the returns of the functions in a const and compare them
3- i tried a loop to reverse the words

6

Usually it’s easier to focus on a single issue at at time. If I understand it correctly, there’s if statement that’s not working as intended. How could you check if the values used in it are correct?

1 Like
7

i don’t know , i think i assign them to a variable ??

8

How about then checking the value of variable?

9

compare it to the original ???

10

i honestly dont know .

11

Let’s put away comparing for a bit. Using console.log is one way to see what value might have some variable, for example:

const a = 5;
console.log(a);  // prints 5 in console
2 Likes
12

okay i know that .
when i tried checking the values it was correct
but the comparing function is always stuck on the first condition
from what i understood later that it somehow altered it made the change permanent but i don’t understand how i did that

13

So what is in console when you try to console.log the values used in comparison?