Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I’ve been editing and researching different ways to write the same code and I can’t figure out why it’s not passing. VS Code has no errors, I am S-T-U-C-K!!!

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</title>
      <link rel="stylesheet" href="./styles.css" />
      </head>
    <body>
      <main class="container">
        <h1>Palindrome Checker</h1>
          <div class="palindrome-div">
            <label for="text-input">Type palindrome here:</label>
            <input 
              class="palindrome-input"
              id="text-input"
              value=""
              type="text"
                />
            <button class="palindrome-btn" id="check-btn">Check</button>
            <div class ="palindrome-result" id="result"></div>
              </div>
            <div class="palindrome-definition-div">
              <p class="palindrome-definition">A palindrome is a word or sentence that's spelled the same way forward and backward, without punctuation and ignoring the case and spacing.</p>
              </div>
            </main>
          <script src=".script.js"></script>
        </body>
      </html>



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

body {
  font-family: sans-serif;
  background-color: #0a0a23;
  color: #ffffff;
}

.container {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.title {
  text-align: center;
  padding: 10px 0;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.palindrome-div {
  width: min(100vw, 450px);
  min-height: 100px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px;
  margin: 20px 0;
  background-color: #ffffff;
  box-shadow: 0 6px 6px #002ead;
}

label {
  color: #0a0a23;
  margin-bottom: 20px;
}

.palindrome-btn {
  width: 90px;
  border: none;
  padding: 10px;
  border-radius: 10px;
  background-color: #ffd700;
  color: #000000;
  cursor: pointer;
}

.palindrome-input {
  height: 30px;
  width: 250px;
  text-align: center;
  font-size: 1.2rem;
  margin: 10px;
  border: none;
  border-bottom: 2px solid #000000;
}

.palindrome-input:focus {
  border-bottom: 3px solid #2f4f4f;
}

.palindrome-input::placeholder {
  text-align: center;
}

.user-input {
  font-size: 1.4rem;
  margin-top: 10px;
  text-align: center;
}

.results-div {
  overflow-y: auto;
  word-wrap: break-word;
  min-height: 50px;
  color: #000000;
}

.hidden {
  display: none;
}

.palindrome-definition-div {
  width: min(100vw, 450px);
  font-size: 1.3rem;
  min-height: 140px;
  background-color: #1e90ff;
  margin-top: 20px;
  padding: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.palindrome-definition {
  vertical-align: middle;
  text-align: center;
}


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

const checkPalInput = input => {
  if (checkPalInput === "") {
    window.alert("Please input a value");
    return;
  } else {
  const palLwr = checkPalInput.replace(/[^A-Za-z0-9]/g, "").toLowerCase();
  let answerPal = `${checkPalInput} {
    checkPalInput === [...palLwr].reverse().join("") ? " is" : " is not"
  }
  " a palindrome."`;
  };
};

check.addEventListener("click", check);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

In your checkpalinput function I think you mean to use your parameter (input) and not the function name.

3

Don’t I want to reverse the variable and see if it equals palLwr after I change everything to lower case according to the instructions?

4

Okay, I was looking at the wrong line, lol. I changed where you said and it’s still not working. I may need to call it a night and try again in the morning.

5

I’d have to examine more closely, but it seems to me you are calling the function within the function. Sometimes you want to do that, but I’m not sure you want to in this case. This is called recursion. Usually you use recursion for nested objects ( like getting the names of all the folders and subfolders in a root directory).

6

I’m going to separate the variable and then create the function. I think I’m trying to shove everything in the function when I need to be more step by step to find the bug.

7

I think that is a good step. But also, check how you are calling your script file. Also, I don’t see how you are calling your function once a user hits the button.

8

You mean in my HTML? I keep going back and forth between adding a period at the beginning and omitting it. Not sure which is correct.

9

Just look at how you have (correctly) called your styles file. :slight_smile:

10

Thanks for that! I am notorious for syntax errors at this point, I’ve been spoiled with auto correct! And now that tidbit of info will go on my wall of sticky notes in Sharpie!

11

const FormEl = document.querySelector(“form”);
const Input = document.getElementById(“text-input”);
const showResult = document.getElementById(‘result’)

FormEl.addEventListener(“submit”, (e) => {
e.preventDefault();
let InputValue = Input.value;
let reverseValue = ;
let reverseString = “”;
let result;
if (!InputValue) {
alert(“Enter Value”);
return
} else {
let correctValue = InputValue.replace(/[^A-Za-z0-9]/g, “”).toLowerCase();

for (let i = 0; i < correctValue.length; i++) {
  reverseValue.unshift(correctValue[i]);
  console.log(reverseValue);
}
reverseString = reverseValue.join("");

reverseString === correctValue ? result = `<span>${InputValue}</span> is Plaindrome` : result = `<span>${InputValue}</span> is not Plaindrome`;

}
showResult.innerHTML = result
return result;
});
Try this one

12

Didn’t work, but appreciate the help :innocent: :innocent: :innocent:

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.