Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

My code is failing 4 tests and have no idea why. I believe that my code does exactly as it says but yet it won’t let me pass the test:

  • When the #test-input element contains the text A man, a plan, a canal. Panama and the #check-btn element is clicked, the #result element should contain the text A man, a plan, a canal. Panama is a palindrome.

  • Failed:When the #text-input element contains the text never odd or even and the #check-btn element is clicked, the #result element should contain the text never odd or even is a palindrome.

When the #text-input element contains the text never odd or even and the #check-btn element is clicked, the #result element should contain the text never odd or even is a palindrome .

When the #text-input element contains the text 0_0 (: /-\ :) 0-0 and the #check-btn element is clicked, the #result element should contain the text 0_0 (: /-\ :) 0-0 is a palindrome .

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>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="container">
        <header><h1>Is it a Palindrome?</h1></header>
        <form name="myForm">
            <label for="text-input">Enter in text to check for a palindrome:</label>
            <div id="input-container">
                <input id="text-input" name="text-input">
                <button id="check-btn">Check</button>
            </div>
            <div id="result"><span id="text-display"></span> is <span id="text-check"></span> a palindrome</div>
        </form>
        <div id="definition">
            <p>A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
        </div>
    </div>
</body>
</html>
<script src="script.js"></script>
/* file: styles.css */
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(3, 3, 48);
    color: white;
}
#container{
    display: flex;
    flex-direction: column;
    max-width: 25rem;
}
h1{
    font-size: 3rem;
}
form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: white;
    color: black;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0px 5px blue;
}
label{
    padding-bottom: 1rem;
}
input{
    border-top:0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom-color:blueviolet;
}
button{
    padding: 0.5rem 1rem;
    background-color: blueviolet;
    border-radius: 1rem;
    border: 0px;
    cursor: pointer;
    color: white;
}
#definition{
    background-color: green;
    margin-top: 2rem;
    border-radius: 1rem;
    padding: 0rem 1rem;
}
#result{
    display: none;
    font-size: 1.5rem;
}
#text-display{
    font-weight: 900;
}
/* file: script.js */
const textDisplay = document.querySelector("#text-display")
const textCheck = document.querySelector("#text-check")
const button = document.querySelector("#check-btn")
const textInput = document.forms["myForm"]["text-input"]
const result = document.querySelector("#result")
const alphanumericRegex = /[a-zA-Z0-9]/
let wordArray = []
let textArray = []

button.addEventListener("click",function(e){
    textArray = []
    wordArray = []
    if (textInput.value==""){
        alert("Please input a value")
        e.preventDefault()
    } else{
        e.preventDefault()
        textDisplay.innerHTML=textInput.value
        textArray = textInput.value.split("")
        textArray.forEach(function(letter){
            if (alphanumericRegex.test(letter)){
                wordArray.push(letter.toLowerCase())
            }
        })
        for (let i = 0, j = wordArray.length-1; i <wordArray.length, j>=0; i++, j--) {
            if (wordArray[i]!==wordArray[j]){
                textCheck.innerHTML="not";
            }
        } 
        result.style.display = "block"
    }
})

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 Edg/120.0.0.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

According to tests, these cases should be recognized as palindromes. However when I used your version, each of these were displayed as not a palindromes.

That’s weird, for me each of the cases were recognised as palindromes.

Huh, I could swear it was displaying is not a palidrome.

I looked closer at your version. While I’m not able to pin-point to specific point when things go awry, the issue appear to be with the way the #result is composed of multiple elements. I’ve changed it to change directly contents of the #result and things passed, without other changes in logic.

still confuse about this one