Answer explanation - Learn Regular Expressions by Building a Spam Filter - Step 5

Tell us what’s happening:

Can someone explain to me why the answer isn’t? I solved it by only by fiddling with my syntax and not truly understanding it. I initially thought this was the answer

isSpam(messageInput.value) ? result.textContent = 'Oh no! This looks like a spam message.': result.textContent ='This message does not seem to contain any spam.';  messageInput.value = ""; 

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

const isSpam = (msg) => false;


// User Editable Region

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


});v

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Learn Regular Expressions by Building a Spam Filter - Step 5

You are technically able to do assignments like that inside a ternary but it isn’t the proper use of a ternary.

It evaluates to one of the two values, the assignment should come before the ternary.

const evaluatedValue = someCondition ? 'If true' : 'If false'

Hi @raven1177,
Your question has thoughtfulness into it and I will try to give you my opinion in equal kind.
There is kind of a hidden discrepancy between the requested requirements and the validation process that the learning course afford. What do I mean? If you read and try to comprehend the question, to a human is kind of open to interpretation which makes you think that the implementation is flexible as long as the result matches the requirement. But the validation process is primitive and rigid, which does not accommodate beyond matching an exact string entry. The opposite would be match behavior result.
All this is just to explain that not necessarily, not passing mean that what you understood was wrong, but rather that validation process does not care about anything else but how you entered the statement.

The way you crafted your original statement your mind was translating what you were reading in the requirement and used the ternary condition operator to do what it can be called side effect: assign a value to a variable or assign another different value to the same variable. But the common use of that ternary operator is to return a value that gets assigned to a variable and that’s what the statement validation wanted.

In this case, I’m all for not allowing the posted code, even if it did produce the correct result. I think it is better to force the correct use of the ternary than allow incorrect use.


It is true that a lot of the challenges are using regex for testing and as such the solutions are not very flexible, which is somewhat unfortunate.

@lasjorg I appreciate your opinion.
I wonder if given the constrains of validation and the actual intention to teach or promote certain learning, we should not be more mindful on how we craft the requirement statements and how normal human ambiguous expressions can affect that which we are trying to teach. I mean a simple indication of the expected format at times could accelerate real learning and reduce time guessing and uncertainty that you get it. It is just a thought, but I do not want to hijack the OP thread.

If you have feedback you can always open an issue on github

@raven1177 I hope you got the answer to why the code isn’t passing.


@anon28508191

I would agree that when teaching or “promoting” specific syntax, as opposed to just testing the outcome, the challenge should make an effort to guide the camper.

I don’t think this test was written with that in mind. I think it is using a regex for the tests and it just doesn’t account for all valid code.

We usually prefer all valid code to pass but if/when we do enforce specific syntax, that should be part of the challenge text and hints.

In this case, I would prefer we enforced the “correct” syntax and guided the camper properly.

created an issue for it here