Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hello, I really need help with this project. I get an uncaught Reference Error saying that my input field is not defined but I did it at the beginning. Why do I get that error et How to fix it please!?
I can only validate the 3 first test in the challenge. I guess it’s because of that error too.
Thank you for your help !

HERE IS MY HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>Palindrome Checker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Is it a Palindrome?</h1>
  <p>A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
 <div id="checker-box">
    <p>Enter in text to check for a palindrome:</p>
    <input id="text-input"/></input>
    <button type="submit" id="check-btn">Check</button>
  
  <div id="result"></div>
</div>

<script src="./script.js"></script>
    
</body>
</html>

HERE is my CSS CODE

body {
  background-color: #000068;
  color: white;
  text-align: center;
  font-family: "Arial";
}
#checker-box {
  background-color: #ffffff;
  color: black;
}
#checker-box, #checker-box p {
  padding: 1rem;
}
button, input {
  padding: 0.5rem;
}

HERE IS MY JAVA CODE


let submitButton= document.getElementById("check-btn");
let inputfield= document.getElementById("text-input");
let result= document.getElementById("result");

function cleanInputString (str) { 
  const regex = /[_,():\/;\.{}+-\s]/g;
  return str.replace(regex, '');
};

function arrayAreEqual
(array1, array2) {
  if (array1.length !== array2.length) {
    return false;
  }
  for (let i=0; i < array1.length; i++) {
    if (array1[i] !== array2[i]) {
      return false;
    }
  }
  return true;
}

const palinCheck = (input) => {
  let cleanInput = cleanInputString(input);
  let casedInput = cleanInput.toLowerCase();
  let arrayedInput = casedInput.split("");
  let reversedArray = arrayedInput.toReversed();
  console.log(arrayedInput);
  console.log(reversedArray);

  if (arraysAreEqual(arraydInput, reversedArray)){
    return true;
  }else{
    return false;
  }
  }
submitButton.addEventListener("click", ()=> {
  if (inputField.value == "") {
    alert("Please input a value");
  }else if(palinCheck(inputField.value)){
    result.innerText = `${inputField.value}is a palindrome`
  }else {
    result.innerText = `${inputField.value}is not a palindrome`

  };
});

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

1 Like
2

Do you want to use inputfield or inputField?

Do you want to use arrayAreEqual or arraysAreEqual?

Is it arraydInput or arrayedInput?

After you get the above sorted out, I suggest you test the fifth test manually. Type “A” into the input box and click the Check button. Are you getting exactly what the tests are asking for?

1 Like
3

THANK YOU ! I fix everything and passed all the test ! I didn’t see I had wrong typo.

1 Like
4

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