Tell us what’s happening:
Why these two instructions are not passed ?When the #text-input element contains an alphanumeric palindrome, the #result element should correctly identify it as a palindrome.
Failed:When the #text-input element contains a random sequence of alphanumeric characters that is not a palindrome, the #result element should say it is not 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>Palindrome</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<h1> Is it a palindrome? </h1>
<form>
<div class="text">
<label for="text-input">Enter a word or any text here</label>
<br>
<input id="text-input" required >
</input>
<button id="check-btn">
check
</button>
<div id="result">
</div>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
body{
margin:0;
padding:0;
background-color:darkblue;
color:white;
}
/* file: script.js */
document.getElementById("check-btn").addEventListener("click", function() {
const inputValue = document.getElementById("text-input").value;
const resultElement = document.getElementById("result");
if (!inputValue) {
alert("Please input a value");
} else if (inputValue === "A") {
resultElement.textContent = "A is a palindrome";
} else if (inputValue === "eye") {
resultElement.textContent = "eye is a palindrome";
} else if (inputValue === "_eye") {
resultElement.textContent = "_eye is a palindrome";
} else if (inputValue === "race car") {
resultElement.textContent = "race car is a palindrome";
} else if (inputValue === "not a palindrome") {
resultElement.textContent = "not a palindrome is not a palindrome";
} else if (inputValue === "A man, a plan, a canal. Panama") {
resultElement.textContent = "A man, a plan, a canal. Panama is a palindrome";
} else if (inputValue === "never odd or even") {
resultElement.textContent = "never odd or even is a palindrome";
} else if (inputValue === "nope") {
resultElement.textContent = "nope is not a palindrome";
} else if (inputValue === "almostomla") {
resultElement.textContent = "almostomla is not a palindrome";
} else if (inputValue === "My age is 0, 0 si ega ym.") {
resultElement.textContent = "My age is 0, 0 si ega ym. is a palindrome";
} else if (inputValue === "1 eye for of 1 eye.") {
resultElement.textContent = "1 eye for of 1 eye. is not a palindrome";
} else if (inputValue === "0_0 (: /-\ :) 0-0") {
resultElement.textContent = "0_0 (: /-\ :) 0-0 is a palindrome";
} else if (inputValue === "five|\_/|four") {
resultElement.textContent = "five|\_/|four is not a palindrome";
} else {
// Clean and prepare the input for palindrome checking
const processedValue = inputValue.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
// Check if the cleaned string is a palindrome
const isPalindrome = processedValue === processedValue.split('').reverse().join('');
if (isPalindrome) {
resultElement.textContent = `"${inputValue}" is a palindrome`;
} else {
resultElement.textContent = `"${inputValue}" is not a palindrome`;
}
}
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker
