Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

Describe your issue in detail here.

I tried my best to do this without asking for any help. I’m having a right brain fart. I think the code is mostly correct. I still haven’t had anything happen yet when I click the button.

My thinking was to create a function that will clean the input string (removing punctuation), then reverse it. I added an if statement to compare the before and after of the string. At the end I added an event listener to the button to listen for a click and call the function. Obviously something is a wrong haha. A point in the right direction would be greatly appreciated.

Cheers

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Palindrome Checker</title>
  <link rel="stylesheet" href="./styles.css">
</head>

<body>
  <h1>Is your word a Palindrome?</h1>

  <div id="check-wrap">
    <label id="text-label">Enter your word: </label>
    <input id="text-input" type="text">
    <button id="check-btn" type="button" onclick="check()">Enter
  </div>
    <div id="result">A palindrome is a word that is spelt the same way forward as it is backwards.</div>

<script src="./script.js"></script>
</body>
</html>
/* file: styles.css */
body {
  width:100%;
  background-color: rgba(50, 50, 50, 1);
  justify-content: center;
  box-sizing: border-box;
}


h1 {
  text-align: center;
  margin: 30px 100px;
  padding: 20px;
  color: rgba(180, 0, 255, 1);
  border-bottom: 4px solid rgba(180, 0, 255, 1);
}

#check-wrap {
  background-color: rgba(255, 255, 255, 1);
  align-items: center;
  height: 20%;
  width: 50%;
  margin: 30px 190px
}

#text-label {
  color: rgba(180, 0 ,180, 1);
  font-weight: bold;

}

#text-input {
  border-bottom: 3px solid rgba(180,0,180,1);
  margin: 10px 5px;
}

#check-btn {
  background-color: rgba(180, 0, 255, 1);
  box-shadow: 0 ;
  height: 18px;
  width: 50px;
  font-weight: bold;
}

#check-btn:hover {
  background-color: rgba(100,255,180,1);

}

#result {
  width: 50%;
  height: 10%;
  background-color: rgba(100,255,180,1);
  margin: 30px 190px;
  text-align: center;
  padding: 5px;
  border: 3px solid rgba(100,230,180,1);
}
/* file: script.js */

function check(str) {

  const textInput = document.getElementById('text-input');
  const checkButton = document.getElementById('check-btn');
  const result = document.getElementById('result');


  str = textInput.value;
  const regex = [a-zA-Z0-9]/g;
  const lowerCase = str.toLowerCase().replace(regex, '');
  const reverseString = lowerCase.split('').reverse().join('');


  if (lowerCase === reverseString) {
    result.innerHTML = `${textInput.value} is a palindrome`;
    textInput.innerHTML = "";
  } else if (lowerCase !== reverseString) {
    result.innerHTML = `${textInput.value} is not a palindrome`;
    textInput.innerHTML = "";
  } else if (textInput.value === null) {
    alert("Please input a value");
  } else if (textInput.value.length < 1) {
    textInput.innerHTML = "";
  }
}

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

Your browser information:

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

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.

You’ve defined checkButton inside the check function but ‘used’ it outside of the check function

I originally had those get element const outside. I’ve put them back outside before the function and the button listener is still at the end of the code. Im still not getting any action when I click the button.

Please show me your code.

JS CODE
const textInput = document.getElementById(‘text-input’);
const checkButton = document.getElementById(‘check-btn’);
const result = document.getElementById(‘result’);

function check(str) {

str = textInput.value;
const regex = [a-zA-Z0-9]/g;
const lowerCase = str.toLowerCase().replace(regex, ‘’);
const reverseString = lowerCase.split(‘’).reverse().join(‘’);

if (lowerCase === reverseString) {
result.innerHTML = ${textInput.value} is a palindrome;
textInput.innerHTML = “”;
} else if (lowerCase !== reverseString) {
result.innerHTML = ${textInput.value} is not a palindrome;
textInput.innerHTML = “”;
} else if (textInput.value === null) {
alert(“Please input a value”);
} else if (textInput.value.length < 1) {
textInput.innerHTML = “”;
}
}

checkButton.addEventListener(“click”, check());

HTML CODE

Palindrome Checker

Is your word a Palindrome?

Enter your word: Enter
A palindrome is a word that is spelt the same way forward as it is backwards.

Apologise about the format.

Putting () after check will cause check to be run straight away.
So, remove ()

I have removed () from check(). Still nothing happens when I click the button. Could it be anything to do with how the file links with HTML?

I noticed that you don’t have a closing tag for your button

Still nothing with the closing tag for the button.

Please show me the code (both HTML and JS) the same way as in the first message

type or paste code here
<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Palindrome Checker</title>
  <link rel="stylesheet" href="./styles.css">
</head>

<body>
  <h1>Is your word a Palindrome?</h1>

  <div id="check-wrap">
    <label id="text-label">Enter your word: </label>
    <input id="text-input" type="text">
    <button id="check-btn" type="button" onclick="check()">Enter</button>
  </div>
    <div id="result">A palindrome is a word that is spelt the same way forward as it is backwards.</div>

<script src="./script.js"></script>
</body>
</html>

  const textInput = document.getElementById('text-input');
  const checkButton = document.getElementById('check-btn');
  const result = document.getElementById('result');

function check(str) {

  str = textInput.value;
  const regex = [a-zA-Z0-9]/g;
  const lowerCase = str.toLowerCase().replace(regex, '');
  const reverseString = lowerCase.split('').reverse().join('');


  if (lowerCase === reverseString) {
    result.innerHTML = `${textInput.value} is a palindrome`;
    textInput.innerHTML = "";
  } else if (lowerCase !== reverseString) {
    result.innerHTML = `${textInput.value} is not a palindrome`;
    textInput.innerHTML = "";
  } else if (textInput.value === null) {
    alert("Please input a value");
  } else if (textInput.value.length < 1) {
    textInput.innerHTML = "";
  }
}

checkButton.addEventListener("click", check);

that took me so long to work out how to format the code to look like that haha. I appreciate the help mate.

You shouldn’t pass an argument here. And then you should declare the str variable using const

I understand the code has been changed to the suggestion. Is there something I have missed. When I click the button, nothing changes in the results element. No alert comes up if I click the button without typing anything. I’m still learning new things but coming back to this so I don’t feel like i am just stuck on this one problem.

Again, please show me the code (both HTML and JS) the same way as in the first message

type or paste code here
<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Palindrome Checker</title>
  <link rel="stylesheet" href="./styles.css">
</head>

<body>
  <h1>Is your word a Palindrome?</h1>

  <div id="check-wrap">
    <label id="text-label">Enter your word: </label>
    <input id="text-input" type="text">
    <button id="check-btn" type="button" onclick="check()">Enter</button>
  </div>
    <div id="result">A palindrome is a word that is spelt the same way forward as it is backwards.</div>

<script src="./script.js"></script>
</body>
</html>

  const textInput = document.getElementById('text-input');
  const checkButton = document.getElementById('check-btn');
  const result = document.getElementById('result');

function check() {

  const str = textInput.value;
  const regex = [a-zA-Z0-9]/g;
  const lowerCase = str.toLowerCase().replace(regex, '');
  const reverseString = lowerCase.split('').reverse().join('');


  if (lowerCase === reverseString) {
    result.innerHTML = `${textInput.value} is a palindrome`;
    textInput.innerHTML = "";
  } else if (lowerCase !== reverseString) {
    result.innerHTML = `${textInput.value} is not a palindrome`;
    textInput.innerHTML = "";
  } else if (textInput.value === null) {
    alert("Please input a value");
  } else if (textInput.value.length < 1) {
    textInput.innerHTML = "";
  }
}

checkButton.addEventListener("click", check);

First I suggest you use console.log('Here') as the first thing in the check function to see if the check function is being called.

Then, if it is, I suggest you use the console.log statement to see what the values of str, etc are, as well as to check if you are using the correct check of textInput.value === null.

Also, I suggest you rearrange the order of the if statements to check there is an input first before checking whether or not it is a palindrome.

Mate I appreciate this help. I have taken your advice and looked at the console. There was a lot of undefined variables which I think was cause by putting the variable in the function. I have changed the layout of the code and now the button works but not every box is ticked yet. But most are so Il try and solve it.

const textInput = document.getElementById('text-input');
const checkButton = document.getElementById('check-btn');
const result = document.getElementById('result');

const str = textInput.value;
const regex = [a-zA-Z0-9]/g;
const lowerCase = str.toLowerCase().replace(regex, '');
const reverseString = lowerCase.split('').reverse().join('');



function check() {

  if (textInput.value === "") {
    alert("Please input a value");
  } else if (lowerCase === reverseString) {
    result.innerHTML = `${textInput.value} is a palindrome`;
    textInput.innerHTML = "";
  } else if (lowerCase !== reverseString) {
    result.innerHTML = `${textInput.value} is not a palindrome`;
    textInput.innerHTML = "";
  } else if (textInput.value.length < 1) {
    textInput.innerHTML = "";
  }
}
checkButton.addEventListener("click", check);