DEV Community: Okure U. Edet Kingsley🧑‍💻🚀

CRUD operations with mongoose models: a step-by-step guide

Okure U. Edet Kingsley🧑‍💻🚀 — Thu, 31 Aug 2023 11:08:01 +0000

Introduction
What are CRUD operations?
Setting up MongoDB
Defining a mongoose model
CRUD operations with Mongoose models
Conclusion

Introduction

Recently, I started learning how to use MongoDB and I was hit with bugs when setting up MongoDB especially when it came to performing CRUD(create, read, update and delete) operations with Mongoose models. I was finally able to do so. I wrote this article to guide developers and those new to MongoDB on performing CRUD operations with Mongoose models. By the end of this article, you will be able to set up MongoDB, create a mongoose model and perform CRUD operations with the model. In short, this article will get you started on performing your own CRUD operations with Mongoose models.

What are CRUD operations?

CRUD stands for create, read, update and delete. Most software applications utilize some form of CRUD functionality. In MongoDB, data retrieved from a user is stored in a collection as a document. These documents can then be read, updated and even deleted. In this article, you will understand how these operations work in the context of a form.

Setting up MongoDB

Open your Chrome browser or any browser you currently use and navigate to this website: https://www.mongodb.com/. Hover over the Products link and click on community server. Select the platform you want to download MongoDB to. It may be Windows x64 or macOS x64. Once you are done with downloading and installing MongoDB, do not forget to download MongoDB compass.

Create a new directory for this project and run the following command in the terminal:

npm init -y

This command will initialise a new node.js project. Once it is done, you should see a package.json file in your project directory.

After installing MongoDB and Mongo compass, go ahead and install mongoose:

npm install mongoose

Creating a server

The server will be created using Express. So go ahead and install Express:

npm install express

Inside your directory, create an index.js file. You can use a code editor to do this. Inside this file, add the following code:

const express = require('express')

const app = express();

app.listen(3000, function () {
  console.log("App listening on port 3000...");
});

The above code imports express, stores it into an app variable and then starts the server at port 3000. You can of course use another port.

Connecting to MongoDB from node

Inside the index.js file, add the following code:

const mongoose = require('mongoose')

mongoose.connect("mongodb://localhost:27017/db", { useNewUrlParser: true });

Mongoose is imported and used to establish a connection with the MongoDB database. The mongoose.connect method takes in a parameter and a database name. The name of the database we want to connect to is db. if this database does not exist, one will be created for us.

Defining a mongoose model

Inside your project directory, create another directory or folder called models. A model encloses a mongoose schema. A Mongoose schema is similar to a blueprint that defines the essential properties of a document. Inside this directory, create a file called User.js and add the following code:

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const UserSchema = new Schema({
  username: String,
  email: String,
});

const User = mongoose.model("User", UserSchema);

module.exports = User;

A schema is created using the mongoose.Schema method. A schema of a document in a collection will look like. Once that is done, we access the database through the mongoose.model method. This method accepts a model name and the schema. Mongoose automatically creates a plural version of the model name. In our case, it will be Users instead of User as specified.

CRUD operations with Mongoose models

By now, you must have established a connection with MongoDB using mongoose. It is now time to illustrate CRUD(create, read, update and delete) operations using Mongoose.
In your root folder, create an example.js file and add the following code:

const mongoose = require("mongoose");
const User = require("./models/User");

mongoose.connect("mongodb://127.0.0.1:27017/db", { useNewUrlParser: true });

User.create({
  username: "Kingsley",
  email: "kingsley@gmail.com",
})
  .then(function (user) {
    console.log(user);
  })
  .catch(function (error) {
    console.log(error);
  });

The User model is first imported. Then a connection with MongoDB is established. Once that is done, we then use a method in the User model called create. This method allows us to create a new document in line with our schema. We log the User object to the console. To see if our code is working, open your terminal and execute example.js:

$ node example.js

It should show something like this

{
  username: 'Kingsley',
  email: 'kingsley@gmail.com',
  _id: new ObjectId("64ef25aeaf83ce8e4d4fd786"),
  __v: 0
}

It is important to note that every document in MongoDB has a unique _id as you can see in the _id property.

You can see the data created for you in MongoDB compass. Just open it up. It will look something like this:

Reading data from MongoDB

If you want to retrieve one document in the User collection, use the .findOne() method. This method accepts two parameters: specification and projection. The former specifies the criteria used to find the documents. The latter determines which fields are returned.
For example:

User.findOne({ email: "kingsley@gmail.com" }, { username: 1 })
  .then((user) => {
    console.log(user);
  })
  .catch((err) => {
    console.log(err);
  });

$ node example.js
{ _id: new ObjectId("64ef7f38d29a236158c77b62"), username: 'Kingsley' }

Documents with the email kingsley@gmail.com are found and the username is returned.

You can also use the .find() method.

User.find()
  .then((user) => {
    console.log(user);
  })
  .catch((err) => {
    console.log(err);
  });

$ node example.js
[
  {
    _id: new ObjectId("64ef7f38d29a236158c77b62"),
    username: 'Kingsley',
    email: 'kingsley@gmail.com',
    __v: 0
  }
]

This finds all the documents in the User collection.

User.find({ username: /K/ })
  .then((user) => {
    console.log(user);
  })
  .catch((err) => {
    console.log(err);
  });

