Karissa, being a sweetie, brought me a Lavender Oatmilk Latte. Last Monday, Starbucks got my order wrong, so Karissa brought me the right drink. 🙂

I spent significant time coding today, and it was a challenging experience. I found myself feeling out of sorts and somewhat frustrated. However, exploring regex codes was an enjoyable part of the process. It reminded me of working with Linux, which I miss using. Interestingly, Apple has some similarities to Linux. Although, that is just my personal belief.

Tommy, who is becoming quite the griddle master, made some fried rice, veggies, and chicken last night on the griddle. It was great! I love the fried rice and the Teriyaki sauce. Karissa is eager for him to try pan-fried noodles. I told her to look up a recipe. Alex wants chicken and broccoli on the griddle.

As for me, I got my exercise in by riding the bike and doing some yoga. While we used to use Peloton for our workouts, we’ve been trying out Apple Fitness lately. Overall, it is similar. The only noticeable difference is the lack of a community feature, which I never utilized. I don’t know if Apple Fitness keeps tracking of our progress, but I’ll look into it. Tonight, I believe we are doing weights.

Mentally, I feel good today. I’m having trouble elaborating on that, but I feel content. The weekend is practically here, and it will be nice to have some downtime.

JavaScript notes…
——————————
Spam Filter steps 1 – 15

Step 1
To begin the project, use the .getElementById() method to retrieve the #message-input, #result, and #check-message-btn elements from the HTML document, and assign them to the variables messageInput, result, and checkMessageButton, respectively.

const messageInput = document.getElementById('message-input');
const result = document.getElementById('result');
const checkMessageButton = document.getElementById('check-message-btn');

Step 2
Attach an event listener to your checkMessageButton, listening for the click event. Give it an empty callback function.

checkMessageButton.addEventListener("click", () => {});

Step 3
If the messageInput is empty, display an alert to the user with the message Please enter a message..

Then, exit the function execution.

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

Step 4
Create an isSpam function using the const keyword and arrow syntax. The function should take a single parameter msg and implicitly return false for now.

const isSpam = (msg) => false;

Step 5
Back in your event listener, you need to update the text of the result element. You can use a ternary operator to achieve this task.

Here is an example of assigning the result of a ternary operator to an element’s text content:

el.textContent = condition ? “Use this text if the condition is true” : “Use this text if the condition is false”;
After the if statement, use a ternary operator to check the truthiness of calling isSpam() with messageInput.value as the argument. If true, set the textContent property on the result element to Oh no! This looks like a spam message.. Otherwise, set it to This message does not seem to contain any spam.

Then set the messageInput element’s value property to an empty string.

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

Step 6
Your first regular expression will be used to catch help requests. Declare a helpRegex variable, and assign it a regular expression that matches the string please help.

As a refresher, here is a regular expression to match the string hello world:

const regex = /hello world/;

const helpRegex = /please help/;

Step 7
Regular expressions can take flags to modify their behavior. For instance, the i flag can be used to make the expression ignore case, causing it to match hello, HELLO, and Hello for the expression /hello/.

Flags are added after the trailing backslash. Add the i flag to your helpRegex.

const helpRegex = /please help/i;

Step 8
Strings have a .match() method, which accepts a regular expression as an argument and determines if the string matches that expression.

Update your isSpam() function to implicitly return the result of calling the .match() method on msg, passing helpRegex as the argument.

Then, try entering some messages on your page and see the result.

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

Step 9
Instead of using the .match() method, you can use the .test() method of a regular expression to test if a string matches the pattern. Unlike .match(), .test() returns a boolean value indicating whether or not the string matches the pattern.

Update your isSpam() function to use the .test() method of helpRegex to test if msg is a match.

Then, try entering some messages on your page and see the result.

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

Step 10
The alternate sequence | can be used to match either the text on the left or the text on the right of the |. For example, the regular expression /yes|no/ will match either yes or no.

Update your helpRegex to match either please help or assist me.

const helpRegex = /please help|assist me/i;

Step 11
Before you start creating additional regular expressions, you need to update your application to check more than one regular expression.

Start by declaring a denyList variable. Assign it an array containing your helpRegex.

const denyList = [helpRegex];

Step 12
Remember that arrays have a .some() method. Use the .some() method to check if testing your msg on any of your denyList regular expressions returns true.

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

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

Step 13
The next regular expression you will work on is one that matches mentions of dollar amounts.

Start by declaring a dollarRegex variable, and assign it a case-insensitive regular expression that matches the text dollars.

const dollarRegex = /dollars/i;

Step 14
Add your dollarRegex to the denyList array so that you can test the regular expression.

Then try entering a message in your app.

const denyList = [helpRegex, dollarRegex];

Step 15
You need to match a number before the text dollars. While you could write out 0|1|2 and so on, regular expressions have a feature that makes this easier.

A character class is defined by square brackets, and matches any character within the brackets. For example, [aeiou] matches any character in the list aeiou. You can also define a range of characters to match using a hyphen. For example, [a-z] matches any character from a to z.

Add a character class to match the digits 0 through 9 to your dollarRegex expression – remember the digit must come before the word dollars, and there should be a space between the digit and the word.

const dollarRegex = /[0-9] dollars/i;