Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I’ve passed everything other than the second to last test, everything I do then effects the rest of the code can i be pointed in the right direction

Your code so far

<!-- file: index.html -->
<!Doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="./styles.css" />

</head>

<body>
  <img class="freecodecamp-logo" src="https://user-images.githubusercontent.com/20648924/133188813-5cceb6b3-a610-444c-b44c-4061bfc5b5c5.png" alt="freeCodeCamp Logo">
  <h1>Is it a Palindrome?</h1>
  <div class="container">
    <label for="text-input">Enter in text to check for a palindrome:</label>
    <div class='form'>
    <input type="text" id="text-input"/>
    <button type="button" id="check-btn">check</button>
    </div>
    <div id="result"></div>
  </div>
<div class='hint'>
  Hint: A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
</div>
<script src='./script.js'></script>
</body>

</html>

/* file: styles.css */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding:10px;
    background-color: #0a0a23;
    color: #ffffff;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.freecodecamp-logo{
height:120px;

}
.container{
  margin-top:35px;
  background-color : white;
  color:black;
  border-radius:10px;
  padding:25px 50px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.form{
  display:flex;
  align-items:center;
  gap:20px;
}
.form button{
  background-color: #5a01a7;
  color:white;
  padding:5px 20px;
  border-radius:10px

}
.form input{
  outline:none;
  border:none;
  border-bottom: 2px solid #5a01a7
}
.hint{
  width:60%;
  padding:10px;
}

/* file: script.js */
const inputValue = document.getElementById("text-input")
const result = document.getElementById("result")
let value = ''
const checkbtn = document.getElementById("check-btn")
inputValue.onchange = (e) => { value = e.target.value }
checkbtn.onclick = () => {
 if (value) {
   const cleanValue = value.replace(/[\$\*\.','\s\-\_]/g,'').toLowerCase()
   const reversedValue = cleanValue.split('').reverse().join('').toLowerCase()
   if(cleanValue === reversedValue){
     result.innerText = `${value} is a palindrome`
     console.log(cleanValue)
     console.log(reversedValue)
   } else{
     result.innerHTML = `${value} is not a palindrome`;
     console.log(cleanValue)
     console.log(reversedValue)
   }
 } else {
   alert("Please input a value")
 }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

You are not removing many characters here. Only alphanumeric characters should be kept, as in, letters and numbers. The string for the second to last text 0_0 (: /-\ :) 0-0 is not a palindrome unless you remove all alphanumeric characters.
Maybe you need a different way to write your regex? is there a way to write a character class to select everything that is not a number or letter?

3

ok can you give me an example or hint I can run with

4

I did, but maybe you need more explicit: you can use the negated character class to match everything that is not a number of letter

5

thanks for the help much appreciated

6

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