Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hi, i’m having trouble with the 15th step of the Palindrome Checker project. Every other test seems to run smoothly but the “1 eye for or 1 eye” feels impossible… I believe the problem is within the regex but at this point i’m not even sure… can you take a look please? Thank you.

EDIT: If i log the phrase happens this

console.log(cleanInput("1 eye for of 1 eye"))
// 1eyeforof1eye 
// result - is a palidrome

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" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>
      Palindrome Checker
    </title>
  </head>

  <body>
    <div class="container">
      <p>Hi, care to see if your word is a palindrome?</p>
      <input id="text-input"></input>
      <button id="check-btn">Check</button>
      <p id="result"></p>
    </div>
    <script src="script.js"></script>
  </body>
  </html>

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

checkBtn.addEventListener("click", isPalindrome);

function isPalindrome() {
  if (userInput.value == "") alert("Please input a value");

  let cleanStr = cleanInput(userInput.value);
  
  for (let i = 0; i <= Math.floor(cleanStr.length / 2); i++) {
    if (cleanStr[i] !== cleanStr[cleanStr.length - 1 - i]) {
      result.textContent = `${userInput.value} is not a palindrome`;
    } else {
      result.textContent = `${userInput.value} is a palindrome`;
    }
  }
}

function cleanInput(str) {
  const regex = /[\W_]/g;
  return str.replace(regex, '');
}

/* file: styles.css */
.container {
  display:flex;
  flex-direction:column;
  margin: 20px;
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

check how the value of result.textContent changes at each iteration, and what are teh values for cleanStr[i] and cleanStr[cleanStr.length - 1 -i], does what happens is what you expect there?

3

Ok, i have added two logs in the for loop to see how it was working… actually pretty weird as the result it’s not what it should be… now i see why it checks as a palindrome, but why does it work like that?

function isPalindrome() {
  if (userInput.value == "") alert("Please input a value");

  let cleanStr = cleanInput(userInput.value);
  
  for (let i = 0; i <= Math.floor(cleanStr.length / 2); i++) {
    if (cleanStr[i] !== cleanStr[cleanStr.length - 1 - i]) {

    console.log(cleanStr[i])
//1
//e
//e
//y
    console.log(cleanStr[cleanStr.length-1-i])
//y
//e
//e
//1

      result.textContent = `${userInput.value} is not a palindrome`;
    } else {
      result.textContent = `${userInput.value} is a palindrome`;
    }
  }
}

function cleanInput(str) {
  const regex = /[\W_]/g;
  return str.replace(regex, '');
}
4

because you are writing to result.textContent for each letter, meaning that at the end the last letter checked determines what goes in result.textContent

1 Like
5

Iadded a variable to get out of the for loop and it worked!! I’m sure it could’ve written a lot better but… one step at a time, Thank you!!

let checkPal = true;

function isPalindrome() {
  if (userInput.value == "") alert("Please input a value");

  let cleanStr = cleanInput(userInput.value);
  
  for (let i = 0; i < Math.floor(cleanStr.length / 2); i++) {
    if (cleanStr[i] !== cleanStr[cleanStr.length - 1 - i]) {
    console.log(cleanStr[i])
    console.log(cleanStr[cleanStr.length-1-i])
    return result.textContent = `${userInput.value} is not a palindrome`;
    }
  }
    return result.textContent = `${userInput.value} is a palindrome`;
}
6

you should not put that as a global variable, but better