Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

i have a question about a test in this project
in the test 15, it says that “1 eye for of 1 eye.” is not a palindrome but when removing spacing, numbers, and punctuations the text become “eyeforofeye” and its reverse is also “eyeforofeye”, is it a palindrome or not ?

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>Palindrome Checker</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Is it a Palindrome?</h1>
    <div id="Palindrome-checker">
      <p>Enter in text to check for a palindrome:</p>
      <span>
        <input id="text-input" type="text" >
        <button id="check-btn" type="button">Check</button>
      </span>  
      <p id="result"></p>
    </div>
    <div id="Palindrome-definition">
      <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>
    <script src="script.js"></script>
  </body>
</html>

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

function palindromeChecker(text) {
  const originalString = sameCase(cleanInput(text));
  const invertedString = invertText(originalString);

  if (originalString === invertedString) {
    textResult.style.color = "#3A9D16";
    textResult.innerText = `${textInput.value} is a palindrome.`;
  } else {
    textResult.style.color = "red";
    textResult.innerText = `${textInput.value} is not a palindrome.`;
  }
}

function cleanInput(text) {
  const regex = /[a-zA-Z]/g;
  if (text.match(regex)) {
  return text.match(regex).join("");
  } else {
    return "";
  }
}

function sameCase(text) {
  return text?.toLowerCase();
}

function invertText(text) {
  const invert = [];
  for (const char of text) {
    invert.unshift(char);
  }
  return invert.join("");
}

checkButton.addEventListener("click", () => {
  if (textInput.value) {
    palindromeChecker(textInput.value);
  } else {
    alert("Please input a value");
  }
});


/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  font-family: helvetica, sans-serif;
  font-size: 20px;
  background-color: #2E314C;
  color: linen;
  margin: 0;
}

h1, p {
  text-align: center;
}

#Palindrome-checker, #Palindrome-definition {
  width: 500px;
  margin: 0 auto;
  border-radius: 20px; 
}

#Palindrome-checker {
  background-color: white;
  color: black;
  padding: 10px;
  margin-top: 50px;
  box-shadow: 0 10px 10px 0 #18CA97;
}

#Palindrome-checker p:not(#result) {
  font-size: 16px;
}

span {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 
  40px;
}

#text-input {
  border: none;
  border-bottom: 2px solid #18CA97;
  width: 300px;
  font-size: 20px;
  text-align: center;
}

#check-btn {
  border: none;
  width: 70px;
  height: 30px;
  border-radius: 10px;
  background-color: #18CA97;
  color: linen;
  cursor: pointer;
}

#Palindrome-definition {
  background-color: #3A9D16;
  padding: 3px 28px;
  margin-top: 30px;
}

@media (max-width: 500px) {
  #Palindrome-checker, #Palindrome-definition {
    width: 100%;
  }
}

@media (max-width: 400px) {
  #text-input {
    width: 100%;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Hi there. The numbers are also consider in the string

2 Likes