Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

Describe your issue in detail here.

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

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.

accidentally posted twice. idk how to remove sorry. Original post: Build a Palindrome Checker Project - Build a Palindrome Checker - #6 by Kevlar