Learn Regular Expressions by Building a Spam Filter - Step 12

JavaScript
1

Tell us what’s happening:

I need help with this challenge please

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 = (msg) => helpRegex.test(msg.some((regex) => true));

/* 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/120.0.0.0 Safari/537.36

Challenge Information:

Learn Regular Expressions by Building a Spam Filter - Step 12

2

What sort of help do you need? We can’t help you until you tell us what you’re having difficulty with.

1 Like
3

why is the code not running ? The test says i should use arrow syntax for the .some method which i’ve already done so i don’t know whats wrong with the code

4

Your goal in the challenge is to test if the variable msg matches any of the regular expressions stored in the denyList array.

Additionally here’s more information about the some method that exists on array objects.

If you need any further clarification, let me know.

1 Like
5

Hmm Sir this link isn’t helpful in the slightest please if you want to help use my code to point me in the right direction. Thank you

1 Like
6

If i follow the example in the link this is what i can come up with

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

and this has nothing to do with the challenge question which is saying i should use arrow syntax

1 Like
7

or this ?

const isSpam = (msg) => helpRegex.test(msg);
 console.log(denyList.some((msg) => regex)
8

Console logging the result doesn’t store it anywhere.

You’re looking to use the some method on your denyList inside of your isSpam arrow function

9

Is this close ?

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

That’s not a valid callback for test.

You should use some to test every Regex in the denyList

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

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

Nope. Let’s not guess things here. Experiments are good, but they should be backed by some reason why

Back up. What does the same method do?

1 Like
13

It is a bit confusing.

denyList is an array of regular expressions. You call some on that array.

Inside the some callback you now have access to each regular expression from that array.

Name the some callback parameter regex and call test on each of the regular expressions, passing msg to test.

16 Likes
14

is it something like this??

const isSpam = (msg) => helpRegex.test((msg) => denyList.some('regex', msg.test()));
15

Nope. The Regex test goes inside of the callback to some

16 
const isSpam = (msg) => helpRegex.test((msg) => denyList.some(() => regex, msg.test()));
17 
const isSpam = (msg) => helpRegex.test((msg) => denyList.some((regex) => regex.test(msg)));
18

Nope. Please stop just guessing.

Your use of some is inside of the call to test. I really do mean that it cannot be there.

Review what some does. You need to use it to check if any Regex in the denyList reports a bad message

19

This one looks closer. Does it work? It helps if you talk to us when posting code :slight_smile:

20

it doesn’t work ill try what you said and post an update