Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.

Hey guys!
Can someone please help me on this Palindrome Checker project! It’s my first time building such a project . I have done some research but I am still not figuring it out?

A hint from you will highly be appreciate!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lan ="eng">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css"/>
  </head>
  <body>
    <main>
     <h1>Is it a Palindrome?</h1>
    <div class ="palindrome-edit">
      <label class="text-format">Enter your word to confirm whether it is Palindrome:</label>
    <input id="text-input" typye="text" placeholder="Please input a value"></input>
    <button id="check-btn" type="button" onclick="click">Check</button>
    <p> Palindrome is a reserver that spelled numbers, strings, and words both back and forward. Palindrome words can be read from right to left and left to right. </p>
    <div id="result"></div> 
    </div>
    <script scr="./script.js"></script>
    </main>
  </body>
</html>

/* file: styles.css */
body{
  background-color: #0a0a23;

}

h1{
  background-color: #0a0a23;
  color: #ffffff;
  padding: 120;
  text-align: center;
}

.text-format{
  background-color: #0a0a23;
  color: #ffffff
 
}
p{
  background-color: #0a0a23;
  color: #ffffff
  
}

/* file: script.js */
// declaring variables and values!

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


function palindrome(str){
 const re = /[^A-Za-z0-9]/g
 const lowRegStr = str.toLowerCase().replace(re, '');
 const reverseStr = lowRegStr.split('').reverse().join('');
 return reverseStr === lowRegStr;
};

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

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.

3

Which tests are failing? Where did you get stuck debugging?

4

I only have the first three tests correct! the rest of them are still X

5

Ok, which tests are those? Where did you get stuck during your debugging?

6

This is my code so far!

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


function palindrome(str){
 const re = /[^A-Za-z0-9]/g
 const lowRegStr = str.toLowerCase().replace(re, '');
 const reverseStr = lowRegStr.split('').reverse().join('');
 return reverseStr === lowRegStr;
7

I’m not sure if you read what I wrote?

Which specific tests are failing?

What have you tried to figure out why those tests are failing?

8

.reverse() replaces the original array. Use .toReversed() to create a new array to compare to. Use console.log() to verify what’s going on for your variables, was super helpful for me.

Good luck!

10

Getting closer. You still haven’t talked about what you have tried to figure out what’s wrong with the code for those test cases.

11

Hi @hiekamara1
You have a typo here, so the script is not linked to the html

In the button element you have a string for the attribute value, so this code will not do anything.

12

Hey Jeremy
Thanks for sharing your valuable time with me. Much appreciated!

I am stuck at writing the statements that will runs the above check on my code! I am currently reading another example and comparing it to mine but, I haven’t find a way to construct my statements!

13

I would start with fixing the typo ‘scr’ instead of ‘src’

14

I have ratified that error! The rest of the tests are still failing. I have tried other methods I researched, but the failing tests are still the same.

15

Hi @hiekamara1

Did you fix the button click issue I mentioned earlier?

Happy coding

1 Like
16

What were those? No need to keep what you tried secret!

17

Hey Teller,

Yes, I removed the Onclick =“click” assignment from the ‘button’ Element. I also clarified the JavaScript link error between HTML and JavaScript from ‘scr’ to ‘src’ !

while is true I have been trying to get this tests right for the past three to four days now, I want to thank you and Jeremy for the relentless effort to help a brother through this journey. I know I am missing some simple steps in the eyes of Millions people, but for now, It’s something big for me to figure out. I am still trying other methods I have from youtube and read on freeCodeCamp page

2 Likes
18

Please post your full updated code since you’ve made changes.

1 Like
21

You shouldn’t mix HTML and JavaScript like that

1 Like
22

I just paste that HTML here along with the JavaScript codes to show the clarification I did on the button Element. They are both in their respective workspace!

23

I would suggest you update your initial post with your new code. We need to see all of it. At least the HTML and JS.

You need the click handler. When the button is clicked your code should run using the value of the input element as the data for the function.