Tell us what’s happening:
it is showing error but every thing is correct and works fine
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>Palindrome Checker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Palindrome Checker</h2>
<input type="text" id="text-input" placeholder="Enter text...">
<button id="check-btn">Check</button>
<p id="result"></p>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
input {
padding: 8px;
width: 250px;
font-size: 16px;
}
button {
padding: 8px 16px;
font-size: 16px;
margin-left: 10px;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
/* file: script.js */
document.getElementById("check-btn").addEventListener("click", function () {
let text = document.getElementById("text-input").value.trim();
let resultElement = document.getElementById("result");
if (!text) {
alert("Please input a value");
return;
}
let cleanedText = text.toLowerCase().replace(/[^a-z0-9]/g, "");
let reversedText = cleanedText.split("").reverse().join("");
if (cleanedText === reversedText) {
resultElement.textContent = `"${text} is a palindrome"`;
resultElement.style.color = "green";
} else {
resultElement.textContent = `"${text} is not a palindrome"`;
resultElement.style.color = "red";
}
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker
