Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

No 4) an event listener that checks and alert users when they want to check an empty string
below is my js code but I couldn’t pass the step 4

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="eng">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Palindrome Checker Project</title>
    <link rel="stylesheet" href="styles.css">
    
  </head>
  <body>
    <p>ChinazaEkpere</p>
    <h1>Is it a Palindrome?</h1>
    <div class="input-div">
      <label for="text-input" id="label">Enter in text to check for a palindrome:</label><br>
      <input id="text-input" >
      <button id="check-btn" >Check</button>
      <span id="result"></span>
    </div>

    <div class="text-div">
      <p>💡 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 checkBtn = document.getElementById('check-btn');
const textInput = document.getElementById('text-input');

function checkButton(){
  textInput.value.trim();
  if(textInput === ''){
    alert('Please input a value');
  }
};
checkBtn.addEventListener("click", checkButton())



/* file: styles.css */
body{
  background-color: #030333;
  color: white;
  text-align: center;
  padding: 20px;
}
h1{
  font-size: 3rem;
}
.input-div{
  background-color: white;
  color: black;
  border-radius: 10px;
  height: 100px;
  margin: 30px;
   box-shadow: 0px 8px 5px #e940b6;
   padding: 15px;
}
#text-input{
margin: 30px;
border: none;
border-bottom : 5px solid purple
}
#check-btn{
  background-color: purple;
  color: white;
  border-radius: 5px;
  border: none;
  width: 90px;
  height: 30px;
  font-weight: bold
}
.text-div{
   background-color: green;
  color: white;
  border-radius: 10px;
  padding: 10px;
}
.text-div p{
  font-weight: bold;
  
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Can you please talk about how you got stuck figuring out what’s wrong with your code? Thanks

3

my function doesn’t work when I call it on my event listener

4

Did you double check the syntax of adding an event listener?

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

.addEventListener("click", displayDate);

There’s a small difference here from your code

.addEventListener("click", checkButton());

It’s the difference between calling a function and the name of the function.

It’s because you don’t actually Call the function there, it gets called later:

function greet(name, callback) {
    console.log("Hello, " + name);
    callback();   //Here's where it's actually called
}

function sayBye() {
    console.log("Goodbye!");
}

greet("Ajay", sayBye);  //here you you simply give the name of the function

I hope this helps

2 Likes
5

Thank you so much, it helped

1 Like