Learn Regular Expressions by Building a Spam Filter - Step 12

Tell us what’s happening:

please i’m stuck here , they said i should use .some() on the array but i tried but it’s not going through.

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 helpRegex = /please help|assist me/i;

const denyList = [helpRegex];


// User Editable Region

const isSpam = denyList.some((msg) => helpRegex.test(msg));

// User Editable Region


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

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

Your browser information:

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

Challenge Information:

Learn Regular Expressions by Building a Spam Filter - Step 12

1 Like

Hello @igweeo94!

This step is a bit tricky, but the step states to use regex as the callback parameter as below:

Use regex as the parameter for the callback function, for clarity.

Your code uses a msg parameter,

Breaking this step down in simpler terms:

  • you have a message;
  • you need to know if some part of the message is considered spam;
  • the message needs to be compared against the list of criteria;
  • each item in the denyList should be tested against your message;
  • if any test comes out true, the message needs to be flagged;

You have declared an arrow function named isSpam, but it is missing the parameter. Arrow functions are written like this:

const name = (parameter) => {function body};

You want to know if a message is spam so the first parameter should be msg - (Note: msg isn’t defined anywhere else in your code. It doesn’t need to be either.)

Does this help?

Keep up the good progress!

Happy Coding! :slightly_smiling_face:

2 Likes

Your use of .some() is correct, but you’re meant to keep isSpam as a function that you can call. Reset the lesson, and leave it as a function, calling .some() inside of it.

2 Likes

const isSpam = (regex) => denyList.some();

it’s still not working.

from here, you need to add the callback to some, the function that some has to check for each message

const isSpam = (regex) => denyList.some(regex);

i have pass msg and it’s still not working.

Array.some() requires a callback function as the argument. You passed a callback function in the correct format here:

denyList.some((msg) => helpRegex.test(msg))

Update this code so that it checks if testing your msg on any of your denyList regular expressions returns true .

Learn more about array.some and see examples here.

1 Like

please i am still drown here .
const isSpam = (regex) => denyList.some();
and this what they say : Your isSpam function should implicitly return the result of denyList.some() . yet i’m not passing it

you need to use a different parameter name, is it mentioned anywhere what that is?

in have used “helpRegex” as the parameter but it’s not working

if you use that you can’t reference the one outside the function

the starting code is

const isSpam = (msg) => helpRegex.test(msg);

you still need to have msg as parameter

thank you guys i passed it but i think clear tips should be given to people that are drown in any particular level the tips i got was not related to the solution of the challenge.
const isSpam = (msg) => denyList.some((regex)=> regex.test(msg));

Hello again, @igweeo94!

It’s really good news that you got your code to pass. You will now be an expert in arrow function syntax!

It is a tricky challenge, but all the suggestions above from three different community members should have been ample to get you round your difficulties. Everyone learns differently and the point of the challenges is to learn by understanding the code one writes and consequently passing the tests for a particular step.

In this particular case, you might have benefitted by returning to the beginning of the challenge (i.e. step one) to really cement the ideas presented. Since each step should take two minutes to read you will only have about 20minutes ( from step 11) to review. That is only my suggestion to you in the spirit of helping should you encounter similar difficulties in the future.

We want you to succeed. You try. We try.

Keep up the good work.

1 Like