Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

My JS for palindrome checker works on screen for all tests mentioned, but the tests are not passing through, please guide

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Palindrome Checker</title>
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
    <meta charset = "UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    </head>


  <body>
    <header class="header-logo">
      <img id="header-logo" class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt = "fcc-logo"/>
    </header>

    <main>
      
        <h1 id="page-title">Is it a Palindrome?</h1>

        <div id="checker-section">
          <h2 id="section-title">Enter in text to check for a palindrome:</h2>
          <div id="input-section">
            <input type="text" id="text-input" placeholder="please type text"/>
            <button id = "check-btn"type="button">Check</button>
          </div>
          <span id = "result"></span>

        </div>

        <div class="spacer"></div>

        <div id="details-section">
         <p> <span role="img" aria-label="light-bulb">&#128161;</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>
    </body>  
<script src="script.js"></script>

</html>



/* file: script.js */
const button = document.getElementById('check-btn');
const regex = /[_.,:()|\\/-\s;]/g;
const resultSpanElement = document.getElementById('result');

button.addEventListener("click",(e) => {

  e.preventDefault();
  let input = document.getElementById('text-input').value;
  const cleanInput = input.replace(regex, '')
  const reverseWord = cleanInput.toLowerCase().split("").reverse().join(""); 

  if(input){
    resultSpanElement.innerText = cleanInput === reverseWord ? `"${input} is a palindrome"` : `"${input} is not a palindrome"`;
}
  else{
    alert("Please input a value");
  }

});






/* file: styles.css */
*{
  box-sizing: border-box;
}
:root{
  --color1-white:#FFFFFF;
  --color2-grey:#5A01A7;
}
body{
  background-color:#0A0A23
}

#header-logo{
  display:flex;
  width:30%;
  margin:auto;
  align-items:center;
  justify-content:center;
  object-fit:fill;
  padding:2rem;
}

#page-title{
  max-width:40vw;
  margin:auto;
  padding-bottom:2rem;
  text-align:center;
  color:var(--color1-white);
}

#checker-section{
  max-width:60vw;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:1 rem;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--color1-white);
  padding-bottom:2rem;
  border-radius:1rem;
  box-shadow:5px 5px 10px 10px #012BA3;
;
}

#check-btn{
  padding:10px 20px;
  background:var(--color2-grey);
  color:var(--color1-white);
  font-size:15px;
  border-radius:1rem;

}

#text-input{
  border-bottom:2px solid var(--color2-grey);
  font-size:15px;
  padding:5px 2px;
  outline:none;
  width:30vw;
}

.hide{
  display:none;
}

#result{
  font-size:25px;
  padding:1rem 0.5rem;
}

#details-section{
  max-width:50vw;
  background:#00471B;
  color:var(--color1-white);
  margin:auto;
  border-radius:1rem;
  padding:1rem;

}

.spacer{
  height:10vh;
  width:100%;
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

you should not have double quotes in the displayed string

3

I had a similar problem with my code. If your code passes all of the tests on your end, try completely eliminating the CSS code and retry it raw (turns out I had an error there). Or you could take hbar1st’s advice above (whom replied as I was typing this) which is most likely the problem. Thought I would let you know about how I did it also, just in case you still can’t get it to work. Good luck!

1 Like
4

Thanks! that was the issue, the code has passed through

1 Like