Build a Palindrome Checker

JavaScript
1

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!

2

Welcome to the forum @louis.garafola

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

3

Added, thanks! I appreciate any insight.

4

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.

5

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

6

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!

7

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

8

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);
1 Like
9

check your sentence, make sure it is exactly as required

10

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

12

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

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.