$ node example.js
[
  {
    _id: new ObjectId("64ef7f38d29a236158c77b62"),
    username: 'Kingsley',
    email: 'kingsley@gmail.com',
    __v: 0
  }
]

This finds all the documents that begin with K. Note that we used the //. It is similar to how it is used in a regular expression.

You can use the .findById() method:

const id = "64ef7f38d29a236158c77b62";
User.findById(id)
  .then((user) => {
    console.log(user);
  })
  .catch((err) => {
    console.log(err);
  });

$ node example.js
{
  _id: new ObjectId("64ef7f38d29a236158c77b62"),
  username: 'Kingsley',
  email: 'kingsley@gmail.com',
  __v: 0
}

This finds a document by its unique ID.
To get a full appraisal of methods that can be used to find a document, visit: https://www.mongodb.com/docs/manual/tutorial/query-documents/.

Updating data in MongoDB

To update a document in MongoDB is quite simple. You can use the .findByIdAndUpdate() method:

const id = "64ef7f38d29a236158c77b62";
User.findByIdAndUpdate(id, { email: "kingsleyokgeorge@gmail.com" })
  .then((user) => {
    console.log(user);
  })
  .catch((err) => {
    console.log(err);
  });

$ node example.js
{
  _id: new ObjectId("64ef7f38d29a236158c77b62"),
  username: 'Kingsley',
  email: 'kingsleyokgeorge@gmail.com',
  __v: 0
}

The email was updated to kingsleyokgeorge@gmail.com. Try it and see!

Deleting data from MongoDB

const id = "64ef7f38d29a236158c77b62";
User.findByIdAndDelete(id)
  .then((user) => {
    if (!user) {
      console.log("Deleted!");
    }
  })
  .catch((err) => {
    console.log(err);
  });

$ node example.js
Deleted!

If you check MongoDB compass, you will discover that there is no document in the User collection. It has been deleted.

Conclusion

Throughout this article, you have learned how to perform and simulate CRUD operations with Mongoose models. You have learned how to create, read, update and delete documents from a collection. You can apply what you have learned in this article to your side projects. For more information on Mongoose models and CRUD operations, refer to the docs: https://www.mongodb.com/docs/manual/crud/

UNDERSTANDING THE ASYNCHRONOUS NATURE OF NODE.JS

Okure U. Edet Kingsley🧑‍💻🚀 — Thu, 17 Aug 2023 07:11:07 +0000

Prerequisite

This article provides a clear understanding of asynchronous code in node.js. The reader should have a basic knowledge of JavaScript.

Table of Content

Introduction
Brief overview of node.js
What is asynchronous programming?
Blocking and non-blocking code in node.js
Event loop in node.js
Thread pool
Conclusion

Introduction

Node.js is a very powerful runtime environment that can be used to build performant and scalable web applications. Though it is single-threaded, it can perform asynchronous operations with the use of asynchronous code. Node.js then executes such code using the event loop which is at the heart of asynchronous programming in node.js. By the end of this article, you will understand what asynchronous programming means in node.js, blocking and non-blocking code, event loop and thread pool. Let us begin!

Brief overview of node.js

JavaScript code can be executed outside the browser using node.js. But what is node.js? Node.js is an asynchronous, event-driven JavaScript runtime environment. It is built on Google's V8 JavaScript engine. The V8 engine is open source. Using JavaScript outside the browser with the aid of node.js allows JavaScript to do things it could not previously do such as better networking capabilities or accessing a file system. With the power of node.js, JavaScript can now be used on the server side of web development to build performant and highly scalable network applications. One characteristic of node.js is that it is single-threaded and based on an event-driven, non-blocking model. This model ensures that node.js is efficient for building scalable web applications. Now you may be pondering what it means for node.js to be single-threaded. Well, a single-threaded process is when a sequence of code is executed one after another.
For example:

// index.js
const greeting = "Hello";
const firstName = "Kingsley";

const sentence = `${greeting}, my name is ${firstName}`;
console.log(sentence);

$ node index.js
Hello, my name is Kingsley

In a single-threaded environment, the code above will be executed line by line. It is immaterial if one line of the code takes a very long time to be executed. If this is the case, then this line will block the rest of the code. This can cause an application to slow down especially when there are many users. Thankfully, in node.js, there is a solution to this problem. It is called the event loop. The event loop allows node.js to perform asynchronous, non-blocking I/O operations. It does this by moving aside operations that require a longer time to execute. This article will examine asynchronous I/O non-blocking code and how node.js implements it.

What is asynchronous programming?

To examine how node.js implements asynchronous code, it is essential to understand what asynchronous programming is and why developers may sometimes need it.
Asynchronous programming according to the MDN Docs(https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing) is defined "as a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished. Once that task has finished, your program is presented with the result". This means that a process on your system is running in parallel with other processes. One of the benefits of asynchronous programming is that it allows various tasks to be handled almost simultaneously thereby ensuring a faster application. In node.js, asynchronous I/O non-blocking code is used to perform more or less heavy tasks. I/O means input and output. Asynchronous code is said to be non-blocking code while synchronous code is said to be blocking code. Let's examine what blocking and non-blocking code mean in the context of asynchronous programming in node.js.

Blocking and non-blocking code

Node.js has synchronous blocking code and asynchronous non-blocking code. Synchronous code is described as blocking code since each code is executed line by line. This then means that if one line of code takes a longer time to process, all other code will be 'blocked' from execution.

