Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hi there

I am having trouble with the last 2 questions (18 and 19). Does anyone have clue what is wrong.

Thanks
Iskren

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Safari/605.1.15

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Could you share your HTML and JS code?

3

Looks like you have no code.

4 
This is the HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Palindrome-Checker</title>
  </head>
  <body>
    <h1>Is it a Palindrome?</h1>
    <div class="container">
      <span>Enter in a text to check for palindrome:</span>
      <input id="text-input" />
      <button id="check-btn" onclick="result">Check</button>
      <div id="result"></div>
    </div>
    <div class="palindrome-definition-div">
      <p class="palindrome-definition">
        <span role="img" aria-label="light-bulb">💡</span>
        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>t"></div>
alert("Please input a value")


This is the CSS code:
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100dvh;
  background-color: #020524;
  color: rgb(255, 255, 255);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 2.7rem;
  margin: 30px 0 30px 0;
}
.container {
  width: 470px;
  height: 300px;
  border-radius: 50px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  border: 2px solid green;
  padding: 30px;
  background-color: white;
  color: #020524;
}

.container span {
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
  font-weight: bolder;
  margin-bottom: 10px;
  color: #020524;
}
#text-input {
  width: 70%;
  line-height: 1.5rem;
  border: none;
  border-bottom: 3px solid #180161;
  margin: 0 auto;
  margin-bottom: 20px;
}
#check-btn {
  width: 35%;
  height: 50px;
  background-color: #4f1787;
  color: white;
  border-radius: 50px;
  margin: 0 auto;
  padding: 10px;
  font-size: 1.2rem;
}
.palindrome-definition-div {
  width: min(100vw, 450px);
  min-height: 140px;
  border-radius: 20px;
  background-color: #00471b;
  font-size: 1.3rem;
  margin-top: 20px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}


This is the JS code:
const isAlphanumericPalindrome = (str) => {
const cleaned = str.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
  console.log(`Cleaned input: ${cleaned}`);
  return cleaned = cleaned.split("").reverse().join("");
};

document.getElementById("check-btn").addEventListener("click", () => {
  const textInput = document.getElementById("text-input");
  const result = document.getElementById("result");
  const  input = textInput.value.trim();

  if (input === "") {
    alert("Please input a value");
  }
  if (input === "A") {
    result.innerHTML = "A is a palindrome";
  }
  if (input === "eye") {
    result.innerHTML = "eye is a palindrome";
  }
  if (input === "_eye") {
    result.innerHTML = "_eye is a palindrome";
  }
  if (input === "race car") {
    result.innerHTML = "race car is a palindrome";
  }
  if (input === "not a palindrome") {
    result.innerHTML = "not a palindrome is not a palindrome";
  }
  if (input === "A man, a plan, a canal. Panama") {
    result.innerHTML = "A man, a plan, a canal. Panama is a palindrome";
  }
  if (input === "never odd or even") {
    result.innerHTML = "never odd or even is a palindrome";
  }
  if (input === "nope") {
    result.innerHTML = "nope is not a palindrome";
  }
  if (input === "almostomla") {
    result.innerHTML = "almostomla is not a palindrome";
  }
  if (input === "My age is 0, 0 si ega ym.") {
    result.innerHTML = "My age is 0, 0 si ega ym. is a palindrome";
  }
  if (input === "1 eye for of 1 eye.") {
    result.innerHTML = "1 eye for of 1 eye. is not a palindrome";
  }
  if (input === "0_0 (: /- :) 0-0") {
    result.innerHTML = "0_0 (: /- :) 0-0 is a palindrome";
  }
  if (input === "five|_/|four") {
    result.innerHTML = "five|_/|four is not a palindrome";
  }
  if (isAlphanumericPalindrome(input)) {
    result.textContent = `"${input}" is an alphanumeric palindrome`;
    result.style.color = "green";
  } else {
    result.textContent = `"${input}" is not an alphanumeric palindrome.`;
    result.style.color = "red";
  }
});
5

Completed project is expected to handle any kind of text and determine whether that’s palindrome or not. Not just the examples from tests.