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-inputelement contains the textA man, a plan, a canal. Panamaand the#check-btnelement is clicked, the#resultelement should contain the textA man, a plan, a canal. Panama is a palindrome. -
Failed:When the
#text-inputelement contains the textnever odd or evenand the#check-btnelement is clicked, the#resultelement should contain the textnever 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
