Spam Filter Solution

This is a solution to the Learn Regular Expressions by Building a Spam Filter challenge on FreeCodeCamp. This challenge focuses on using regular expressions to identify spam messages.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Enter a message and check if it is considered spam.
• The spam detection is based on several patterns defined using regular expressions.

Screenshot

Links

• Live Site URL: Live Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• JavaScript (ES6)
• Regular Expressions

What I learned

Working on this project enhanced my understanding of:

• Regular Expressions: How to use regex to identify patterns in text and match specific spam indicators.
• JavaScript Event Handling: Handling user interactions such as button clicks and processing form inputs.
• DOM Manipulation: Updating the content of the page based on user input and the results of regex tests.

Code snippets I’m proud of:

const denyList = [helpRegex, dollarRegex, freeRegex, stockRegex, dearRegex];

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

.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));
}

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

Continued development

In future projects, I aim to:

• Expand Spam Filters: Add more sophisticated patterns and machine learning techniques for spam detection.
• Improve UI/UX: Enhance user feedback mechanisms and interface elements.
• Explore Additional Regex Patterns: Implement more complex and varied regex patterns for different types of spam.

Useful resources

• MDN Web Docs - Regular Expressions - Essential for understanding regex syntax and usage.
• Regex101 - Regex Testing Tool - Useful for testing and debugging regular expressions.
• JavaScript.info - Event Handling - Great resource for learning about event handling in JavaScript.

Author

• LinkedIn - Yashi Singh

Acknowledgments

A special thank you to FreeCodeCamp for providing this engaging challenge. It was a valuable opportunity to practice JavaScript and regex. Thanks to the community for their support and feedback, and to MDN Web Docs for their comprehensive documentation and tutorials.