Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I don’t know why this doesn’t work. When I click the check button with or without text, nothing happens. Sometimes the console says “text is read-only”.

I know this isn’t the most efficient code because I have added and taken away things so many times trying to troubleshoot, I have lost track and don’t want to delete anything unnecessary.

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>
    <main>
      <h1>Is it a Palindrome?</h1>
      <div class="box">
        <p>Enter in text to see if it is a palindrome</p>
        <input type="text" id="text-input"></input>
        <button id="check-btn" type="button">Check</button>
        <div id="result" class="hide"></div>
      </div>
      <div class="box">
        <p>A palindrome is a word or phrase that can be read the same way forwards and backwards, ignoring punctuation, case, and spacing.</p>
      </div>
    <main>
  <script src="./script.js"></script>
  </body>
</html>

/* file: script.js */
const textInput = document.getElementById('text-input');
const text = textInput.value;
const checkButton = document.getElementById('check-btn');
const result = document.getElementById('result'); 
function cleanStringInput(str) {
  const regex = /[_\W\s]/g;
  return str.toLowerCase().replace(regex, '');
};

const checkPalindrome = () => {
  if (text = null) {
    result.innerHTML = `<span>Please input a value</span>`;
    result.classList.remove('hide');
  } else
  if (text != null) {
    const cleanTextValue = cleanStringInput(text);
    const reverseTextValue = cleanTextValue.split('').reverse.join('');
    if (cleanTextValue === reverseTextValue) {
      result.innerHTML = `<span>${text} is a palindrome</span>`;
      result.classList.remove('hide');
    } else if (cleanTextValue !== reverseTextValue) {
      result.innerHTML = `<span>${text} is not a palindrome</span>`;
      result.classList.remove('hide');
    }
  }
};

checkButton.addEventListener("click", checkPalindrome);

/* file: styles.css */
* {text-align: center}
body {background: url(https://backdrop-shopify.imgix.net/https%3A%2F%2Fcdn.shopify.com%2Fs%2Ffiles%2F1%2F0051%2F6295%2F8946%2Ffiles%2Fpalindrome_teal_hero.jpg%3Fv%3D1686612945?ixlib=js-3.8.0&auto=format&q=75&w=3892&s=ff7e7ed42f873513f90d5807fae8de63)}
h1 {margin-top: 40px}
.box {
  background: #89667c;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  margin-bottom: 20px;
  width: 80%
}
p {font-size: 20px}
input {height: 30px;
width: 35%}
button {height: 30px;
border-radius: 5px}
#result {
width: 50%;
height: 30px
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Safari/605.1.15

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

This equal sign is an assignment operator. You probably were wanting a ===?

3

Thank you. I changed it to === and still nothing happens

4

Do you still see the error in the console? (Hopefully no more).

I think this is a certificate project so you need to ask specific questions to get help.

Try adding a console.log to the first line of your function to see if it is executing when you click check. Then if yes, add more logs to see what is happening.

5

Also watch out here. You should not get the value till the person clicks check.

6

I changed it and put this line inside of the checkPalindrome function. Now the error says “TypeError: cleanTextValue.split(‘’).reverse.join is not a function. (In ‘cleanTextValue.split(’‘).reverse.join(’‘)’, ‘cleanTextValue.split(’‘).reverse.join’ is undefined)”.

And the console log statements are a bit confusing to me. I checked it for the first line inside of the checkPalindrome function and it works, but then I’m not sure where to put them to check my if statements.

7

so it is complaining about this line. I noticed that all the chained functions have ('') except for reverse. Can you double check if this is the correct way to use reverse? (you can google for example ‘js reverse function’)

as for adding more console.log statements. Just add them where-ever makes sense.
If you want to check what reverseTextValue is, then log that after the line that makes it.

8

It works!!! Thank you so much for your help, you don’t know how many hours I spent on this! Needed () for reverse and I needed to change if (text === null) to if (text === ‘’). Thank you! :raised_hands: :raised_hands: :raised_hands:

1 Like
9

hey well done! It’s one of the harder projects so good job!