Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

When testing to check my current JavaScript, the code does not pass and the preview window goes blank.

Here is the fourth test I’m checking:

When you click on the #check-btn element without entering a value into the #text-input element, an alert should appear with the text Please input a value.

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, initital-scale=1.0" />
     <title>Palindrome Checker Project</title>
     <link rel="stylesheet" href="./styles.css" />
     </head>
    <body>
      <main class="container">
        <h1>Palindrome Checker</h1>
        <div class="palindrome-div">
          <label>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="result-div" id="result"></div>
          <div class="palindrome-definition-div">
            <p class="palindrome-definition">A palindrome is a word or phrase that can be read the same way forwards and backwards, ignoring punctuation, 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 {
  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;
}

.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;
}

.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");

if (input === "") {
  alert("Please input a value");
  return;
};

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

I think there is a hint here:

3

Aren’t the empty quotes the way to show anything that isn’t alphanumeric or symbols? I’ve also tried a regex:

/[1]+$/i

This also doesn’t work.

  1. A-Za-z0-9 ↩︎

4

Perhaps I was trying to be too obscure with the hint.

You need to get the value from the element to do anything with it, such as compare it to your empty string ""

5

if (input.value === “”) {
alert(“Please input a value”);
return;
};

Is this what you mean? I thought that:

const input = document.getElementById(“text-input”);

is getting the value. Am I misunderstanding?

6

That is what I meant. It will be easier to read if you indent the alert and return lines.

The const line is just getting an element and storing it into a variable - so you could do things to the element, aside from getting its value, so. for example, you could change its color or its text (if it was a button) or its contents (for elements such as <div>).

Also, the test says:

We’ve just been concentrating on the second (non-italic) portion of the test. You need to think about how you’ll address the italic portion and then move the input check appropriately.

7

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