Take a look at the synchronous code below:

// index.js

console.log("------------Synchronous code-----------");
const textIn = fs.readFileSync("./txt/input.txt", "utf-8");
const textOut = `This is what we know about node.js: ${textIn}.\nCreated on ${Date.now()}`;
fs.writeFileSync("./txt/output.txt", textOut);
console.log(textOut);
console.log("File written");

Output:

$ node index.js
------------Synchronous code-----------
This is what we know about node.js: Node.js is an asynchronous, event-driven JavaScript runtime designed to build scalable network applications.
Created on 1691915393994
File written

The code above will be executed line by line. It reads a file synchronously and logs it to the console. Now, this may be okay when dealing with a small application that in turn has a small number of users. However, it becomes a problem when dealing with a large number of users who want to access your application all at the same time. The solution to this problem is to always use non-blocking code. Asynchronous non-blocking code is a very essential part of the node.js architecture. It enables us to perform heavy operations without blocking the rest of the code.

For example:
reading a file using asynchronous non-blocking code.

// index.js

fs.readFile("./txt/input.txt", "utf-8", function (err, fileContent) {
  if (err) {
    console.log("ERROR!");
  } else {
    console.log(fileContent);
  }
});

console.log("----------Asynchronous code-----------");

$ node index.js
----------Asynchronous code-----------
Node.js is an asynchronous, event-driven JavaScript runtime designed to build scalable network applications.

If you take a look at the above code, you may have guessed the order in which the code will be executed. Node.js first starts reading the file in the background and then moves on to the next line of code. It then prints ----------Asynchronous code----------- to the console. After the file has been read, it will then execute the callback function and log the file to the console. Unlike synchronous blocking code, asynchronous non-blocking code like the one shown above does not block other codes in the program from executing. It relegates the line of code that may take time to process to the background.
Thus node.js eliminates the blocking of code through the use of asynchronous non-blocking I/O model.

Event loop in node.js

The event loop is the core innovation of node.js. The execution of asynchronous I/O operation is made possible by the event loop. The event loop runs in the single thread provided by node.js. This means that blocking the event loop will result in the blocking of the entire thread. The event loop automatically commences when a process begins and ends when there is no longer any callbacks to be processed. The event loop delegates intensive operations to the thread pool which is part of the libuv library. It manages these operations and notifies the event loop when the operations are ready to be executed. More on thread pool later.
According to the node documentation, the event loop has six phases: timers, pending I/O call backs, waiting/idle phase, I/O polling, setImmediate() callbacks and close callbacks. These six phases create one loop usually referred to as a tick.
These phases will be examined below.

Timers

Timers in node.js are used to schedule the execution of a block of code after a particular time, usually in milliseconds has passed. JavaScript provides two main asynchronous timers: setTimeout() and setInterval(). These functions are contained in a timers module provided to node.js. These timers take in a callback and delay the execution of the callback until the passing of a specified time in milliseconds. Both of these global functions are executed by the event loop. At the beginning of the timer phase, the event loop updates its time and checks a queue of timers. The event loop will select the timer with the shortest delay time and then compare it with the event loop's time. If the wait time has elapsed, it will execute the callback once the call stack is empty. It is important to note that timers may execute later than the time specified. This may be because the call stack is not emptied for the timer in question to be called. Also, a while loop may obstruct the execution of a timer.
For example:

// index.js

let time = false;
setTimeout(function () {
  console.log("Timer 1");
}, 1000);

while (time === false) {
  console.log("waiting for a second...");
}

$ node index.js
waiting for a second...
waiting for a second...
waiting for a second...

In the above example, the while loop blocks the event loop from running. This is possible because node.js is single threaded and blocking the event loop is synonymous to blocking all other code from execution.
As you have seen earlier, there are two types of timer provided by the timer module: setTimeout() and setInterval(). The difference is that the setInterval() is used to execute a function periodically or after a particular interval. In this case, the setInterval() is placed back into the queue to be executed again and again.
For example:

// index.js

setInterval(function () {
  console.log("Interval 1");
}, 1000);

$ node index.js
Interval 1
Interval 1
Interval 1

In the above example, the call back function is executed every second. Thus, this timer schedules the repeated execution of call back after a specified millisecond.

I/O call backs

This is the pending call back phase. In this phase of the event loop, the asynchronous non-blocking I/O model becomes crucial.
Here's an example:

// index.js

const fs = require("fs"); // file system

fs.readFile("./txt/input.txt", "utf-8", function (err, fileContent) {
  if (err) {
    console.log(err);
  } else {
    console.log(`Here is the file content: ${fileContent}`);
  }
});

console.log("Asynchronous non-blocking I/O model");
console.log("");

$ node index.js
Asynchronous non-blocking I/O model

Here is the file content: Node.js is an asynchronous, event-driven JavaScript runtime designed to build scalable network applications.

The fs.readFile() is an asynchronous code. While node.js attempts to read a file from the OS, this operation does not block the execution of other code in the application.

Waiting/Idle phase

In this phase, the event loop performs the internal operations of the call backs. This phase is used for gathering information on what needs to be executed during the next tick of the event loop. No code needs to be executed during this phase.

I/O polling phase

