Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hi, I just finished this required project, and when I tried it out manually it worked perfectly, however, when I ran the test, only the first 4 criteria ticked out, and I couldn’t figure out why. I tried just changing the inner text of the result div instead of appending a new p element, but it didn’t work either. I would really appreciate it if someone could help me out! :slight_smile:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Palindrome Game</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta charset="utf-8">
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <main>
        <h1>Check if your word is a palindrome</h1>
        <div id="checker-div">
        <p id="request">Please enter a word: </p>
        <input type="text" id="text-input">
        <button type="submit" id="check-btn">Check</button>
          <div id="result"></div>
          </div>
          <p id="description">A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
      </main>
      <script src="./script.js"></script>
    </body>
  </html>

/* file: styles.css */
*{
  
  padding:0;
  margin:0;
  font-family:Monospace, sans-serif;
}
body{
  background-color:#F1F0E7;
}

h1{
  text-align:center;
  padding-top:100px;
  padding-bottom:50px;
}
#checker-div{
  background-color:green;
  border-radius:10px;
  width:50%;
  max-width:600px;
  min-width:200px;
  margin:auto;
  padding:10px;
  height:25%;
}

#request{
  padding-bottom:30px;
  color:white;
}
#text-input{
  width:100%;
  height:15%;
  
  
}

#check-btn{
  width:40%;
  height:30px;
  text-align:center;
  margin: 20px auto 0 auto;
  display:block;
}
.results{
  height: 5vh;
  padding-top:2vh;
  text-align:center;
  color:white;
}

#description{
  width:70%;
  margin:auto;
  margin-top:40px;
  padding:20px;
  text-align:justify;
  background-color: green;
  border-radius:10px;
  color:white;
}

/* file: script.js */
const textInput = document.getElementById("text-input");
const checkButton = document.getElementById("check-btn");
const results = document.getElementById("result");


const checkIfPalindrome = ()=>{
  const cleanInput = textInput.value.replace(/[^a-zA-Z0-9]/g, '').toLowerCase(); 
  const reverse = cleanInput.split("").reverse().join("");
  let resultsParagraph = document.createElement('p');
  resultsParagraph.className="results";

  if(textInput.value === ""){
    alert("Please input a value");
    resultsParagraph.innerHTML = "";
    results.appendChild(resultsParagraph);
  }
  
  else if (reverse === cleanInput){
    resultsParagraph.innerHTML = `"${textInput.value} is a palindrome"`;
    results.appendChild(resultsParagraph);
  }
  
  else {
    resultsParagraph.innerHTML = `"${textInput.value} is not a palindrome"`;
    results.appendChild(resultsParagraph);

  }
};

checkButton.addEventListener("click", checkIfPalindrome);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Don’t put quotes around the text output.

Don’t append. Just update the result element with the new text (replacing it each time).

3

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