A problem with the palindrome checker

HI.

I developed the “palindrome checker” project. If I run it in the browser it works fine, but the system tests fail. What could be the problem?

The test is located at: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-palindrome-checker-project/build-a-palindrome-checker

The code is as follows:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="app-container">
      <div id="components-container">
        <div id="top-container">
          <div id="banner">the stellar coder</div>
          <div id="app-title">PALINDROME CHECKER</div>
        </div>
        <div id="bottom-container">
          <form>
            <label for="text-input">Insert a word or a phrase <input id="text-input" /></label>
            <button id="check-btn" type="button">Check</button>
          </form>
          <div id="result"></div>
          <div id="about-palindrome">
            A palindrome is a word, number, phrase, or other sequence of symbols that reads the same backwards as
            forwards (<a href="https://en.wikipedia.org/wiki/Palindrome" target="_blank">Wikipedia</a>).
          </div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS:

*,
::after,
::before {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 10px;
  color: #ffffff;
}

#app-container {
  width: 100%;
  height: 100vh;
  background-color: #09039f;
  display: flex;
  align-items: center;
  justify-content: center;
}

#components-container {
  height: 60vh;
  display: flex;
  flex-direction: column;
}

#banner {
  font-size: 3rem;
  font-weight: bold;
}

#app-title {
  font-size: 5rem;
  font-weight: bold;
  color: #ffc200;
}

#bottom-container {
  width: 50%;
  margin: auto;
}

#bottom-container form {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#bottom-container form label {
  display: flex;
  flex-direction: column;
  width: 50%;
  font-size: 1.5rem;
}

#text-input {
  font-size: 1.5rem;
}

#check-btn {
  width: 25%;
  min-width: 110px;
  height: 40px;
  margin: 0 auto;
  border-radius: 20px;
  background: linear-gradient(45deg, #150cf1, #cc02ef, #916e00);
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff;
}

#result {
  width: 100%;
  height: 90px;
  margin-top: 10px;
  padding: 5px;
  background-color: #ffffff;
  color: #060265;
  font-size: 1rem;
  border-radius: 10px;
  border: 2px double #51005f;
}

#about-palindrome {
  margin: 15px;
  font-size: 1rem;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: #09039f;
  background-color: #ffd44d;
}

@media screen and (max-width: 1035px) {
  #app-title {
    font-size: 4rem;
  }
}

@media screen and (max-width: 840px) {
  #app-title {
    font-size: 3rem;
  }

  #check-btn {
    font-size: 1rem;
    font-weight: bold;
  }
}

@media screen and (max-width: 625px) {
  #app-title {
    font-size: 2rem;
  }

  #banner {
    font-size: 1.5rem;
    font-weight: bold;
  }

  #check-btn {
    font-size: 1rem;
    font-weight: normal;
  }
}

JS:

const textInputEl = document.querySelector('#text-input');
const checkButtonEl = document.querySelector('#check-btn');
const resultTextEl = document.querySelector('#result');

const setResultText = (text) => {
  resultTextEl.innerText = text;
};

const isPalindrome = (text) => {
  const regex = /[^a-zA-Z0-9]/g;
  const sanitizedText = text.toLowerCase().replace(regex, '');
  const reversedText = sanitizedText.split('').reverse().join('');
  return sanitizedText === reversedText;
};

const execute = () => {
  if (textInputEl.value === '') {
    alert('Please input a value');
    setResultText('');
  } else {
    if (isPalindrome(textInputEl.value)) {
      setResultText(`${textInputEl.value} is a palyndrome`);
    } else {
      setResultText(`${textInputEl.value} is not a palyndrome`);
    }
  }
};

checkButtonEl.addEventListener('click', execute);

Thanks for your help.

You’ve got the wrong filename here. In FCC, JS is stored in script.js.

After you fix that, you’ve got a few spelling errors to clean up.

It helps if you say which tests fail.

Here is one of the errors

When the #text-input element only contains the letter A and the #check-btn element is clicked, the #result element should contain the text “A is a palindrome”.

Running that test manually, this is what the result element contains:

A is a palyndrome

@bbsmooth Thanks. Your tip was useful. I updated my code.

@JeremyLT These are the results:

  • Passed:You should have an input element with an id of "text-input".

  • Passed:You should have a button element with an id of "check-btn".

  • Passed:You should have a div element with an id of result.

  • Passed:When you click on the #check-btn element without entering a value into the #text-input element, an alert should appear with the text "Please input a value".

  • Failed:When the #text-input element only contains the letter A and the #check-btn element is clicked, the #result element should contain the text "A is a palindrome".

  • Failed: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".

  • Failed: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".

  • Failed:When the #text-input element contains the text race car and the #check-btn element is clicked, the #result element should contain the text "race car is a palindrome".

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

  • Failed:When the #test-input element contains the text A man, a plan, a canal. Panama and the #check-btn element is clicked, the #result element should contain the text "A man, a plan, a canal. Panama is a palindrome".

  • Failed:When the #text-input element contains the text never odd or even and the #check-btn element is clicked, the #result element should contain the text "never odd or even is a palindrome".

  • Failed:When the #text-input element contains the text nope and the #check-btn element is clicked, the #result element should contain the text "nope is not a palindrome".

  • Failed:When the #text-input element contains the text almostomla and the #check-btn element is clicked, the #result element should contain the text "almostomla is not a palindrome".

  • Failed:When the #text-input element contains the text My age is 0, 0 si ega ym. and the #check-btn element is clicked, the #result element should contain the text "My age is 0, 0 si ega ym. is a palindrome".

  • Failed: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".

  • Failed:When the #text-input element contains the text 0_0 (: /-\ :) 0-0 and the #check-btn element is clicked, the #result element should contain the text "0_0 (: /-\ :) 0-0 is a palindrome".

  • Failed:When the #text-input element contains the text five|\_/|four and the #check-btn element is clicked, the #result element should contain the text "five|\_/|four is not a palindrome".

Did you fix your spelling issue we pointed out? What is your updated code?

@JeremyLT Solved. It was that spelling error. Thanks for your help.

1 Like