Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I can’t figure out what i’m doing wrong here, I can only pass the first 3 tests.

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">
</head>
    <body>
<input id="text-input"></input>
<button id="check-btn">Check for palidrome</button>
<div id="result"></div>


    </body>

<script src="script.js"></script>
<html>

/* file: styles.css */


/* file: script.js */
const input = document.getElementById('text-input');
const button = document.getElementById('check-btn');
const div = document.getElementById('result');

button.addEventListener('click', validInput)

const checkPalindrome = (str) => {
  let nonAlphanumeric = /[\w_]/g;
  let lowRegStr = str.toLowerCase().replace(nonAlphanumeric, '')
  let reverseStr = lowRegStr.split('').reverse().join('');

  if (reverseStr === lowRegStr) {
    div.innerHTML = `${input} is a palindrome`
  } else {
    div.innerHTML = `${input} is not a palindrome`
  }
}
  
const validInput = () => {
  if (input === ''){
    alert('Please input a value');
    return;
  } else{
    checkPalindrome(input);
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

If you are going to declare a function using arrow syntax then you must do that before you reference it somewhere else in your code. This includes passing it in as the callback when adding an event listener.

The variable input is set to the #text-input element, so it is never going to equal the empty string. I think you want to check if the value in the input is empty.

3

I fixed all that but now, after i click its sending the alert whether i input text or not. I tried switching the input.innerText to input.value too

const input = document.getElementById('text-input');
const button = document.getElementById('check-btn');
const div = document.getElementById('result');

const checkPalindrome = (str) => {
  let nonAlphanumeric = /[\w_]/g;
  let lowRegStr = str.toLowerCase().replace(nonAlphanumeric, '')
  let reverseStr = lowRegStr.split('').reverse().join('');

  if (reverseStr === lowRegStr) {
    div.innerHTML = `${input} is a palindrome`
  } else {
    div.innerHTML = `${input} is not a palindrome`
  }
}
  
const validInput = () => {
  if (input.innerText === ''){
    alert('Please input a value');
  } else{
    checkPalindrome(input.innerText);
  }
}

button.addEventListener('click', validInput)