Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

Describe your issue in detail here.

Hi,

I have been stuck on this project for quire some time and can only pass the first 4 tests. P.s I am very new to JS and very confused
When I do not input anything in the box, the alert sends the message correctly however the problem I am having is that no matter what i type in the input box, nothing happens afterwards.

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">
  <title>Palindrome Checker</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <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>
    <div class="palindrome-box">
      <label>Type in a word to see if it is a palindrome: </label>
      <input id="text-input" placeholder="Example: Noon"></input>
      <button id="check-btn">Check</button>
      <div id="result"></div>
    </div>
    <div class="definition">
      <span role="img" aria-label="light-bulb">💡</span>
      <p>A <i>palindrome</i> is a word or sentence that's spelled the sameway both forward and backward, ignoring
        punctuation, case and spacing.</p>
    </div>
  </main>
  <script src="script.js"></script>
  </body>

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

body {
  font-family: Verdana,sans-serif;
  background-color:#0A0A23;
  color:#ffffff;
}

.freecodecamp-logo {
  height: 30px;
  margin-bottom: 20px;
}

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

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

.palindrome-box{
  width:450px;
  display:flex;
  align-items:center;
  justify-content:center; 
  flex-wrap:wrap;
  border-radius:20px;
  background-color:white;
  padding:20px;
  box-shadow: 0 6px 6px #002ead;

}

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

#text-input{
  height:40px;
  width: 250px;
  text-align:center;
  margin:10px;
  border:none;
  border-bottom:2px solid #5A01A7;
}

button{
  background-color:#5A01A7;
  padding:12px;
  border:none;
  border-radius:15px;
  width:90px;
  color:white;
  cursor:pointer;
}

.definition{
  width:450px;
  display:flex;
  align-items:center;
  justify-content:center; 
  flex-wrap:wrap;
  border-radius:20px;
  background-color:#00471b;
  padding:20px;
  margin-top:25px;
  font-size:1.3rem;
  min-height:140px;
}

p{
  text-align:center;
}

span{

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

function palindrome(str) {
  const alphanumeric = str.toLowerCase().match(/[a-z0-9]/g);
  const cleanString = alphanumeric.join("");
  const reverseString = alphanumeric.reverse().join("");

  if (cleanString === reverseString) {
    result.innerHTML = `${userTextInput} is a palindrome`;
  } else {
    result.innerHTML = `${userTextInput} is not a palindrome`;
  }
};

function valid() {
  if (userTextInput.value == "") {
    alert("Please input a value");
    return;
  } else {
    palindrome(userTextInput);
  }
}

checkButton.addEventListener("click", valid);


Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

Hi! When you say nothing happens. What exactly are you referring to? Nothing happens in the preview window? Or nothing happens relating to the tests?

If you take a look at the console, there’s an error displayed after pressing the Check button:

Uncaught TypeError: str.toLowerCase is not a function

1 Like

What happens when you console.log your parameter?

Tbh with you I wasnt to sure how to use the console.log and only found out about it couple hours ago, silly me. The error I got was about the str.toLowerCase not being a function and to resolve this I added .toString().

const alphaNumeric = str.toString().toLowerCase().match(/[a-z0-9]/g);

I have updated my JS code and I did manage to complete all the tests but I was a bit curious about what it meant by objecthtmlinputelement in the console log when i leave the line "palindrome(userTextInput) as is. However adding .value did remove the error