Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.

I don’t understand why I can not pass the test.

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>
    <div id="container">
      <header>
        <h1>Palindrome Checker.</h1>
        <p>
          💡A palindrome is a word or phrase that can be read the same way forwards and backwards, ignoring punctuation, case, and spacing.
        </p>
      </header>
      <div class="input">
        <label for="text-input" >Enter a text to check for a palindrome:</label>
        <br>
        <input type="text" id="text-input" name="palindrome" placeholder="Enter text or number">
        <button id="check-btn">Check</button>
      </div>
      <div id="result">
        
      </div>
    </div>
    
    
    <script src="script.js"></script>
  </body>
</html>

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

body {
  min-height: 100vh;
  font-size: 16px;
  display: flex;
  align-items: center;
  background-color: #301934; 
}

header h1 {
  text-align: center;
  margin-bottom: 25px;
}

#container {
  border: 1px solid #fff;
  border-radius: 10px;
  background-color: #F5EDE5;
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 0 60px;
}

header h1 {
  color: #023020;
}

header p {
  background-color: #023020;
  color: #fff;
  padding: 15px 15px;
  width: 90%;
  margin: 0 auto 25px;
  border-radius: 15px;
}

.input {
  padding-left: 40px;
}

input[type=text] {
  margin-top: 15px;
  width: 55%;
  padding: 0.8em;
  border: none;
  border-bottom: 3px solid #023020;
  font-size: 16px;
}

button {
  opacity: 0.8;
  border: none;
  background-color: #023020;
  border-radius: 10px;
  padding: 1em 2em;
  color: #fff;
  cursor: pointer;
  margin: 10px;
}

button.active {
  opacity: 1;
}

#result {
  display: none;
  text-align: center;
  padding-top: 15px;
}


/* file: script.js */
const text = document.querySelector("#text-input");
const button = document.querySelector("#check-btn");
const result = document.querySelector("#result");
let editInput;
let originalInput;

const nonAlphaNumeric = (inputString) => {
  //remove all punctuations, spaces and symbols from input.
  const regex = /[^a-zA-Z0-9]/ig;
  return inputString.replace(regex, '').toLowerCase();
};

const displayReverseInput = () => {
  if(text.value === "") {
    return alert("Please input a value")
    }
// split the input into an array, reverse them and join them into a string
  let reverseInput = [...editInput].reverse().join("");
  result.style.display = "block";

  if(editInput !== reverseInput) {
    return result.innerText =`${originalInput} is not a palindrome`  
  }
   result.innerText =`${originalInput} is a palindrome`
}

const textInputInfo = () => {
  originalInput = text.value;
  editInput = nonAlphaNumeric(text.value);
  if(editInput) {
    return button.classList.add("active");
  }
   button.classList.remove("active");
}

button.addEventListener("click", (displayReverseInput))

text.addEventListener("keyup", (textInputInfo))

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

its a wrong code for the project . just try to read the instructions , and also template literals aren’t required for the project . Waiting for current updates on the project building :slight_smile:

4

I still don’t undertand why is a wrong code cause the instructions don’t specifically tell you which codes to use

5

The purpose of the certification projects is for you to design code that meets the requirements.