Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

When the #text-input element only contains the letter A and the #check-btn element is clicked, the #result element should contain the text “A is a palindrome”.
I would think that i implemented the task above, though there is rendering on the console, the code is not passing. i need help with please.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>
      </title>
      <link rel="stylesheet" href="styles.css">
      
  </head>
  <body>
    
    <img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" class="image">
    <h1> Is it a palindrome ?</h1>

    <div id="result">

  <label id="for_text" class="for_text"> Enter a text to check for a palindrome:
        </label>
<input type="text" id="text-input">

<button id="check-btn">Check</button>   

      </div>
      
      <p>
         A <i>palindrome</i> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing
        </p>
    
    <script src="script.js">
    </script>
    </body>
  </html>

/* file: styles.css */
body { 
  background-color : black;
}
h1, p {
  color: white;
  text-align: center;
  vertical-align: center;
}
h1 {
  text-align: center;

}
img {
  width: 300px;
  height: 200px;
  margin: auto;
  align: center;
   
  
}
input {
  display: flex;
  width: 200px;
  height: 30px;
}
button {
  display: flex;
  width: 100px;
  height: 30px;
  color: white;
  background-color: purple;
  border-radius: 20px;
  text-align: center;
  justify-content: center;
}

div {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 120px;
  gap: 10px;
  background-color: #FFFFFF;
  margin: auto;
  justify-content: center;
  border-radius: 20px;
}
p {
  background-color: green;
}
label {
  word-spacing: 5px;
  padding-top: 5px;
}

/* file: script.js */
const btn = document.getElementById("check-btn");

const text = document.getElementById("text-input");


const result = document.getElementById("result");

btn.addEventListener("click", certInput);

function certInput() {
let input = text.value;
    if (input.trim() === "" || null) {
        alert("Please input a value");
        
    }
}
btn.addEventListener("click", chkA);
function chkA() {
    let input = text.value;
if (input === "A") {
        result.textContent = "A is a palindrome";
            } else {
                result.textContent = '';
            }
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

please don’t hardcode the testcases. You need to check the value in the input and without knowing what it is exactly, decide if it is a palindrome or not.
(pretend you don’ t know what the testcases are checking for and write code that works for any character, any word, any phrase)

3

Thank you for your feedback, would that mean to write a whole function for the palindrome checker?

4

also don’t nest the label and input and button elements inside your #result div.
The #result div is going to be over-written by your output later and will break the app.

1 Like
5

yes, you need a function to read the input and figure out whether that input is a palindrome or not (without any hardcode)

1 Like