Build a Palindrome Checker Project Step #15

JavaScript
1

Tell us what’s happening:

  1. 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”. Had anyone got it ?. It’s odd because of this, “Note: You’ll need to remove all non-alphanumeric characters (punctuation, spaces and symbols)”. So when the code removes the spaces the string turns into a palindrome.

This is my only issue :`(

Your code so far

<!-- file: index.html -->
<html>
 <head> 
   <script src="./script.js"></script>
   <link rel="stylesheet" href="styles.css" />
 </head>
  <main class="container">
    <img class="freecodecamp-logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo">
    <h1 class="title">Is it a Palindrome?</h1>
    <label for="text-input">Enter in text to check for a palindrome:</label>
      <input type = "text" id="text-input">
      <button id="check-btn" onclick="paliCheck()">Check</button>
      <div id="result"></div>

     <div class="palindrome-definition-div">
        <p class="palindrome-definition">
          <span role="img" aria-label="light-bulb">💡</span>
          A <dfn>palindrome</dfn> is a word or sentence that's spelled the same
          way both forward and backward, ignoring punctuation, case, and
          spacing.
        </p>
    </div>
  </main>
</html>

/* file: script.js */
function paliCheck(){
  const input = document.getElementById('text-input').value;
  let string = input.replace(/[\s\p{S}\p{P}\d]/gu, "").toUpperCase(); 
  const resultDiv = document.getElementById('result');

  if(input === ""){
     return alert("Please input a value");
   }

  function clearInput (){ 
    document.getElementById('text-input').value = "";
  }
  addEventListener("click", clearInput);
  
  resultDiv.innerHTML = `${input} is ${string === string.split("").reverse().join("") ? "" : "not "}a palindrome`;



}
   




  




/* file: styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    display: block;
}

.container {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.title {
    text-align: center;
    padding: 10px 0;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

h1 {
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

div {
    width: min(100vw, 450px);
    min-height: 100px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    margin: 10px 0;
    background-color: white;
    box-shadow: 0 6px 6px #002ead;
}

input {
    height: 30px;
    width: 250px;
    text-align: center;
    font-size: 1.2rem;
    margin: 10px;
    border: none;
    border-bottom: 2px solid #5a01a7;
}

label {
    color: #0a0a23;
    margin-bottom: 20px;
}

#check-btn {
    width: 90px;
    border: none;
    padding: 10px;
    border-radius: 15px;
    background-color: #5a01a7;
    color: #fff;
    cursor: pointer;
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

there is probably something here not working

consider, you know that the characters you need to keep are alphanumeric, that means that you test the string 1eyeforof1eye which is not a palindrome, the test is right, your regex is removing something that you should keep

3

Thanks, my “regex” was removing the numbers too. A whole month in this :smiling_face_with_tear: