Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

I’m not sure what is wrong. The code fulfills all the instruction’s requirements

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" />
    <link
      rel="icon"
      type="image/png"
      href="https://cdn.freecodecamp.org/universal/favicons/favicon.ico"
    />
    <title>Palindrome Checker</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <h1 class="title">Palindrome Checker</h1>
      <div class="Palindrome">
        <label for="text-input">Enter text here<label>
        <input id="text-input" />
        <button id="check-btn" >check</button>
        <div id="result" ></div>
      </div>
    </main>
    <script src="script.js"></script>
  </body>
</html>
/* file: styles.css */
#result{
  background-color:red;
}
/* file: script.js */
const userInput = document.getElementById('text-input');
const checkPalindromeBtn = document.getElementById('check-btn');
const resultDiv = document.getElementById('result');

const checkForPalindrome = input => {
  const originalInput = input;
  if (input === ''){
    alert("Please input a value");
    return;
  }
  
  const lowerCaseStr = input.replace(/[^A-Za-z0-9]/gi, '').toLowerCase();
  let resultMsg = `"${originalInput} ${
    lowerCaseStr === [...lowerCaseStr].reverse().join('') ? 'is' : 'is not'
  } a palindrome"`;
  const pTag = document.createElement('p');
  pTag.className = 'user-input';
  pTag.innerHTML = resultMsg;
  resultDiv.appendChild(pTag);
  
};
checkPalindromeBtn.addEventListener('click', () => {
  checkForPalindrome(userInput.value);
  userInput.value = '';
});

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

i added a red background to the #result element because i wanted to be sure that that is where the results were computing

Clear the output between each input, don’t keep appending it to the DOM.

Don’t put quotes around the output.

1 Like

thank you! i fixed it and it worked