According to the node documentation(https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick), the poll phase has two main function: "calculating how long it should block and poll for I/O and processing events in the poll queue". In this phase, the event loop manages the I/O work load and executes the call backs synchronously after iterating through the queue of callbacks. If the poll queue is empty, it will move on to the check phase to execute the setImmediate() function. If no scripts have been scheduled by the setImmediate() function, the event loop will wait for callbacks to be added to the poll queue and then execute them immediately. If the event loop is empty, it will check for timers that have not been executed and if there are, it will double back to the timer phase to execute the timer callbacks.

setImmediate()/check phase

The setImmediate() is usually executed after the poll phase. It runs as soon as the poll queue is empty. If the setImmediate() is within an I/O cycle, it will be executed before any timers.

// index.js

const fs = require("fs"); // file system

fs.readFile(__filename, () => {
  setTimeout(() => {
    console.log("Timer 1");
  }, 0);

  setTimeout(function () {
    console.log("Timer 2");
  }, 100);

  setImmediate(() => {
    console.log("immediate");
  });
});

$ node index.js
immediate
Timer 1
Timer 2

The setImmediate() and the timer functions are within an I/O callback and so the setImmediate() will always be executed before the setTimeout().

Close callbacks

In this phase, the callbacks of all close events are executed. For example the process.exit() method. Or where a socket or handle is closed i.e socket.destroy().

To recap, when a node process begins to run, the event loop kicks off. It starts with the timer phase and executes the timers with the least delay time, then it moves on to I/O callbacks, then it does some internal processing, after this phase, it then moves on to execute callbacks on the poll queue. This is done synchronously. The event loop then executes setImediate() and finally it executes close callbacks. It repeats this loop/tick until there are no more callbacks to execute. At this point, it is essential to note that there are some tasks that are too heavy to be executed by the event loop. And that is where the thread pool comes into play.

Thread pool

The thread pool is another fundamental part of the node.js architecture. The libuv library provides us with the thread pool. The thread pool provides four additional threads that are completely separate from the main single thread. The thread pool can be configured up to one hundred and twenty eight threads. However, most of the time, these four threads are enough. When the event loop encounters heavy tasks, these tasks are then automatically delegated to the thread pool. Tasks like operations dealing with files, compression related functions, DNS lookups and so on are usually delegated to the thread pool. The reason these tasks are delegated to the thread pool is so as to avoid prevent them from blocking the event loop.

Conclusion

In summary, the asynchronous I/O model is a fundamental part of how node.js handles relatively heavy tasks. This article has laid down the basic idea of how asynchronous programming works in node.js using the event loop and the thread pool. Both of these are provided for by the libuv library which is written in C++. This whole architecture helps you as a developer to build performant and scalable web applications.

HOW TO VALIDATE A SIMPLE FORM USING REGULAR EXPRESSIONS(REGEX) IN JAVASCRIPT

Okure U. Edet Kingsley🧑‍💻🚀 — Fri, 04 Aug 2023 06:32:37 +0000

Prerequisite

This article aims to show the reader how to validate a simple form using regular expressions(regex) in JavaScript. To understand the contents of this article, the reader must have basic knowledge of HTML, CSS and JavaScript.

Table of Content

Introduction
What is a regular expression?
How to create regular expressions(regex) in JavaScript
Common regex patterns
Building a form
Validating the username
Validating the password
Conclusion

Introduction

As a developer, when building HTML forms, you may want to ensure that the value the user inputs into the form matches your preferred pattern. For example, a form may contain a field for the user to input a password. You may want the password to contain only lowercase letters, and numbers but no hyphens. You can create a pattern and then test it against the value inputted by the user. The easiest way to do this is to use matching patterns known as regular expressions(regex). By the end of this article, you will understand what regular expressions are, their syntax and how to use them by building a login form and validating the input fields with regular expressions.

What are regular expressions(regex)?

Regular expressions in JavaScript are sequences of characters used to create patterns. These matching patterns are then tested against a combination of characters in a string. For example, regex patterns can be used to check strings like emails or passwords to determine if their character combinations match the regex patterns defined. Regular expressions are objects. This means that they inevitably have methods. Regular expressions are not unique to JavaScript, they form part of other programming languages like Python and Java.

How to create regular expressions in JavaScript

There are two ways of creating regular expressions in JavaScript. They can be created using a constructor function or by using forward slashes (/).

Regular expression constructor Syntax: new RegExp(pattern, flag)

Example



const str = 'JavaScript'
const regex = new RegExp('s' 'i');
console.log(regex.test(str)); // true

The above example tests whether the regex pattern s with a flag of i which means case insensitive matches any character in the string inside the str variable. The test() method returns a boolean true because there is a match.

