Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

Please help me, I had this way longer and spent the past few hours making it better and my brain is absolute mush. I know it’s probably something small but I just can’t see it, I need fresh eyes.

Your code so far

<!-- file: index.html -->
<!DOCTYPE htlm>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="palindrome-checker" />
    <title>Palindrome Checker</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body id="whole">
    <h1 id="header">Is This A Palindrome?</h1>
    <div>
      <input id="text-input">
      <button id="check-btn">Let's Check!</button>
    </div>
    <div id="result"></div>
  </body>
  </html>
/* file: styles.css */
#whole {
background-color: #66CDAA;
}
/* file: script.js */
const button = document.getElementById('check-btn');
const input = document.getElementById('text-input');
const result = document.getElementById('result');

const letsCheck = () => {
    if (!input.value) {
        alert('Please input a value');
    } else {
        const replacedChar = input.value
            .replace(/\W/g, '')
            .toLowerCase();
        const reversedInput = replacedChar
            .split('')
            .reverse()
            .join('');

        if (reversedInput === replacedChar) {
            result.innerHTML = input.value + ' is a palindrome';
        } else {
            result.innerHTML = input.value + ' is not a palindrome';
        }
    }
};

button.addEventListener('click', letsCheck);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 AVG/120.0.0.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

Can you tell us what tests are failing?

Found a typo


  • When the #text-input element contains the text _eye and the #check-btn element is clicked, the #result element should contain the text _eye is a palindrome.

This failing test means you aren’t treating the _ correctly.

2 Likes

Thank you so much! I am sorry I didn’t give more info before posting, had to leave the house right after I had. This helps tremendously!!

I also just realized it wasn’t working because in my caffeine delerium I forgot to link the script sheet with the html :woman_facepalming: like I said, it’s always the small things.

That happens to us all sometimes.

Wishing you good progress!

1 Like