Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

my code works well but i cant seem to pass the test

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>palindrome checker</title>
    <link rel="stylesheet" href="styles.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
  </head>
  <body>
    <div class="container">
      <p>freeCodeCamp</p>
      <h1 class="center">Is it a Palindrome?</h1>
      <div class="checker">
        <p>Enter in text to check for a palindrome:</p>
        <form>
          <input type="text" id="text-input" />
          <button type="button" id="check-btn">check</button>
          <span id="result"></span>
        </form>
      </div>
        <p class="center">A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

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

function check(str) {
  const lowerCaseStr = str.toLowerCase();
  const regex = /[^a-z0-9]/g;
  const cleanStr = lowerCaseStr.replace(regex, "");
  let reverse = "";

  for(let i = cleanStr.length - 1; i >= 0; i--) {
    reverse += cleanStr[i];
  };

 return cleanStr === reverse;
};

button.addEventListener("click", () => {
  let inputStr = input.value;

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

  if(check(inputStr)) {
     displayResult(`${inputStr} is a palindrome.`)
  } else {
   displayResult(`${inputStr} is a not palindrome`)
  }
});

function displayResult(string) {
  let HTMLString = `<p>${string}</p>`
  result.innerHTML = HTMLString;
  result.style.display = "block";
}

/* file: styles.css */
* {
  box-sizing: border-box;
  overflow: hidden;
}
body {
  background-color: #c6ac8f;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  max-width: 50rem;
  height: 80%;
  margin-top: 5rem;
  
}
.container {
  border: 4px solid black;
  border-radius: 30px;
  padding: 16px;
}
.checker {
 background-color: #f1e3d3;
 padding: 0.5rem;
 text-align: center;
 width: 95%;
 margin-left: auto;
 margin-right: auto;
 border-radius: 4px
 }
#result {
  display: none;
}
form {
  padding-bottom: 0.5rem;
  padding-top: 0;
}
.center {
  text-align: center;
}

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 Edg/131.0.0.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

The first failing test asks for:

  1. When the #text-input element contains the text not a palindrome and the #check-btn element is clicked, the #result element should contain the text "not a palindrome is not a palindrome" .

If I write “not a palindrome” and press the button in your app I get “not a palindrome is a not palindrome”. Can you read the issue?

image

1 Like
3

thank you for your feedback
the code has been updated