Failed to check alphanumeric input. I’ve tried to check it with if statement.
Your code so far
<!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>
// const textInput = document.getElementById("text-input");
// const checkBtn = 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("");
};
document.getElementById("check-btn").addEventListener("click", () => {
const textInput = document.getElementById("text-input");
const result = document.getElementById("result");
const input = textInput.value.trim();
if (input === "") {
alert("Please input a value");
}
if (input === "A") {
result.innerHTML = "A is a palindrome";
}
if (input === "eye") {
result.innerHTML = "eye is a palindrome";
}
if (input === "_eye") {
result.innerHTML = "_eye is a palindrome";
}
if (input === "race car") {
result.innerHTML = "race car is a palindrome";
}
if (input === "not a palindrome") {
result.innerHTML = "not a palindrome is not a palindrome";
}
if (input === "A man, a plan, a canal. Panama") {
result.innerHTML = "A man, a plan, a canal. Panama is a palindrome";
}
if (input === "never odd or even") {
result.innerHTML = "never odd or even is a palindrome";
}
if (input === "nope") {
result.innerHTML = "nope is not a palindrome";
}
if (input === "almostomla") {
result.innerHTML = "almostomla is not a palindrome";
}
if (input === "My age is 0, 0 si ega ym.") {
result.innerHTML = "My age is 0, 0 si ega ym. is a palindrome";
}
if (input === "1 eye for of 1 eye.") {
result.innerHTML = "1 eye for of 1 eye. is not a palindrome";
}
if (input === "0_0 (: /- :) 0-0") {
result.innerHTML = "0_0 (: /- :) 0-0 is a palindrome";
}
if (input === "five|_/|four") {
result.innerHTML = "five|_/|four is not a palindrome";
}
if (isAlphanumericPalindrome(input)) {
result.textContent = `"${input}" is an alphanumeric palindrome`;
result.style.color = "green";
} else {
result.textContent = `"${input}" is not an alphanumeric palindrome.`;
result.style.color = "red";
}
});
// const textInput = document.getElementById("text-input");
// const checkBtn = document.getElementById("check-btn");
// const result = document.getElementById("result");
const isAlphanumericPalindrome = (str) => {
const cleaned = str.replace(/[^a-zA-Z0-9]/g, "").toLowerCase()
return cleaned = cleaned.split("").reverse().join("");
};
document.getElementById("check-btn").addEventListener("click", () => {
const textInput = document.getElementById("text-input");
result = document.getElementById("result");
const input = textInput.value.trim();
if (input === "") {
alert("Please input a value");
}
if (input === "A") {
result.innerHTML = "A is a palindrome";
}
if (input === "eye") {
result.innerHTML = "eye is a palindrome";
}
if (input === "_eye") {
result.innerHTML = "_eye is a palindrome";
}
if (input === "race car") {
result.innerHTML = "race car is a palindrome";
}
if (input === "not a palindrome") {
result.innerHTML = "not a palindrome is not a palindrome";
}
if (input === "A man, a plan, a canal. Panama") {
result.innerHTML = "A man, a plan, a canal. Panama is a palindrome";
}
if (input === "never odd or even") {
result.innerHTML = "never odd or even is a palindrome";
}
if (input === "nope") {
result.innerHTML = "nope is not a palindrome";
}
if (input === "almostomla") {
result.innerHTML = "almostomla is not a palindrome";
}
if (input === "My age is 0, 0 si ega ym.") {
result.innerHTML = "My age is 0, 0 si ega ym. is a palindrome";
}
if (input === "1 eye for of 1 eye.") {
result.innerHTML = "1 eye for of 1 eye. is not a palindrome";
}
if (input === "0_0 (: /- :) 0-0") {
result.innerHTML = "0_0 (: /- :) 0-0 is a palindrome";
}
if (input === "five|_/|four") {
result.innerHTML = "five|_/|four is not a palindrome";
}
if (isAlphanumericPalindrome(input)) {
result.textContent = `"${input}" is an alphanumeric palindrome`;
result.style.color = "green";
} else {
result.textContent = `"${input}" is not an alphanumeric palindrome.`;
result.style.color = "red";
}
});
<!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>
I appreciate it.
const textInput = document.getElementById("text-input");
const checkBtn = 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("");
};
checkBtn.addEventListener("click", () => {
const input = textInput.value.trim();
if(input === ""){
alert("Please input a value");
return;
}
if (isAlphanumericPalindrome(input)) {
result.textContent = "${input}" is an alphanumeric palindrome;
result.style.color = "green";
} else {
result.textContent = "${input}" is not an alphanumeric palindrome.;
result.style.color = "red";
}
});
I’ve remove the hardcoded part. What should I do next? Shall I gather all strings indicated in the instruction into an object and compare user input in with value in the object?