Failing alert in test 4 Building a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Why am I still failing test 4: 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 ?

It passes when I test by clicking the check button, an alert pops up. But when I test the code inside freeCodeCamp it fails. Is there some hidden test case I’m failing?

code: https://codepen.io/Shukri-Isse/pen/PwwQaJg

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">
    <script defer src="script.js"></script>
  </head>
  <body>
    <div class="container">    
      <h1 class="h1">Is it a Palindrome?</h1>
      <form>
        <label id="label" for="text-input">Enter in text to check for a palindrome:</label>
        <input type="text" id="text-input" name="text-input">
        <button id="check-btn" type="submit">Check</button>
        <p id="result"></p>
      </form>
      <p class="definition">💡 A <span class="italic">palindrome</span> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
   </div>
  </body>
</html>

/* file: script.js */
// const isPalindrome = (str) => {
//     // loop thru string
//     // if it is even length check halfway, splice, reverse and compare the 2
//     // if it's odd find halfway point and splice before it, reverse, and compare the 2
//   };

const form = document.querySelector("form");
const textInput = document.querySelector("#text-input");
const checkBtn = document.querySelector("#check-btn");

// submit triggered by form element, input feilds don't submit anything
form.addEventListener("submit", (event) => {
  // stops submit from automatically submitting form
  event.preventDefault();
  // value of input text
  const inputValue = textInput.value.trim();

  if(inputValue ===  "") {
    // nothing was entered
    alert("Please input a value");
  }
  });

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

html, body {
  background: rgb(1,1,37);
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.h1 {
  font-size: 50px;
  color: #fff;
}

form {
  margin-top: 30px;
  padding-top: 25px;
  background: #fff;
  border-radius: 25px;
  width: 400px;
  height: 175px;
  box-shadow: 5px 10px 5px -5px navy;
}

.definition {
  margin-top: 30px;
  text-align: center;
  padding: 20px 20px;
  background: rgb(0, 66, 0);
  color: #fff;
  font-size: 22px;
  border-radius: 25px;
  width: 400px;
  height: 145px;
}

.italic {
  font-style: italic;
}

button {
  color: #fff;
  background: rgb(81, 0, 128);
  border-radius: 20px;
  width: 65px;
  height: 25px;
}

input {
  margin-top: 20px;
  border-bottom: 2px solid rgb(81, 0, 128);
  height: 25px;
  width: 200px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

The FCC editor does run in strict mode so you will get some different behaviour.

Your code in FCC is getting this error:

TypeError: checkBtn is null

You should put your script tag at the end of the body element. Right now I think the JS is running before the elements are created so it’s not able to capture the button element.

1 Like
3

I see, the issue is with how freeCodeCamp’s editor handles the defer, and by moving the script tag to the bottom we bypass all that and force it to run after the HTML is built and DOM is loaded. Thanks for the help my test case passes now!

1 Like
4

It may not be exactly related to strict mode, but it does seem to behave differently on codepen.

1 Like