Build a Palindrome Checker

JavaScript
1

Hello guys and hope you all doing just :blush:;
So i have this annoying problem with the test to creat a palindrome, everything works just fine , the words examples that they provided are showing the exact same message , but when i run the code it’s giving me errors like : When the #text-input element contains the text 1 eye for of 1 eye. and the #check-btn element is clicked, the #result element should contain the text “1 eye for of 1 eye. is not a palindrome”
But in the app I creat is working everything is fine it’s shows the right message for every inputs , this is my js file:

const inputText = document.getElementById('text-input');
const checkBtn = document.getElementById('check-btn');
const checkResult = document.getElementById('result');
const clearBtn = document.getElementById('clear');
//clear input field
function clearField() {
 inputText.value = '';
 checkResult.innerHTML = '';
}
//alert text for checkBtn
function alertText() {
 if (inputText.value === '') {
  alert('Please input a value');
 }
};
//check function for one letter
function chekOneLetter() {
   const regex = /^[A-Z]$/;
   if (regex.test(inputText.value)) {
    checkResult.innerHTML = `<span class="spn">${inputText.value}</span> is a palindrome.`;
   } else {
    checkResult.innerHTML = `<span class="spn">${inputText.value}</span> is not palindrome.`;
   }
}
//filter text
function filterText(char) {
  return char.replace(/[^a-zA-Z]/g, '').toLowerCase();
 }
//check for word is a palindrome or not
function checkWord() {
 let filteredText = filterText(inputText.value);
 let reversedText = filteredText.split('').reverse().join('');
 if (filteredText === reversedText) {
  checkResult.innerHTML = `<span class="spn">${inputText.value}</span> is a palindrome.`;
   } else {
    checkResult.innerHTML = `<span class="spn">${inputText.value}</span> is not palindrome.`;
   }
 }
 clearBtn.addEventListener('click', clearField);
 checkBtn.addEventListener('click', alertText);
 checkBtn.addEventListener('click', chekOneLetter);
 checkBtn.addEventListener('click', checkWord);

this is my html file :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="styles.css">
 <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playwrite+IT+Moderna:wght@100..400&display=swap" rel="stylesheet">
 <title>Palindrome Check</title>
</head>
<body>
<div class="img">
 <img src="https://i.ibb.co/G0cdXP3/IMG-20240701-093853.png" alt="logo">
</div>
 <h1>Is it a palindrome?</h1>
 <div class="container">
  <div class="cheker">
   <p>Enter in text to check for a palindrome:</p>
   <input id="text-input" type="text"><button class="btn" id="check-btn" type="button">Check</button><button id='clear' class="btn">Clear</button>
   <div id="result"></div>
  </div>
  </div>
  <div class="note">
   <div>
    <h2>What is a palindrome?</h2>
   <p>💡A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
   </div>
  </div>
 <script src="script.js"></script>
</body>
</html>
2

This regex only keeps letters

3

Yes , it does, and that’s what they tailed us to do keep just letters

4

Not quite…

Note: You’ll need to remove all non-alphanumeric characters

5

But in the end they say : in order to check for palindromes, so when the palindrome gets the input value its removes everything keeps just the letters and check if it’s a palindrome, the output of this word as example mo9m is a palindrome in my app , is not that what they mean?

6

‘mo9m’ should not be a palindrome because you should remove only non-alphanumeric characters. ‘m9o9m’ would be a palindrome though.

Check test 15:

When the #text-input element contains the text 1 eye for of 1 eye. and the #check-btn element is clicked, the #result element should contain the text "1 eye for of 1 eye. is not a palindrome"

This would be a palindrome were it not for the 1 characters.

7

Yes you are right , i fixed the regex code now it’s shows the exact message:

function filterText(char) {
  return char.replace(/[^a-zA-Z-0-9]/g, '').toLowerCase();
 }

I think the problem is here i just don’t know it yet

8

Thank you i have edited my filter function and my one letter function a passed the test perfectly.

1 Like