Regular expression literal Syntax: /pattern/flag ```

const text = "JavaScript";
const regPattern = /[a-z\d]/i;

console.log(regPattern.test(text));

The `regPattern` variable has a pattern that tests for letters from a to z as well as any numbers. It also has a flag of `i` which means case insensitive.

### Common regex patterns
Here are common regular expression(regex) patterns:

- **Telephone number validation pattern**
Regex pattern:

/^\d{11}$/

or

/^[0-9]{11}$/

The pattern above matches any number from 0-9 at the beginning of the input and the end of the input. The pattern is also specified to be eleven numbers long.
The `^` and `$` characters are known as an *assertion*. The former is used to signify the beginning of an input and the latter is used to match the end of an input.

- **Username validation pattern**
Regex pattern:

/^[a-z\d]{5,12}$/i

The pattern above matches any case-insensitive letter from a-z and any number from 0-9. The pattern is also specified to be between five and twelve characters long. The `i` character is a flag. The flag means that the letters should be case-insensitive.

- **Password validation pattern**
Regex pattern:

/^[\w@-]{8,20}$/

The pattern above matches any letter which is case insensitive, any number from 0-9, an underscore, an @ symbol or a hyphen. The pattern is specified to be between 8 and 20 characters long. The `\w` character simply means any capital or small letter, any number and an underscore.

The above patterns can be modified depending on what you want. If you want to delve deeper into regex patterns and syntax, you can check out the MDN docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions

### Building the form
- **Setting up**
Open your Integrated Development Environment(IDE). Ideally, you should have VS code installed. Open a new folder and give it whatever name you want. After doing that, create a new file, an index.html file and a style.css file. if you are familiar with using tailwindcss, then install it. For information on how to install tailwindcss in your IDE, visit the tailwind docs: https://tailwindcss.com/docs/installation.
For this tutorial, I will be using tailwindcss since it is faster and easier to use.

 - **The HTML code**
After setting up, your HTML code will look something like this(of course you can write your HTML anyhow you like):

<!DOCTYPE html>

Document

Login Form

Login Form

Username

username valid!

type="text"
name="username"
id="username"
placeholder="username"
/>

username invalid

Password

password valid!

type="password"
name="password"
id="password"
placeholder="password"
/>

password invalid!


Output:


![HTML Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3titze759bh3s1yzxxt.png)

If you are using tailwindcss, you can take advantage of the plugin for forms. Open a terminal in your VS code and install the plugin form:

npm install -D @tailwindcss/forms

After doing that, add the plugin to your `tailwind.config.js` file:

// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/forms'),
],
}

- **Adding CSS to the HTML**

<!DOCTYPE html>

TECHNICAL WRITING

class="grid sm:border-2 justify-center px-6 pb-20 pt-10 bg-gray-100 sm:bg-white sm:px-10 sm:rounded-md sm:shadow-md"
>

Login Form

class="sm:grid sm:justify-center sm:mb-10 hidden font-bold text-lg"
>

Login Form

Username

username valid!

            <input
              type="text"
              name="username"
              id="username"
              placeholder="username"
              class="form-input px-4 py-3 rounded-md bg-gray-300"
            />
            <p class="text-red-700 hidden" id="userfeed1">
              username invalid
            </p>
          </div>
          <div class="py-2 grid" id="Pword">
            <label class="text-lg font-semibold">Password</label>
            <p class="text-blue-500 hidden" id="passwordfeed">
              password valid!
            </p>
            <input
              type="password"
              name="password"
              id="password"
              placeholder="password"
              class="form-input px-4 py-3 rounded-md bg-gray-300"
            />
            <p class="text-red-500 hidden" id="passwordfeed1">
              password invalid!
            </p>
          </div>
        </div>
        <div class="flex gap-8 mt-5">
          <div>
            <button
              class="border-2 bg-blue-600 text-white p-1 hover:bg-slate-600"
            >
              Sign In
            </button>
          </div>
          <div>
            <a href="#" class="text-blue-500 hover:text-blue-800"
              >Forgot Password?</a
            >
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</div>
<script src="index.js"></script>


The result will look like this:

![A login form with HTML AND CSS on PC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7wwv7l33g3qsyxwb34s.png)

or if you are using a mobile phone like this:

![A login form with HTML AND CSS on mobile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohbl5p5a160w5vu474vn.png)

### Validating the username with regex
Firstly, you will create an `index.js` file and inside the file, you will reference all the elements you will need:

"use script";

const form = document.querySelector("#form");
const username = document.querySelector("#username");
const password = document.querySelector("#password");
const userfeed = document.querySelector("#userfeed");
const userfeed1 = document.querySelector("#userfeed1");
const passwordfeed = document.querySelector("#passwordfeed");
const passwordfeed1 = document.querySelector("#passwordfeed1");

Then we will go ahead and create an object called `pattern`. This object will store the patterns for the username and password. We want the username to contain case-insensitive letters, and numbers and the username must be between 5-12 characters long.

const pattern = {
username: /^[a-z\d]{5,12}$/i,
};

Once that is done, we will go ahead and create a function that validates and checks if the input by the user matches the regex pattern that we want:

The function above takes in four parameters; `idvalid`, `idinvalid`, `field`, `fieldName`. The first two parameters refer to the `id` of elements that are hidden from the DOM. The `field` parameter refers to the element that has an `addEventListener()` function attached to it when an event is triggered. The `fieldName` parameter refers to the name of the element. This name is then used to access the name of the property that contains the pattern.
The function is all set but how do we know it is working? well, we attach an `addEventListener()` function to the input fields which will listen for a `keyup` event. The `validatingFunc()` will be called inside the `addEventListener()` function.

username.addEventListener("keyup", function (e) {
validatingFunc(userfeed, userfeed1, e.target, e.target.attributes.name.value);
});

When we were referencing the elements, we referenced elements with a tag name of `p`. These elements were hidden from the DOM but the `validatingFunc()` makes them visible depending on whether the pattern entered by the user is *username valid* or *username invalid*. Once you type into the username input field, a *username invalid* message appears as long as the pattern is not a match but once it is a match, a *username valid* message appears.


![A message of username invalid appears under the input field signifying that the pattern does not match the user's input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bkvm37l28j0psjlbl5x.png)

The above username is not a match because it is not at least 5 characters long. Under the input field, a message of _username invalid_ appears.


![A message of username valid appears above the input field signifying that the pattern matches the user's input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spswl3g1wsfe79akqusm.png)

The username matches the pattern and a message of username valid appears above the input field.

### Validating the password
You have created and tested a regex pattern for the username now it is time to do the same for the password. It is not difficult to do this once you have validated the username. All you need to do is create a pattern for the password and include it inside the `pattern` object.

const pattern = {
username: /^[a-z\d]{5,12}$/i,
password: /^[\w@-]{8,20}$/,
};

We want our password to contain letters that are case-insensitive, numbers, underscores, an @ symbol and a hyphen. The password must be between 8 and 20 characters long. The `\w` character signifies any letter, number or underscore. The letters are case insensitive.

After creating the regex pattern, we will attach an `addEventListener()` function to the password input field. We had earlier referenced this input field with the `id` name `password`. The `validatingFunc()` will be called inside the `addEventListener()` function.

password.addEventListener("keyup", function (e) {
validatingFunc(
passwordfeed,
passwordfeed1,
e.target,
e.target.attributes.name.value
);
});

Of course, after this is done, we want to make sure it works so we will input a value into the password input field.

![The password does not match the regex pattern](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vez3ufvn060h98u55myq.png)

The password we input does not match the regex pattern we created so the message *password invalid* appears below the input field.


![The password matches the regular pattern](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xg48ky8g4gzu3vgsx72.png)

The password matches the regex pattern we earlier created so the message *password valid* appears above the input field.

### Conclusion
In summary, this article has provided background knowledge on regular expressions in JavaScript, how they are created and common regex patterns. You have also learnt how to test and validate a simple login form using regex in JavaScript. If you want to learn more about regular expressions, you can visit the MDN docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions

How Event Propagation and Delegation Work in JavaScript

Okure U. Edet Kingsley🧑‍💻🚀 — Thu, 13 Jul 2023 06:08:00 +0000

Introduction
What are events?
Event propagation
The capturing phase of event propagation
The bubbling phase of event propagation
Event .stopPropagation method
Event delegation
How to use event delegation in JavaScript
Conclusion

Prerequisite

For the reader to understand this article, it is important to have at least a basic knowledge of HTML, CSS and JavaScript.

Introduction

In JavaScript, events travel to and fro the Document Object Model(Dom) tree. This is generally known as event propagation, which comes in two phases: capturing and bubbling. The fact that events pass through the parent element of the target element that triggered such events can then help you to decide where to handle these events. This is known as event delegation. In this article, you will learn how event propagation and delegation work in JavaScript and how to effectively use them to handle events on your page.

What are events?

JavaScript events are actions or occurrences that trigger certain behavior on a page. Developers can then listen for these events in JavaScript by attaching a function known as Event Listeners. Examples of events in JavaScript include; a click event, where a user clicks on an element in a web page; a submit event, in cases where a user submits a form, page loading; a keyboard event, where the user chooses a key on the keyboard. For more about events, see this https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Event propagation

Event propagation in JavaScript refers to how events travel the Document Object Model(DOM) tree. This behavior can be likened to an electric current traveling through the DOM tree once an event is triggered. Event propagation has two phases; capturing and bubbling.

The capturing phase of event propagation

When an event is triggered or fired, the window object gets notified of the event first and then followed by the document element as well as the subsequent parent elements of the target element. This process is known as event capturing.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="text/css" href="style.css" rel="stylesheet" />
    <title>TODO LIST</title>
  </head>
  <body class="bg-blue-200">
    <div class="ul">
      <ul class="list">
        <li>Read a book</li>
        <li>Finish writing my article</li>
      </ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

document.querySelector("li").addEventListener("click", function () {
  alert("My todo list!");
});

In the example above, the ul element is a parent element of the li element. The div element is also a parent element of the ul element. It continues like this to the top of the DOM tree and to the window object itself. When an event such as a click event is triggered on the li element, The window object is first alerted or notified of the event. Then it travels downward through each of the parent elements of the target element till it reaches the target element. After the target element has been notified of the event, then begins the second phase of event propagation, also known as event bubbling.

The bubbling phase of event propagation

Once the target element has been notified of the event, the event once again travels up to the root of the DOM tree. Just like in the capturing phase, the event passes through all of its parent elements. This process is known as event bubbling. So as an event ‘bubbles’ through its parent elements, it is as if the event was triggered in that very element. In the code above, once the li element has been alerted of the event, the event then travels upward through the ul element, the div element, passing through the parent elements back to the root of the DOM. Generally, events are always handled either at the target or bubbling phase. However, event listeners can be set up in a way that they listen to events in the capturing phase instead. It is important to note that not all events have a capturing and bubbling phase. Some events, like the focus event, are generated right at the target element and can only be handled there.

Event .stopPropagation() method

Throughout this article, you have seen how event capturing and bubbling work. However, there are times in your code when you may not want an event to bubble. In such cases, you can use the e.stopPropagation() method. This method prevents an event triggered in the target element from bubbling up the DOM tree.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TODO LIST</title>
    <style>
      body {
        background-color: violet;
      }
      .ul {
        border: 2px solid blue;
        border-radius: 5px;
        margin: auto;
        width: 50%;
        padding: 10px;
        margin-top: 70px;
      }
      ul {
        background: rgb(214, 230, 222);
        padding: 20px;
      }
      ul li {
        background: rgb(217, 230, 212);
        color: black;
        margin: 5px;
      }

      .list {
        background: rgb(21, 75, 75);
      }
    </style>
  </head>
  <body class="bg-blue-200">
    <div class="ul">
      <ul class="list">
        <li>Read a book</li>
        <li>Finish writing my article</li>
      </ul>
    </div>

    <script>
      // Target element
      document.querySelector("li").addEventListener("click", function () {
        alert("My todo list!");
      });

      // Parent element
      document.querySelector("ul").addEventListener("click", function () {
        this.style.background = "red";
      });
    </script>
  </body>
</html>

In the above code, an addEventListener() function is attached to the li element and its parent element ul. When the li element is clicked, the function attached to it executes before its parent function by event bubbling.

We can prevent this from happening by adding an e.stopPropagation() method. This will then prevent the event from propagating when the target element is clicked.

// Target element
      document.querySelector("li").addEventListener("click", function (e) {
        e.stopPropagation();
        alert("My todo list!");
      });

Event delegation

Event delegation is essentially the use of the knowledge that events bubble to instead handle events at any of the parent elements of the target element where the event was triggered. Events are said to be ‘delegated’ to a parent element of the target element so they can be handled right at that element.

How to use event delegation in JavaScript

When you want to use event delegation in your code, there are two things you need to do. Firstly, you add the event listener function to the parent element. After that is done, the next step is to figure out which element triggered the event. Event delegation has many benefits, one of which is to help improve the performance of your code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TODO LIST</title>
    <style>
      body {
        background-color: violet;
      }
      .ul {
        border: 2px solid blue;
        border-radius: 5px;
        margin: auto;
        width: 50%;
        padding: 10px;
        margin-top: 70px;
      }
      ul {
        background: rgb(214, 230, 222);
        padding: 20px;
      }
      ul li {
        background: rgb(217, 230, 212);
        color: black;
        margin: 5px;
      }

      .list {
        background: rgb(21, 75, 75);
      }
    </style>
  </head>
  <body class="bg-blue-200">
    <div class="ul">
      <ul class="list">
        <li class="l1 li">Read a book</li>
        <li class="l2 li">Finish writing my article</li>
        <li class="l3 li">Draft my resume</li>
      </ul>
    </div>

    <script>
      // Parent element
      document.querySelector("ul").addEventListener("click", function (e) {
        const target = e.target;
        if (target.classList.contains("li")) {
          target.style.background = "red";
        }
      });
    </script>
  </body>
</html>

In the code above, you will notice that an addEventListener() function has been added to the parent class of the li element. The target property of the event object has been accessed and stored into a target variable. This is then used to check if the target element contains a class of li. If that is true, the code in the if block executes anytime a target element is clicked.

Conclusion

In summary, this article has tried to shed more light on event propagation and delegation in JavaScript as well as how they work. While event propagation, with its two phases: capturing and bubbling, describe how events travel up and down the Document Object Model(DOM) tree when they are fired on the target element, event delegation is how you can use the knowledge that events travel through the DOM tree to handle events at any of the parent elements of the target element concerned. Moreover, you can decide to stop the propagation of events by using the e.stopPropagation() method.

Things Every Beginner Needs to Know About Objects In JavaScript

Okure U. Edet Kingsley🧑‍💻🚀 — Sat, 08 Jul 2023 07:30:09 +0000

Prerequisite
For the reader to understand the contents of this article, it is essential to
have an understanding of HTML, CSS, and basic JavaScript.

Table of Contents
• Introduction
• What are objects?
• Creating objects in JavaScript
• Accessing and modifying the property and value of objects in JavaScript
• Object method and the ‘this’ keyword
• When to use objects in our code
• conclusion

Introduction
Data types and data structures are common to all programming languages. In JavaScript, data types include; numbers, strings, Booleans, undefined, null, bigint, and symbols. Other data structures include objects, arrays, maps, and sets. This article will explain what objects are, basic object syntax and how they are created, how to access properties and methods of objects, object methods, the 'this' keyword, and when it should be used.

What are objects?
Objects are a non-primitive data type used to store complex collections of data. It functions as an entity that stores data in key-value pairs. It consists of functions and variables, which are called methods and properties. Just like an array, any expression can be input into an object value. Thus when creating objects, you may choose to give them a static value called a property or a dynamic value called a method.

Creating objects in JavaScript
There are various ways of creating objects. They can be created by using the object literal syntax, constructor functions, ECMAScript 6 classes, and the _object.create method. Let us examine them individually.

Object literal syntax This is the most obvious way of creating objects in JavaScript. It involves declaring a variable and giving the values assigned to the variable a name. This is what we mean when we say an object stores data in key-value pairs. For example, the code below has three properties; name, job, and birthYear, and a method calcAge:

This syntax enables values to be assigned names called keys. For example, the key ‘name’ has a value of 'John Samuels.' This is what JavaScript object syntax looks like.

Constructor functions Another way of creating an object is by using a function to build an object. This function is called a constructor function. A function expression or a function declaration can be used to create a constructor function. However, an arrow function will not work as a constructor function simply because it does not have its own ‘this’ keyword which is essential to a constructor function. The function is then called with the new operator.

In the code below, a function called ‘Individual’ is created with the parameters of name, job, and birthYear. The function is then called using the new operator. When the new operator is used to call a constructor function, like in the code below, an empty object is created, and the 'this' keyword is set to that empty object which is then linked to a prototype and returned by the function. If you take a look at the code below, the properties are declared with the 'this' keyword inside the constructor function, and the new empty object will then contain all those properties, which are then returned as john().

We can also define methods on the constructor function which will then be accessed by every object created by that constructor function. This is generally known as prototypal inheritance. The prototype property exists on all functions, including a constructor function. For example, in the code below, the calcAge _method has been defined on the prototype property of the constructor function _Individual. The john _object, which has been created using the constructor function, will get access to the _calcAge method.

ES6 Classes ECMAScript 6 introduced the use of the class keyword to create objects in JavaScript. ES6 classes allow us to do the same thing we did on the constructor function using a more modern syntax. A class is like a function, and like functions, a class can be created by a class expression or declaration.

In the code below, an Individual _class is created with a constructor method inside it. The constructor method functions like a constructor function declaring the properties with the ‘this’ keyword. The _calcAge method is defined outside the constructor method, and it is automatically added to the prototype property of the class, which can then be inherited by any object created using the class Individual.

Object dot create method. Object.create is a function that works differently from ES6 classes and constructor functions. Prototypal inheritance does exist. However, the new operator is not used to call the function, and constructor functions are not needed. Instead, the object.create function is used to manually set the prototype of an object to any other object we create.

In the code below, an object called individual is created using the object literal syntax. A method called property which contains the parameters of the properties to be set is defined inside the object. The calcAge method is also defined in the object. An object called john is then created, and the _object.create _method is used to set the prototype of this empty object to the Individual object.

The object.create method is important as it can also be used to implement inheritance between classes.

Accessing and modifying the property and value of an object
We have seen from the above illustrations the various ways of creating objects. It is also important for you to know how to access and modify the property and value of an object. There are two common ways of doing this: using the dot notation and the bracket notation. Apart from these two ways, the value of an object can also be accessed by destructuring. Let us consider them one by one.

Dot notation This way of accessing data from an object is straightforward. All we have to do is use the dot operator between the object and the property we want to access. For example: In the code below, the property name was retrieved from the object using the dot notation, and it was then logged to the console.

The dot can also be used to add new properties to the object. For example, the code below adds a property called birthYear _with a value of ‘2002’ to the _john object using an equal to operator.

Bracket notation Properties are accessed or added to objects using brackets. The difference between the dot notation and the bracket notation is that any expression can be put inside the bracket. See the example below:

Destructuring Destructuring is a feature in JavaScript that allows you to retrieve data from an object or even an array and store them in variables. This is very useful when we receive data from a web API which is usually stored in objects. The syntax for destructuring an object is quite similar to that used in destructuring an array. The only difference is when destructuring an object, you should use the curly braces like this:

In the code above, the curly braces come after the keyword const, and the variable names inside the curly braces are identical to the property names. The variables are then used to form a sentence, as seen above.
We can, however, change the variable names like this:

Thus in the code above, the new variable names are defined in a similar way we define properties in object literals.

However, what if the property we want to retrieve does not exist on the object? Normally in such a situation, it is supposed to show us undefined. Nevertheless, when destructuring our object, we can give such variable a default value like this:

In the above code, the property birthYear does not exist, but we gave it a default value of two thousand and two using the equal to and brackets sign.

Object methods and the ‘this’ keyword
If you have come so far in this article, you will discover that we have used methods a few times. Methods are like properties of an object. They are more dynamic, however. A method is essentially a function that is a property of an object. They can be likened to an action performed on an object. For example, the calcAge method in the code below calculates the age of the object john and returns it. It is then logged to the console in a nice string.

The ‘this’ keyword functions differently in JavaScript than it does in other programming languages. It is more like a special variable that is created for every function. The 'this' keyword points to the function in which it is called. This means that it takes the value of the object. The values of the 'this' keyword are, however, not static. It depends on how the function is called, and its value is assigned when the function is executed or called. A function may be called as a property of an object that is, a method, in which case it points to the object that is calling that method.

In the above example, the ‘this’ keyword points to the john object, which is the object calling the calcAge method.
Functions may also be called normally. That is, without it being a property of an object. In this case, the ‘this’ keyword will be undefined if it is in strict mode else, it will point to the global object, which in the case of the browser is the (window object).
An arrow function does not have its own ‘this’ keyword. Using the ‘this’ keyword in an arrow function will only point to its outer or parent function.

In the example above, the arrow function func points to the outer calcAge method.
Lastly, it is important to note that if a function is called as an event listener, the ‘this’ keyword will always point to the DOM element that the handler function is attached to.

When to use objects in our code
Since objects are containers for storing data, usually complex data, it is advisable to use them when we want to do just that. Also, unlike arrays, data in an object does not need to be structured. This means that if we want to store unstructured data, objects are our best bet. We can also decide to organize our code in an object-like manner. This is known as Object Oriented Programming(OOP).

Conclusion
This article has tried to give you a brief overview of objects in JavaScript. This includes what objects are, their syntax and how they are created, how we can access object properties, their methods and the 'this' keyword, and when we should use objects in our code. Of course, there is still a lot to learn about objects in JavaScript, such as how prototypes work and Object Oriented Programming in JavaScript. If you wish to learn more, you can visit this site https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects for more info.

This article was written by Okure U. Edet Kingsley. You can follow me on Twitter @itzz_okure