Learn Regular Expressions by Building a Spam Filter - Step 3

Tell us what’s happening:

Window gives the alert when messageInput is empty as requested, but does not satisfy 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" />
    <title>Learn Regular Expressions by Building a Spam Filter</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <header class="main-text">
      <h1 class="title">Is this Spam?</h1>
      <p class="description">
        Enter a phrase to check if it would be marked as spam or not.
      </p>
    </header>

    <main>
      <label class="message-label" for="message-input">Message: </label>
      <textarea
        placeholder="Enter message here"
        value=""
        type="text"
        name="message"
        id="message-input"
        rows="10"
        cols="40"
      ></textarea>
      <button class="btn" id="check-message-btn" type="button">
        Check message
      </button>
      <p id="result"></p>
    </main>

    <footer class="footer">&copy; freeCodeCamp</footer>
    <script src="./script.js"></script>
  </body>
</html>
/* file: styles.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --dark-grey: #1b1b32;
  --light-grey: #f5f6f7;
  --golden-yellow: #fecc4c;
  --yellow: #ffcc4c;
  --gold: #feac32;
  --orange: #ffac33;
  --dark-orange: #f89808;
}

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

body,
#message-input:placeholder-shown {
  text-align: center;
}

textarea {
  max-width: 90%;
}

.main-text {
  margin: 25px 0;
}

.title {
  font-size: 2.5rem;
}

.description {
  margin-top: 15px;
  font-size: 1.4rem;
}

.message-label {
  display: block;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

#message-input:placeholder-shown,
textarea {
  font-size: 1.1rem;
}

.btn {
  display: block;
  cursor: pointer;
  width: 200px;
  margin: 10px auto;
  color: var(--dark-grey);
  background-color: var(--gold);
  background-image: linear-gradient(var(--golden-yellow), var(--orange));
  border-color: var(--gold);
  border-width: 3px;
}

.btn:hover {
  background-image: linear-gradient(var(--yellow), var(--dark-orange));
}

#result {
  font-size: 2rem;
  margin: 20px 0;
}

.footer {
  margin-top: 10px;
}
/* file: script.js */
const messageInput = document.getElementById("message-input");
const result = document.getElementById("result");
const checkMessageButton = document.getElementById("check-message-btn");


// User Editable Region

checkMessageButton.addEventListener("click", () => {
  if (messageInput.value === '') {
    window.alert('Please enter a message.')
  }
});

// User Editable Region

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/17.1 Safari/605.1.15

Challenge Information:

Learn Regular Expressions by Building a Spam Filter - Step 3

You don’t technically need to reference the window object and the tests aren’t expecting it, so get rid of that.

“Then, exit the function execution.”

You forgot about this part.

1 Like

Removing window did get the hint to move to the last issue. However, neither return or break from within the conditional block seemed to satisfy the test. I would try return after the conditional, but that seems redundant since it would return undefined anyway.

Try placing the return statement on a new line in the function body.

Here is an MDN article on return you may find helpful.

Happy coding

1 Like

I am currently doing so:

checkMessageButton.addEventListener("click", () => {
  if (messageInput.value === '') {
    alert('Please enter a message.');
    return;
  };
});

It doesn’t want it outside the conditional block, right? Breaking the function within the conditional is the only thing that makes sense if the conditional resolves to truthy (in this case).

You don’t need a semi-colon at the end of the if block.

2 Likes