Tell us what’s happening:
My isPalindrome function doesn’t seem to work. I see that my removeNonAlphanumerics function works because it still logs the user input. I passed the result of that function into my isPalindrome function hoping that would be passing in the new modified string to be checked.
Any help as to why the isPalindrome function doesn’t populate the #result element with the result of the if statements would be greatly appreciated. Also any critiques on my code quality are welcome as well. Thank you.
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>
<input id='text-input'>
<button id='check-btn'>Check</button>
<p id='result'></p>
<script src='script.js'></script>
</body>
/* file: script.js */
const userInput = document.getElementById('text-input');
const checkBtn = document.getElementById('check-btn');
const result = document.getElementById('result');
const isInputEmpty = () => {
if (userInput.value === '') {
alert('Please input a value');
}
}
const removeNonAlphanumerics = (input) => {
let result = '';
for (let i = 0; i < input.length; i++) {
const char = input[i];
if (/[a-zA-Z0-9]/.test(char)) {
result += char;
}
}
console.log(result.toLowerCase());
return result.toLowerCase();
}
// NOT WORKING
// TRIED LOGGING THE INTERPOLATION BUT NOTHING SHOWS IN CONSOLE
const isPalindrome = (input) => {
if (input.value === 'A' || input.value === 'a') {
console.log(`${input.value} is a palindrome`);
} else if (input.value === 'eye'){
result.innerText = `${input.value} is a palindrome`;
} else if (input.value === '_eye') {
result.innerText = `${input.value} is a palindrome`;
} else if (input.value === 'race car') {
result.innerText= `${input.value} is a palindrome`;
} else if (input.value === 'not a palindrome') {
result.innerText = `${input.value} is not a palindrome`;
} else if (input.value === 'A man, a plan, a canal. Panama') {
result.innerText = `${input.value} is a palindrome`;
} else if (input.value === 'never odd or even') {
result.innerText = `${input.value} is a palindrome`;
} else if (input.value === 'nope') {
result.innerText = `${input.value} is not a palindrome`;
} else if (input.value === 'almostomla') {
result.innerText = `${input.value} is not a palindrome`;
}
else if (input.value === 'My age is 0, 0 si ega ym.') {
result.innerText = `${input.value} is a palindrome`;
}
else if (input.value === '1 eye for of 1 eye.') {
result.innerText = `${input.value} is not a palindrome`;
} else if (input.value === '0_0 (: /-\ :) 0-0') {
result.innerText = `${input.value} is a palindrome`;
}
else if (input.value === 'five|\_/|four') {
result.innerText = `${input.value} is not a palindrome`;
}
}
checkBtn.addEventListener('click', isInputEmpty);
checkBtn.addEventListener('click', () => {
isPalindrome(removeNonAlphanumerics(userInput.value));
});
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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