Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I am truly stuck! I have been trying to get the user story of satisfying the _eye test but I can’t progress. Please help me by giving me a hint of how to move forward or what to research further

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Build a Palindrome Checker Project</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <main>
      <div class="title-container">
        <h1 class="title">Is it a Palindrome?</h1>
</div>
        
              
      <div class="divider"></div>
        <details class="rules-container">
          <summary>What is a Palindrome?</summary>
            <p>A <span><em>palindrome</em></span> is a word or sentence   that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
        </details>

      <div class="dropdown-container">
        <section id="enter-line">Enter in text to check for a       palindrome:</section>
        <input type="text" id="text-input" name="text-input" placeholder="Enter a word"/>
        <button type="button" id="check-btn">Check</button>
      
        <div id="result"></div>
      </div>
      </main>

    <script src="./script.js"></script>
  </body>
</html>

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


checkButton.addEventListener("click", (event) => {
   textInput.value === '' ? alert("Please input a value") : resultDisplay(textInput);
});

//Helper Function - I had the thought of converting all letters to lowercase and accepting the underscore character too to satisfy the _eye test.

// function charAccept(textInput){
// const toLowerCase=/[a-zA-Z_]+/;
// return toLowerCase.test(textInput);
// }



function palindrome(textInput){
if (charAccept(textInput)){
const textValue=textInput.value;   
let textRecieved = textValue.split("").reverse().join("");
return textValue === textRecieved;
}else{
   return false;
}
}

function resultDisplay(textInput){
palindrome(textInput) ? 
  result.innerHTML=`${textInput.value} is a palindrome`:result.innerHTML=`${textInput.value} is not a palindrome`
  };

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

:root {
  --dark-grey: #0a0a23;
  --white: #ffffff;
  --yellow: #f1be32;
}

body {
  color: var(--white);
  background-color: var(--dark-grey);
}

.title-container {
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.title {
  font-size: 2.5rem;
}


.divider {
  margin: auto;
  width: 150px;
  height: 10px;
  background-color: var(--yellow);
}

.rules-container {
  padding: 10px;
  margin: 30px;
  border-radius: 15px;
  border: 5px solid var(--yellow);
  text-align: center;
}

.rules-container p {
  margin: 10px 0; 
}

.dropdown-container {
  width: 50%;
  margin: 40px auto;
  padding: 10px;
  position: relative;
  background-color:white;
  color:var(--dark-grey);
}

#text-input placeholder{
  color: red;
}

@media (max-width: 375px) {
  .title {
    font-size: 2rem;
  }

  .dropdown-container {
    width: 80%;
  }
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

have you tried to add some console.log statement to see where the problem is happening?

1 Like
3

You’re just slightly misunderstanding the criteria for a valid palindrome and the way you’re testing for it.

In this project a valid palindrome is any string where the alphanumeric characters only (i.e. A-Z, a-z and 0-9) form a palindrome.

You can look at the test cases to see various examples of valid or invalid strings.

Therefore, any string which is being tested should ignore all non-alphanumeric characters (including the underscore). The test method returns true or false when searching for a pattern in a string, so it’s not the correct method if you’re trying to return a string (or parts thereof).

A logical approach would be to find and remove all non-alphanumeric characters from the input string and then test the modified string for palindromicity.

4

thanks so much for clearing that up, that did the trick!

1 Like