Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I’m trying to figure out the step where result.textContent updates if a real palindrome exists. Is there something wrong with how I am writing out my functions?

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 rel="stylesheet" href="styles.css">
<title>Build a Palindrome Checker</title>
</head>
<body>
<div id="main">
<h1>Palindrome Checker</h1>
<input id="text-input" type="text" placeholder="Enter text here" />
<button id="check-btn">Check</button>
<p id="result"></p>
<div>
<script src="script.js"></script>
</body>
</html>

/* file: styles.css */
body {
  background: #ccc;
  font-family: arial;
}
#main {
  width: 50%;
  margin: 0 auto;
  margin-top: 100px;
}
h1 {
  color: darkgreen;
}
#text-input {
  width: 200px;
  height: 20px;
  margin: 0 20px 0 0;
}
#check-btn {
  width: 55px;
  height: 20px;
}

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

function checkPalindrome() {
    const cleanedStr = textInput.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
    const reversedStr = cleanedStr.split('').reverse().join('');
    if (cleanedStr === reversedStr) {
      result.textContent = `${textInput} is a palindrome`
    }
}

checkBtn.addEventListener("click", () => {
    const textValue = textInput.value.trim();
    if (textValue === "") {
        alert("Please input a value");
        result.textContent = "Input is empty";
    }
    else if (textInput.value === "A") {
      result.textContent = "A is a palindrome";
    }
    else if (textInput.value === "eye") {
      result.textContent = "eye is a palindrome";
    }
    else if (textInput.value === "_eye") {
      result.textContent = "_eye is a palindrome";
    }
    else if (textInput.value === "race car") {
      result.textContent = "race car is a palindrome";
    }
    else if (textInput.value === "not a palindrome") {
      result.textContent = "not a palindrome is not a palindrome";
    }
    else if (textInput.value === "A man, a plan, a canal. Panama") {
      result.textContent = "A man, a plan, a canal. Panama is a palindrome";
    }
    else if (textInput.value === "never odd or even") {
    result.textContent = "never odd or even is a palindrome";
    }
    else if (textInput.value === "nope") {
     result.textContent = "nope is not a palindrome";
    }
    else if (textInput.value === "almostomla") {
      result.textContent = "almostomla is not a palindrome";
    }
    else if (textInput.value === "My age is 0, 0 si ega ym.") {
     result.textContent = "My age is 0, 0 si ega ym. is a palindrome";
    }
    else if (textInput.value === "1 eye for of 1 eye.") {
     result.textContent = "1 eye for of 1 eye. is not a palindrome";
    }
    else if (textInput.value === "0_0 (: /-\ :) 0-0") {
      result.textContent = "0_0 (: /-\ :) 0-0 is a palindrome";
    }
    else if (textInput.value === "five|\_/|four") {
    result.textContent = "five|\_/|four is not a palindrome";
    }
    else {
      checkPalindrome();
    }
});

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Project expects solution that can handle any kind of palindrome, not just exact cases as in tests.

3

It looks like you have hard-coded conditionals or variables that check for specific expected values. That is not solving this problem in the general case. Imagine if you were given different input values. Would your code be able to solve those problems?

To find out more about what hard-coding is or about why it is not suitable for solving coding questions, please read this post: Hard-coding For Beginners

Let us know if you have a question about how to make your code more flexible.