Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Hi, I’m having issues with the palindrome checker project. It’s passing all the palindrome test cases where there are no white spaces or other characters.

It’s not passing test cases like: _eye or race car or 0_0 (: /-\ :slight_smile: 0-0 which means there must be something wrong with my regex pattern. I’ve tried: /[1]+$/ and ```
/[a-z0-9]/g, I’ve also tried the /W pattern. Is the regex the problem or is there something wrong with my logic?

I also get this error: Uncaught ReferenceError: myPalindromeFunction is not defined
Do I need to call the function somewhere? Is it ok to write the function as the second argument in the addEventListener?

Any input and guidance would be much appreciated.

Your code so far

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Is this a Palindrome</title>
    <link rel="stylesheet" href="styles.css">
  
  </head>

  <body style="background-color:black;">

<h2>Is it a palindrome?</h2>
<div  id = 'result' class="container">
<p>Enter in text to check for a palindrome:</p></div>
  <input id= 'text-input' placeholder= 'Type text here'></input>
<button id = 'check-btn' onclick="myPalindromeFunction()">Check</button>

<div>
<p class = 'paragraph-2 explanation'>A  <em>palindrome</em> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p></div>

<button id = 'clear'>Clear<button>
<script src="./script.js"> </script>
  </body>
</html>



/* file: styles.css */
body {
color: pink;
text-align: center;
}


.container, .explanation {
  border: 5px solid #ccc; 
border-top-left-radius: 3em 7em; 
border-top-right-radius: 4em 4em;
border-bottom-right-radius:5em 5em;
border-bottom-left-radius:5em 5em;
color: pink;
padding: 15px; 
  margin: 20px;
    box-shadow: 10px 10px;
}

button {
  background-color: pink;
  border: none;
  font-color: white;
  padding: 7px 32px;
border-top-left-radius: 3em 7em; 
border-top-right-radius: 4em 4em;
border-bottom-right-radius:4em 4em;
border-bottom-left-radius:4em 4em;
}

#clear {
font-size: 50px;
}
*{
  font-size: 1.1em;font-weight: 900;
}
h2 {
font-family: 'Anton', sans-serif;
  font-size: 2em;
}

.paragraph-2 {
padding: 20px;
}
 

/* file: script.js */
const input = document.getElementById("text-input");
const button = document.getElementById("check-btn");
const result = document.getElementById("result");

document.querySelector('button').addEventListener('click', function() {

  const regex = "/[^a-z0-9]/gi"
  const textInput = input.value.replace(regex, "").toLowerCase();
  
  const textInputReversed = textInput.split("").reverse().join("");
 

  if (textInput === ""){
   alert ("Please input a value");
  } else if ( textInputReversed === textInput)  {
result.innerHTML = (`${textInput} is a palindrome`) ;

    } else  {
result.innerHTML= (`${textInput} is not a palindrome`)
;
}
});

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

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.

1 Like
3

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

1 Like
4

Sorry, sorted it guys!

5

remove the quotes, it’s a regular expression not a string

6

Thank you! Yeah I don’t know what I was thinking!

7

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