Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

When the #text-input element contains the text _eye and the #check-btn element is clicked, the #result element should contain the text _eye is a palindrome .
I really don’t know how to handle this.

Your code so far

<!-- file: index.html -->
<! DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<title>Palindrome Checker</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<h1>Palindrome Checker</h1>
<h2>Welcome to my Palindrome Checker</h2>
<p>Here you can check your text for palindromness. Just input it in a window below to get the text checked.</p>
<input for="text" id="text-input" />
<div id="result"></div>
<button id="check-btn" type="button">Check</button>

<script src="script.js">
  </script>
  </body>
  </html>
/* file: styles.css */
body {
  min-height: 100vh;
}
*, ::before, ::after {
  box-sizing: border-box;
}
#text-input {
  display: block;
  margin: auto;
background-color: red;
  width: 300px;
  height: 100px;
  overflow: auto;
  border-top: solid black;
}
#result {
  display: block;
  margin: auto;
background-color: red;
width: 300px;
height: 40px;
overflow: auto;
border-bottom: solid black;
}
#check-btn {
  position: absolute;
  right: 250px;
  bottom: 100px;
}
h1, h2, p {
  text-align: center;
}

/* file: script.js */

const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");
const input = document.getElementById("text-input");
function check() {
  const inputValue = input.value.trim();
  if (inputValue === "") {
    alert("Please input a value");
  } else {
    return;
  }
}
checkButton.addEventListener("click", check);

function palindrome() {
let inputValue = input.value.replace(/[ ] \ ^ $  | ? * + ( )/).toLowerCase();
const reversedInput = inputValue.split('').reverse().join('');
if (inputValue === reversedInput) { 
  result.innerText = `${inputValue} is a palindrome`;
} else {
  result.innerText = `${inputValue} is not a palindrome`;
}
}
checkButton.addEventListener("click", palindrome);

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

it doesn’t look like you are considering the underscore here
also, I suggest looking at your regex with https://regex101.com/ and fixing it, you have lots of spaces, and unescaped characters that need to be escaped, and you should have everything in a character class with a g flag

let inputValue = input.value.replace(/[ ]\^$|?*+()\g/).toLowerCase();

I tried to do it but it became worse. What do I do? :sob:

first, you want a character class: how do you write a character class?
also, flags go after the closing slash

let inputValue = input.value.replace((\/[[ ] \ ^ $  | ? * + ( )]\/\)\/g).toLowerCase();

This is my current code. I checked it with regex101. There appears to be no mistakes but now freecodecamp shows errors.

I really don’t know how to make it not only ignore _ but also put it before eye. Also it doesn’t recognise sentences that contain palindromes as palindromes.

do not escape the start and end of the regex

instead you need to escape here the brackets that are not delimiting the character class

regex101 marked it as a mistake

regex101 doesn’t need you to write the delimiting slashes, they are already there, so remove the escaping of the delimiting slashes

I’ve decide to rewrite the code as I can’t make the result show , and _. Also I can’t figure out how to make _eye be considered a palindrome. And a sentence.

this is a palindrom once you remove correctly the underscore

Yes. But it should have the underscore in the result. And i don’t know how to do it.

When the #text-input element contains the text _eye and the #check-btn element is clicked, the #result element should contain the text _eye is a palindrome.

Hi @dustblackrose

You can return the original input variable value.

1 Like

input.value is still the original string, so you can use that. While you have the cleaned string as inputValue and you use that to test if it’s a palindrome

I tried to change my code. Can you take a look at it ?

const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");
const input = document.getElementById("text-input");
const inputValue = input.value.trim();
function check() {
  if (inputValue === "") {
    alert("Please input a value");
  } else {
    break;
  }
}
checkButton.addEventListener("click", check);
function palindrome() {
  inputValue.replace(/! @ # & ( ) – [ { } ] : ; ', ? \/\\ _ | *` ~ $ ^ + = < > [\s] “/g).toLowerCase;
  const inputValueReversed = inputValue.split("").reverse().join("");
  if (inputValueReversed === inputValue) {
    result.innerText = `${input.value} is a palindrome`;
  } else if (inputValueReversed !== inputValue) {
    result.innerText = `${input.value} is not a palindrome`
  }
}
checkButton.addEventListener("click", palindrome);

My alert’s now going off whenever I press check even though I have a condition. And my palindrome function doesn’t execute else if in my function. I tried with else and it wasn’t working as well.
Do you think i should’ve created separate functions for each task I have?

Hi @dustblackrose

You have two click events attached to the same button, one runs the check function, the other runs the palindrome function.

This is why the alert message is displayed every time the Check button is pressed.

Refer to what @ilenia wrote about using character classes.

this matches only a string that contains all of those characters in that order. You need to use a character class that matches one single character that can be any of those, this is your main issue now, everything else is pretty fine, you need to have a regex that works

I see. But I do need it both to work when i press check button. Is there a way to fix it? Maybe make it a text input event listener? Would that work? But it did say the user has to actually press the check button with empty input.

Character class is [], right? If so, I understand. And if not, then I’m at a loss of what to do.

What can i do to make palindrome function recognise else? It says everything’s a palindrome…

const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");
const input = document.getElementById("text-input");
const inputValue = input.value.trim();
const regex = /[!] [@] [#] [&] [(] [)] [–]  [{] [}]  [[]] [[]] [:] [;] ['][,] [?] [\\] [\/] [_] [|] [*][`] [~] [$] [^] [+] [=] [<] [>] [\s] [“]/gimu;
function check() {
  if (inputValue === "") {
    alert("Please input a value");
  } else { 
    return false;
  }
}
checkButton.addEventListener("click", check);
function palindrome() {
  inputValue.replace(regex, "").toLowerCase;
  const inputValueReversed = inputValue.reverse().split("").join("");
  if (inputValueReversed === inputValue) {
    result.innerText = `${input.value} is a palindrome`;
  } else {
    result.innerText = `${input.value} is not a palindrome`;
  }
}
checkButton.addEventListener("click", palindrome);

I made changes but it’s worse somehow. :sob: