Tell us what’s happening:
It’s looks like everything is working but I don’t understand but the tests aren’t happy?
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" />
<link rel="stylesheet" href="styles.css" />
<title>Palindrome-Checker</title>
</head>
<body>
<h1>Is it a Palindrome?</h1>
<div class="container">
<span>Enter in a text to check for palindrome:</span>
<input id="text-input" />
<button id="check-btn" onclick="result">Check</button>
<div id="result"></div>
</div>
<div class="palindrome-definition-div">
<p class="palindrome-definition">
<span role="img" aria-label="light-bulb">💡</span>
A Palindrome is a word or sentence that's spelled the same way both
forward and backward, ignoring punctuation, case, and spacing.
</p>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const textInput = document.getElementById("text-input");
const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result")
const isAlphanumericPalindrome = (str) => {
const cleaned = str.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
console.log(`Cleaned input: ${cleaned}`);
return cleaned === cleaned.split("").reverse().join("");
};
checkButton.addEventListener("click", () => {
const input = textInput.value.trim();
if(input === ""){
alert("Please input a value");
return;
}
if (isAlphanumericPalindrome(input)) {
result.textContent = `"${input} is a palindrome"`;
} else {
result.textContent = `"${input} is not a palindrome"`;
}
});
/* file: styles.css */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100dvh;
background-color: #020524;
color: rgb(255, 255, 255);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
font-family: sans-serif;
font-weight: bolder;
font-size: 2.7rem;
margin: 30px 0 30px 0;
}
.container {
width: 470px;
height: 300px;
border-radius: 50px;
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
border: 2px solid green;
padding: 30px;
background-color: white;
color: #020524;
}
.container span {
margin: 0 auto;
font-size: 1.2rem;
font-family: sans-serif;
font-weight: bolder;
margin-bottom: 10px;
color: #020524;
}
#text-input {
width: 70%;
line-height: 1.5rem;
border: none;
border-bottom: 3px solid #180161;
margin: 0 auto;
margin-bottom: 20px;
}
#check-btn {
width: 35%;
height: 50px;
background-color: #4f1787;
color: white;
border-radius: 50px;
margin: 0 auto;
padding: 10px;
font-size: 1.2rem;
}
.palindrome-definition-div {
width: min(100vw, 450px);
min-height: 140px;
border-radius: 20px;
background-color: #00471b;
font-size: 1.3rem;
margin-top: 20px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker
