Build a Palindrome Checker

Hi, I’m pretty stuck on the palindrome check test and would appreciate any feedback on my JS code:

///start JS code//

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

// called by clicking the check button, alert if empty or run main function
function checkButtonAlert() {
  if (textInput=== "") {
    alert("Please input a value")
  } else {
    palindrome()
  }
};

// main function: prepare array, reverse, compare then return text to #result.
function palindrome(str) { 
  let regex = /[^A-z0-9]/g;
  const cleanArray = str.replace(regex, "").toLowerCase().split("");
  const reverse = cleanArray.reverse();

  if (cleanArray === reverse) {
    result.innerText = `${textInput} is a palindrome`;
  } else {
    result.innerText = `${textInput} is a not palindrome`;
  }
};


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

///end JS code///
///start HTML///

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-9" />
    <meta name="viewport" content="width=device-width" initial-scale="1.0" />
    <title>Palindrome Building Project</title>
    <link href="styles.css" rel="stylesheet" />
    <link src="script.js" />
  </head>
  <body>

    <div id="header">
      <h1>IS IT A PALINDROME?!</h1>
    </div>
       <hr>
    <div id="main">
      <input id="text-input" type="text" placeholder="Enter text..."></input>
      <button id="check-btn" type="submit">Check Now!</button>
    </div>
      <hr>
    <div id="result">
    </div>

    <img src="https://uselessetymology.files.wordpress.com/2019/10/palindrome-useless-etymology-12.png?w=1200" />

  </body>
</html>

///End HTML///
///start CSS///
:root {
  --main: rgb(52, 175, 175);
  --text: rgb(30, 136, 158);
  --border: gray;
  box-sizing: border-box;
  font-family: serif;
  background-color: rgb(68, 32, 19);
  
}

#header {
  background-color: var(--main);
  color: var(--text);
  width: 100%;
  height: 120px;
  text-align: center;
  font-size: 1.5rem;
  text-shadow: 3px 3px var(--border);
  border: 2px dashed var(--border);
  margin-top: 30px;
}

#main {
  background-color: var(--main);
  color: var(--text);
  display: grid;
  width: 100%;
  height: 75px;
  border: 2px dashed var(--border);
}

#text-input {
  width: 50%;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  margin-top: 8px;
  text-align: center;
  border: 1px dashed var(--border);
}

#check-btn {
  width: 40%;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--text);
  color: var(--main);
  border-radius: 5px;
  border: 1px dashed var(--border);
}

#check-btn:active {
  color: rgb(68, 32, 19);
}

#result {
  background-color: var(--main);
  color: var(--text);
  text-align: center;
  height: 50px;
  width: 100%;
  padding-top: 3px;
  border: 2px dashed var(--border);
}

hr {
  background-color: var(--border);
  height: 2px;
}

img {
  height: auto;
  width: 100%;
  margin-top: 70px;
}
///end CSS///

Thanks in advance to anyone willing to look!

Welcome to the forum @louis.garafola

Post the html and css as well so the forum can assist.

Added, thanks! I appreciate any insight.

Both .innerText properties of the result variable are not correctly syntaxed, and are throwing an error in the console.

Also, link the css and js files in the html code.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

I incorrectly linked to my .js file, that’s been updated with <script> on my html.

Now my console is giving me “Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)” and I’m not sure why it’s reading that as ‘null’.

also added let result = document.querySelector("#result"); to my palindrome function to define the result variable.

Any help is appreciated, thanks to all who have already chimed in!

use a script element and put it at the end of the body element

Alright, leaps and bounds improvement today and I’m almost there. I’m failing a few tests that actually work as intended when input:

not a palindrome
nope
almostomla
1 eye for of 1 eye.
five|_/|four

These should, an do, respond with “not a palindrome”, but I’m failing the test when run. Thanks again, and I really appreciate the assistance!!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-9" />
    <meta name="viewport" content="width=device-width" initial-scale="1.0" />
    <title>Palindrome Building Project</title>
    <link href="styles.css" rel="stylesheet" /
  </head>
  <body>

    <div id="header">
      <h1>IS IT A PALINDROME?!</h1>
    </div>
       <hr>
    <div id="main">
      <input id="text-input" type="text" placeholder="Enter text..." />
      <button id="check-btn" type="submit">Check Now!</button>
    </div>
      <hr>
    <div id="result">Find out here</div>

    <img src="https://uselessetymology.files.wordpress.com/2019/10/palindrome-useless-etymology-12.png?w=1200" />

  <script src="script.js"></script>
  </body>
  
</html>
:root {
  --main: rgb(52, 175, 175);
  --text: rgb(30, 136, 158);
  --border: gray;
  box-sizing: border-box;
  font-family: serif;
  background-color: rgb(68, 32, 19);
  
}

#header {
  background-color: var(--main);
  color: var(--text);
  width: 100%;
  height: 120px;
  text-align: center;
  font-size: 1.5rem;
  text-shadow: 3px 3px var(--border);
  border: 2px dashed var(--border);
  margin-top: 30px;
}

#main {
  background-color: var(--main);
  color: var(--text);
  display: grid;
  width: 100%;
  height: 75px;
  border: 2px dashed var(--border);
}

#text-input {
  width: 50%;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  margin-top: 8px;
  text-align: center;
  border: 1px dashed var(--border);
}

#check-btn {
  width: 40%;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--text);
  color: var(--main);
  border-radius: 5px;
  border: 1px dashed var(--border);
}

#check-btn:active {
  color: rgb(68, 32, 19);
}

#result {
  background-color: var(--main);
  color: rgb(158, 68, 36);
  text-align: center;
  justify-content: center;
  height: 50px;
  width: 100%;
  padding-top: 13px;
  border: 2px dashed var(--border);
  font-size: 2rem
}

hr {
  background-color: var(--border);
  height: 2px;
}

img {
  height: auto;
  width: 100%;
  margin-top: 70px;
}
const textInput = document.getElementById('text-input');
const checkButton = document.getElementById('check-btn');
const result = document.getElementById('result');

function palindrome() { 
  let regex = /[^A-z0-9]/gi;
  let regexa = /[_]/g;
  const cleanArray = textInput.value.replace(regex, "").replace(regexa, "").toLowerCase().split("");
  const reverse = cleanArray.toReversed();

  console.log(cleanArray);
  console.log(reverse);
  console.log(String(cleanArray) === String(reverse))

  if (String(cleanArray) === String(reverse)) {
    return result.innerText = textInput.value + " is a palindrome";
  } else {
    return result.innerText = textInput.value + " is a not palindrome";
  }
}

function checkButtonAlert() {
  if (textInput.value === "") {
    alert("Please input a value");
  } else {
    palindrome()
  }
}

checkButton.addEventListener("click", checkButtonAlert);

check your sentence, make sure it is exactly as required

:frowning: typos… That solved it, thanks so much for your help on this one! I learned a lot :slight_smile:

please open your own topic to ask for help, thank you