Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

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

2

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

3

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

Don’t put quotes around the output.

1 Like
4

thank you! i fixed it and it worked

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.