In this post we will write a function in javascript to generate beautiful ❤️  user avatar.

First we will add `img` tag to our HTML in which we will render our avatar from javascript.
```html
<img alt="Avatar" id="avatar">
```
Then after that we will write a function `generateAvatar()` in javascript which will return `src` for our `img` tag.This function will take 3 arguments.
1. text - The actual text to show in the avatar image.
2. backgroundColor - The background color of the avatar image.
3. textColor - The color of the text present in the avatar image

Now we will write the actual function to generate the avatar.

Now here firstly we will created new HTML `canvas` element which is used to draw graphics on a web page.Then we will call `getContext()` method on that instance and pass '2d' as argument to it,leading to the creation of a [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) object representing a two-dimensional rendering context. 

```js
     const canvas = document.createElement("canvas");
     const context = canvas.getContext("2d");
```

After that with the help of instance of that canvas we will set the `width` and `height` of the canvas.
```js
            canvas.width = 200;
            canvas.height = 200;
```

Then we will draw the background of the `canvas`. First by setting property `fillStyle` on context to backgroundColor we have set the background color of our canvas while by calling function `fillRect()` on context we will draw the actual rectangular shape on our HTML `canvas`.

```js
            // Draw background
            context.fillStyle = backgroundColor;
            context.fillRect(0, 0, canvas.width, canvas.height);
```
here
```js
 context.fillRect(x, y, width, height);
```
- x - The x-axis coordinate of the rectangle's starting point.
- y - The y-axis coordinate of the rectangle's starting point.
- width - The rectangle's width. Positive values are to the right, and negative to the left.
- height - The rectangle's height. Positive values are down, and negative are up.

Now after that we will draw text on the `canvas`
```js
   // Draw text
    context.font = "bold 100px Assistant";
    context.fillStyle = textColor;
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillText(text, canvas.width / 2, canvas.height / 2);
```
Now this will create the `canvas` with background and text in it.But we have to render this into `img` tag. So we will call `toDataURL()`method on `canvas` which will return a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG).

And the completed function will look like below

```html
<script>
        function generateAvatar(
            text,
            foregroundColor = "white",
            backgroundColor = "black",
            size=250
        ) {
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");

            canvas.width = 200;
            canvas.height = 200;

            // Draw background
            context.fillStyle = backgroundColor;
            context.fillRect(0, 0, canvas.width, canvas.height);

            // Draw text
            context.font = "bold 100px Assistant";
            context.fillStyle = foregroundColor;
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillText(text, canvas.width / 2, canvas.height / 2);

            return canvas.toDataURL("image/png");
        }

    </script>
```
Now we will use this to render avatar in our `img` tag as below
```js
document.getElementById("avatar").src = generateAvatar(
            "SN",
            "white",
            "#ff3399"
        );
```
This will create the following result in browser - 
![avatar-1.png](https://res.cloudinary.com/dh1srz69c/image/upload/v1621248198/avatar_1_7b453acc30.png)


Now to make it circular we will add CSS `border-radius` property of the `img` to `50%` as below
```html
    <style>
        #avatar {
            border-radius: 50%;
        }
    </style>
```
Which will generate following result in browser. - 
![avatar-2.png](https://res.cloudinary.com/dh1srz69c/image/upload/v1621248222/avatar_2_cb80078801.png)


Hope this will help you 😇. Thanks for reading.



thumbnail_The Ultimate HTML Crash Course.jpg

The Ultimate HTML Crash Course.jpg

In this post we will write a function in javascript to generate beautiful ❤️  user avatar.

🔥 Build User Avatar Generator In Javascript

![js-dates.jpg](https://res.cloudinary.com/dh1srz69c/image/upload/v1618296129/js_dates_ebca0a0677.jpg)
In this article , we will learn all the important topics related to dates in javascript with help of proper examples.\
`Date` objects contain a `Number` that represents milliseconds since 1 January 1970 UTC.
## Creating A Date Object
We can create a `Date` object using `Date()` constructor with the following syntaxes - 
```js
new Date() //current date and time as of the time of instantiation.
new Date(value) // value is an integer value representing the number of milliseconds since January 1, 1970, 00:00:00
new Date(dateString) // A string value representing a date
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]) //Give at least a year and month
```

#### Examples
```js
let today = new Date();
console.log(today);
let myDay = new Date('January 16, 2001 05:39:00');
console.log(myDay);
myDay = new Date('2001-01-16T05:39:00');
console.log(myDay);
myDay = new Date(2001, 0, 16); // the month is 0-indexed
console.log(myDay);
myDay = new Date(1995, 0, 16, 5, 39, 0);
console.log(myDay);
```
#### Output
>2021-04-12T19:46:14.180Z\
2001-01-16T00:09:00.000Z\
2001-01-16T00:09:00.000Z\
2001-01-15T18:30:00.000Z\
1995-01-16T00:09:00.000Z

## Important Instance Methods
### getDate()
Returns the day of the month (1–31) for the specified date according to local time.
```js
console.log(myDay.getDate());
```
#### Output
>16

### getDay()
Returns the day of the week (0–6) for the specified date according to local time.
```js
console.log(myDay.getDay());
```
#### Output
>1

### getFullYear()
Returns the year (4 digits for 4-digit years) of the specified date according to local time.
```js
console.log(myDay.getFullYear());
```
#### Output
>1995

### getHours()
Returns the hour (0–23) in the specified date according to local time.
```js
console.log(myDay.getHours());
```
#### Output
>5

### getMinutes()
Returns the minutes (0–59) in the specified date according to local time.
```js
console.log(myDay.getMinutes());
```
#### Output
>39

### getSeconds()
Returns the seconds (0–59) in the specified date according to local time.
```js
console.log(myDay.getSeconds());
```
#### Output
>0

### getMonth()
Returns the month (0–11) in the specified date according to local time.
```js
console.log(myDay.getMonth());
```
#### Output
>0

***We also have similar methods with UTC as `getUTCDate()`,`getUTCDay()`,`getUTCFullYear()`,`getUTCHours()`,`getUTCMilliseconds()`,`getUTCMinutes()`,`getUTCMonth()` and `getUTCSeconds()` which will give similar results but according to universal time.***

***We also have similar setter methods with local time as well as with UTC which are `setUTCDate()`,`setUTCDay()`,`setUTCFullYear()`,`setUTCHours()`,`setUTCMilliseconds()`,`setUTCMinutes()`,`setUTCMonth()` and `setUTCSeconds()` which will set the particular parameters according to universal time. While `setDate()`,`setDay()`,`setFullYear()`,`setHours()`,`setMilliseconds()`,`setMinutes()`,`setMonth()` and `setSeconds()` will set the parameters according to lacale time.***


## Important Methods To Convert Date To String
### toDateString()
Returns the "date" portion of the Date as a human-readable string like `Tue Apr 13 2021`.

### toISOString()
Converts a date to a string following the ISO 8601 Extended Format like`1995-01-16T00:09:00.000Z` .

### toUTCString()
Converts a date to a string using the UTC timezone like `Mon, 16 Jan 1995 00:09:00 GMT`.

### toLocaleString()
Returns a string with a locality-sensitive representation of this date like `1/16/1995, 5:39:00 AM`.

### Calculating Elapsed Time
```js
let start = new Date()
// The event to time goes here:
doSomethingForALongTime()
let end = new Date()
let elapsed = end.getTime() - start.getTime() // elapsed time in milliseconds
```

### Get the number of seconds since the ECMAScript Epoch
```js
let seconds = Math.floor(Date.now() / 1000)
```

So , that is it for this article 😀. I hope you understand how to manipulate dates in javascript. And lastly as always , Thank You for reading.

thumbnail_js-dates.jpg

js-dates.jpg

In this article , we will learn all the important topics related to dates in javascript with help of proper examples.

📅 Master Javascript Dates In 2 Minutes

![custom-toast.jpg](https://res.cloudinary.com/dh1srz69c/image/upload/v1615579665/custom_toast_5229291ab7.jpg)

In this post , we will create a Custom Toast/Snackbar  Notification Component in  React JS which will have different styling ❤️ depending upon variant. This is the third part of my **Custom UI Components With React series** 🥳. You can see the demo of what we are going to build in this tutorial [here](https://codesandbox.io/s/reverent-germain-iory5?file=/src/App.js). 

Here , in this tutorial , we are going take a different approach than other tutorials. In other tutorial we have created a React Functional components. But here we have to trigger the method to show toast notification which is part of this component from outside it . So instead of creating a component directly , we will create `useToast()` custom hook which will return two things
1. `openToast` -  a method to trigger opening of toast notification.
2. `ToastComponent` - the actual Toast Notification component.

Now going forward we will proceed as below:
1. Creating a fresh react app.
2. Making and designing our `useToast` custom hook.
3. A button to trigger an event to show Toast Notification.

# Creating a Fresh React App
Firstly , we will create a fresh react project with the help of `create-react-app` cli tool by using following command.
```
npx create-react-app modal
```

Let’s start the created app using `npm start` and open up your browser and go to `http://localhost:3000`. You’ll see react’s default app.
Now let's move on to the next step which is to designing and making of actual Modal component.

# Making and designing our useToast custom hook
Now , inside `src` folder of our app , we will create components folder. Inside this component folder , we will create a `toast.js` file for having our `useToast` hook and `toast.module.css` file having `css` styling for our Toast Notification component. 

Getting back to designing part, below is the code snippet for it.
```css
/* toast.module.css */

.snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  color: #111;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
}

.content {
  display: flex;
  font-size: 1.2rem;
  font-weight: bold;
}

.icon {
  height: 25px;
  width: 25px;
  margin-right: 10px;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
.snackbar.show {
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}


```
- `.snackbar` is the class which will have the styling for Toast component whic will be hidden initially.
-  `.content` and `.icon` are the classes which will have the styling for message text of Toast Notification and icon present in  it respectively.
-  `.snackbar.show`  class makes the Toast Notification visible with fade in effect which after 3s disappears with fade out effect.

Now let’s create `useToast` hook.
Below is the code snippet for it.

```jsx

//toast.js

import React, { useRef } from "react";
import ErrorIcon from "./icons/error";
import InfoIcon from "./icons/info";
import SuccessIcon from "./icons/success";
import WarningIcon from "./icons/warning";
import styles from "./toast.module.css";

const useToast = (message, variant = "success", style = {}) => {
  const toastRef = useRef(null);
  const openToast = () => {
    toastRef.current.classList.add(styles.show);
    setTimeout(function () {
      toastRef.current.classList.remove(styles.show);
    }, 3000);
  };
  let toastStyle, icon;
  switch (variant) {
    case "success":
      toastStyle = {
        backgroundColor: "#adebad",
        borderTop: "5px solid #2db92d"
      };
      icon = <SuccessIcon className={styles.icon} fill="#2db92d" />;
      break;
    case "error":
      toastStyle = {
        backgroundColor: "#ffcccc",
        borderTop: "5px solid #ff0000"
      };
      icon = <ErrorIcon className={styles.icon} fill="#ff0000" />;
      break;
    case "info":
      toastStyle = {
        backgroundColor: "#ccf2ff",
        borderTop: "5px solid #33ccff"
      };
      icon = <InfoIcon className={styles.icon} fill="#33ccff" />;
      break;
    case "warning":
      toastStyle = {
        backgroundColor: "#fff0b3",
        borderTop: "5px solid #ffcc00"
      };
      icon = <WarningIcon className={styles.icon} fill="#ffcc00" />;
      break;
    default:
      break;
  }
  const ToastComponent = () => (
    <React.Fragment>
      <div
        ref={toastRef}
        className={styles.snackbar}
        style={{ ...toastStyle, ...style }}
      >
        <div className={styles.content}>
          {icon}
          {message}
        </div>
      </div>
    </React.Fragment>
  );
  return { openToast, ToastComponent };
};

export default useToast;


```
This custom hook will take three parameters:
1.message - Which is a required parameter , which indicates message to show inside this toast notification.\
2. variant - Which will have value one of `'success | warning | error | info`.Depending upon this the styling of notification will be different.This is optional parameter with default value of `success`.\
3. style -  It will have any custom styles that user want to apply to Notification.This is optional parameter with default value of empty object.\

Here , inside this hook we have used four more component InfoIcon,SuccessIcon,WarningIcon and Errorcon , all of which are just simply  `svg` icons.

This component has two main functional parts
1. Correct Styling - Firstly , we will use javascript `swicth` statement to check what is the variant of the toast notification and according to that we will decide the which styling to apply and which icon to render inside this toast notification.\
2. `openToast()` - After that we will implement the method inside this hook to open a toast notification. Inside this method , we will add the `.show` class to toast with the help of `useRef()` to make it visible and after 3 seconds we will remove that class from toast with help of `setTimeout()` so that notification will disappear after 3 seconds.\ 

Now , we will create a ToastComponent inside this hook as shown in above code snippet. After that lastly , we will return the `ToastComponent` and `openToast` from this hook.\
Now , we will see how we can trigger this toast notification with the help of button.

# A button to trigger an event to show Modal

To make it simple, I added the Button in App.js file as below,
```jsx

//App.js

import React from "react";
import useToast from "./components/toast";
import "./styles.css";

export default function App() {
  const { openToast, ToastComponent } = useToast(
    "This is my notification.",
    "success"
  );
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh"
      }}
    >
      <button onClick={() => openToast()}>Show Snackbar </button>
      <ToastComponent />
    </div>
  );
}


```

That’s it you did it. It’s as simple as that. Now you can use this component anywhere in your project.We have made a simple , customizable ,beautiful and most important reusable Toast Notification Component.
This is link to [CodeSandbox](https://codesandbox.io/s/reverent-germain-iory5?file=/src/App.js)  of Toast component.
Let me know if this tutorial was helpful for you guys and for which case you used it.If you have any queries you can contact me through my email or other social media platforms.

thumbnail_custom-toast.jpg

custom-toast.jpg

In this post , we will create a Custom Toast/Snackbar  Notification Component in  React JS which will have different styling ❤️ depending upon variant. This is the third part of my Custom UI Components With React series 🥳.

😎Build Custom Toast Notification Component In React With Different Variants

![string-methods.jpg](https://res.cloudinary.com/dh1srz69c/image/upload/v1616579676/string_methods_84bddaa500.jpg)

Manipulation of javascript strings are very important in most of the  web development projects. So , in this post we will take a look 😍 at some important and frequently used string methods in javascript. Below are the strings which we will used to learn this methods with.
```js
var stringOne = "Let's learn important javascript string methods."
var stringTwo = "Also we will see their examples."
```
## charAt()
The `String` object's `charAt()` method returns a new string consisting of the single UTF-16 code unit located at the specified offset into the string.If the `index` cannot be converted to the integer or no `index` is provided, the default is `0`, so the first character of string is returned.
```js
const index = 4;
console.log(`Character at index ${index} in stringOne is ${stringOne.charAt(index)}`);
```
**Output**
>Character at index 4 in stringOne is s

## concat()
The `concat()` method concatenates the string arguments to the calling string and returns a new string. If the arguments are not of the type string, they are converted to string values before concatenating.
```js
console.log(stringOne.concat(stringTwo));
console.log(stringOne.concat('And ', stringTwo));
```
**Output**
>Let's learn important javascript string methods.Also we will see their examples.\
Let's learn important javascript string methods.And Also we will see their examples.

## endsWith()
The `endsWith()` method determines whether a string ends with the characters of a specified string, returning `true` or `false` as appropriate. This method is case-sensitive. If second argument provided, it is used as the `length` of string. Defaults to `string.length`.
```js
console.log(stringOne.endsWith('methods.'));
console.log(stringOne.endsWith('javascript'));
console.log(stringOne.endsWith('javascript', 32));
```
**Output**
>true\
false\
true

## includes()
The `includes()` method performs a case-sensitive search to determine whether one string may be found within another string, returning `true` or `false` as appropriate. The second argument is position within the string at which to begin searching for searchString. (Defaults to 0.)
```js
console.log(stringOne.includes("Let's"));
console.log(stringOne.includes("Let's", 1)); //Start searching from first index
console.log(stringOne.includes("let's")); //Case sensitive
```
**Output**
>true\
false\
false

## indexOf()
The `indexOf()` method returns the index within the calling String object of the first occurrence of the specified value, starting the search at `fromIndex`. Returns `-1` if the value is not found. `fromIndex` is the second argument which is an integer representing the index at which to start the search. Defaults to 0.
```js
console.log(stringOne.indexOf('a'));
console.log(stringOne.indexOf('a', 15)); //Start searching from index 15
```
**Output**
>8\
18

## lastIndexOf()
The `lastIndexOf()` method is same as `indexOf()` method only difference is instead of first occurence it search for last occurence of a given string. It returns the `index` of the last occurrence of searchValue; `-1` if not found. 
```js
console.log(stringOne.lastIndexOf('a'));
```
**Output**
>25

## replace()
The `replace()` method returns a new string with some or all matches of a `pattern` replaced by a replacement. The pattern can be a `string` or a `RegExp`, and the replacement can be a `string` or a `function` to be called for each match. If pattern is a string, only the first occurrence will be replaced.\
The original string is left unchanged.
```js
console.log(stringOne.replace('methods', 'functions'));
console.log(stringOne.replace('important', 'must know'));
const regex = /Javascript/i;
console.log(stringOne.replace(regex, 'JS'));
```
**Output**
>Let's learn important javascript string functions.\
Let's learn must know javascript string methods.\
Let's learn important JS string methods.

**`replaceAll()` is also a similar method only difference is instead of replacing first match it will replace every match in the string.**

## startsWith()
The `startsWith()` method determines whether a string begins with the characters of a specified string, returning `true` or `false` as appropriate.The second argument is `position` in this string at which to begin searching for searchString. Defaults to 0.
```js
console.log(stringOne.startsWith("Let's"));
console.log(stringOne.startsWith("Let's", 5)); // Start searching from position at index 5
```
**Output**
>true\
false

## slice()
The `slice()` method **extracts a section of a string** and returns it as a new string, without modifying the original string. Its first argument is `beginIndex` - the zero-based index at which to begin extraction. And second srgument is `endIndex` - the zero-based index before which to end extraction. **The character at `endIndex` will not be included.**\
If any or both of the two `endIndex` and `beginIndex` are negative, then they are treated as `str.length + endIndex` and `str.length + beginIndex` . (For example, if endIndex is -3, it is treated as str.length - 3.)
```js
console.log(`Length of stringOne is ${stringOne.length}`);
console.log(stringOne.slice(6, 22)); // Start at index 6 and extract upto index 22 not including 22
console.log(stringOne.slice(6, -9)); // Start at index 6 and extract upto index 48 - 9 = 39 not including 39
console.log(stringOne.slice(6)); // Start at index 6 and extract whole string
console.log(stringOne.slice(50)); // As startIndex is greater than length return empty string
```
**Output**
>Length of stringOne is 48\
learn important \
learn important javascript string\
learn important javascript string methods.

## split()
The `split()` method divides a `String` into an ordered list of substrings, puts these substrings into an `array`, and returns the `array`.
```js
console.log(stringOne.split(' '));
console.log(stringOne.split('learn'));
```
**Output**
>[ "Let's", 'learn', 'important', 'javascript', 'string', 'methods.' ]\
[ "Let's ", ' important javascript string methods.' ]

## substr()
The `substr()` method returns a portion of the string, starting at the specified index and extending for a given number of characters afterwards.
```js
console.log(stringOne.substr(6)); // Start at index 6 and extract whole remaining string
console.log(stringOne.substr(6, 34)); // Start at index 6 and extract next 34 characters.
```
**Output**
>learn important javascript string methods.\
learn important javascript string

## trim()
The `trim()` method removes whitespace from both ends of a string. Whitespace in this context is all the whitespace characters (space, tab, no-break space, etc.) and all the [line terminator characters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar) (LF, CR, etc.).
```js
var stringThree = '       remove whitespaces       ';
console.log(stringThree.trim());
```
**Output**
>remove whitespaces

**The `trimEnd()` and `trimStart()` are similar methods which removes whitespace from the end and start of the string respectively.**

## match()
The `match()` method retrieves the result of matching a string against a regular expression. You can learn about regular expression [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) .
```js
const regex = /[A-Z]/g; // regex for capital characters
console.log(stringOne.match(regex));
```
**Output**
>[ 'L' ]

## toLowerCase()
The `toLowerCase()` method returns the calling string value converted to lower case.
```js
var stringThree = 'THIS IS DEMO STRING';
console.log(stringThree.toLowerCase());
```
**Output**
>this is demo string

## toUpperCase()
The `toUpperCase()` method returns the calling string value converted to upper case.
```js
var stringThree = 'this is demo string';
console.log(stringThree.totoUpperCase()());
```
**Output**
>THIS IS DEMO STRING

And that is it for this article. Thanks for reading 😇 .



thumbnail_string-methods.jpg

string-methods.jpg

Manipulation of javascript strings are very important in most of the  web development projects. So , in this post we will take a look 😍 at some important and frequently used string methods in javascript.

😬15 Very Important Javascript String Methods Every Developer Should Know

- ![custom-modal.jpg](https://res.cloudinary.com/dh1srz69c/image/upload/v1615580227/custom_modal_5c6ff2a4f1.jpg)

In this post , we will build custom modal component with react js. We will build this Modal component from scratch without using any css framework. This is the second part of my series **Build Custom UI Components With React**. Below is the demo 😍 of what we will build going towards the end of this tutorial - very beautiful and fully customizable Modal Component.

![modal-demo.gif](https://res.cloudinary.com/dh1srz69c/image/upload/v1615614965/modal_demo_17b918a948.gif)


We will proceed as below:
1. Creating a fresh react app.
2. Making and designing our Modal component.
3. A button to trigger an event to show Modal.

# Creating a Fresh React App
Firstly , we will create a fresh react project with the help of `create-react-app` cli tool by using following command.
```
npx create-react-app modal
```

Let’s start the created app using `npm start` and open up your browser and go to `http://localhost:3000`. You’ll see react’s default app.
Now let's move on to the next step which is to designing and making of actual Modal component.

# Making and designing our Modal component
Now , inside src folder of our app , we will create components folder. Inside this component folder , we will create a modal folder which will have `Modal.js` file for having modal  component and `modal.module.css` file having css styling for our Modal component. 

Getting back to designing part, below is the code snippet for it.
```css
/* modal.module.css */

.modal__wrap {
	position: fixed;
	display: block;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100;
	overflow-x: hidden;
	background-color: rgba(31, 32, 41, .75);
	pointer-events: none;
	opacity: 0;
	transition: opacity 250ms 700ms ease;
}

.visible {
	pointer-events: auto;
	opacity: 1;
	transition: all 300ms ease-in-out;
}

.modal {
	overflow-y: scroll;
	overflow-x: hidden;
	position: relative;
	display: block;
	width: 60vw;
	height: 60%;
	min-height: 400px;
	min-width: 400px;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 4px;
	padding-bottom: 20px;
	background-color: #fff;
	align-self: center;
	box-shadow: 0 12px 25px 0 rgba(199, 175, 189, .25);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 250ms 250ms ease, transform 300ms 250ms ease;
	transform: scale(0);
}

.visible .modal {
	opacity: 1;
	transform: scale(1);
	transition: opacity 250ms 500ms ease, transform 350ms 500ms ease;
}

```
- `.modal__wrap` is the class which will have the styling for wrapper and backdrop of the modal.
-  `.modal` is the class which will have the styling of actual Modal component which will be hidden initially.
-  `.visible`  class makes the Modal visible with fade in and fade out effect.

Now let’s create Modal component.
Below is the code snippet for it.

```jsx
//Modal.js

import React, { useEffect, useRef } from 'react';
import Button from '../button/Button';
import CloseIcon from '../CloseIcon';
import styles from './modal.module.css';

const Modal = ({ modalStyle, children, show, onClose, backdropStyle }) => {
	const modalRef = useRef(null);
	useEffect(
		() => {
			if (show) {
				modalRef.current.classList.add(styles.visible);
			}
			else {
				modalRef.current.classList.remove(styles.visible);
			}
		},
		[
			show
		]
	);
	return (
		<React.Fragment>
			<div ref={modalRef} style={backdropStyle} className={`${styles.modal__wrap}`}>
				<Button
					onClick={onClose}
					style={{ width: 60, height: 40, position: 'absolute', top: 0, right: 0, margin: '1rem' }}
					className={styles.close__btn}
				>
					<CloseIcon height="20px" width="20px" className={styles.close__icon} />
				</Button>
				<div style={modalStyle} className={styles.modal}>
					{children}
				</div>
			</div>
		</React.Fragment>
	);
};

export default Modal;

```
This component will take four props:
1.`modalStyle` - With which one can customize the styling of visible modal window.\
2. `backdropStyle` - With which one can customize the styling of the backdrop of modal window.\
3. `onClose` -  Event handler with which one can write logic to close the modal.\
4. `show` - Boolean property which will decide wheather the modal is open or not.\

Here , inside this component we have used two more component [Button](https://satishnaikawadi.me/posts/build-custom-button-component-with-react-js) and CloseIcon. Now Button component is a reusable UI component which we have build in first part of this series tutorial link  for which is [here](https://satishnaikawadi.me/posts/build-custom-button-component-with-react-js). CloseIcon is just simply a `svg` icon to close the modal.

This component has two main functional parts
1. Firstly , inside `useEffect()` hook we will check if the show prop is true or not. If show is true , then we will add the `.visible` class to the component  or else we will remove the `.visible` class from the Modal component with the help of `useRef()` react hook.
2. We will add `onClose()` handler passed by props to the `onClick` event handler of CloseIcon , so that modal will close on clicking it.

# A button to trigger an event to show Modal

To make it simple, I added the Button in App.js file as below,
```jsx

//App.js

import React, { useState } from 'react';
import './App.css';
import Button from './components/button/Button';
import Modal from './components/modal/Modal';

function App() {
	const [
		show,
		setShow
	] = useState(false);
	return (
		<React.Fragment>
			<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
				<Button onClick={() => setShow(true)}>Open Modal</Button>
			</div>
			<Modal show={show} onClose={() => setShow(false)}>
				<div className="content">
					<img src="https://cdn.pixabay.com/photo/2015/01/09/11/11/office-594132__340.jpg" alt="Developer" />
					<div className="text">
						<h2>John Doe</h2>
						<p>
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe aliquid placeat omnis
							adipisci dolores quae amet mollitia sint, temporibus eum magnam facilis odio ex incidunt?
							Deleniti quam et rem obcaecati. Laborum atque odit expedita nulla.
						</p>
						<p>
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita labore laborum, assumenda
							dolorum provident quod itaque earum, officia in placeat dignissimos nostrum? Totam corrupti
							nihil repudiandae ducimus atque quod eos!
						</p>
					</div>
				</div>
			</Modal>
		</React.Fragment>
	);
}

export default App;


```

That’s it you did it. It’s as simple as that. Now you can use this component anywhere in your project.
This is link to [CodeSandbox](https://codesandbox.io/s/cocky-morse-uvern)  of Modal component.
Let me know if this tutorial was helpful for you guys and for which case you used it.

thumbnail_custom-modal.jpg

custom-modal.jpg

In this post , we will build custom modal component with react js. We will build this Modal component from scratch without using any css framework.

💪 Build Custom Modal/Popup Component In React JS

![js-array-methods.jpg](https://res.cloudinary.com/dh1srz69c/image/upload/v1615701416/js_array_methods_48cf5bebc3.jpg)


In this article , we will see 10 important javascript array methods which almost needed everywhere in javascript projects. We will quickly take a look at each method with example. Below is the data with which we will be working while taking examples of first 8 method.

```javascript

const studentData = [
	{ name: 'John', marks: 634, passed: true },
	{ name: 'Mark', marks: 467, passed: true },
	{ name: 'Randy', marks: 390, passed: true },
	{ name: 'Leo', marks: 149, passed: false },
	{ name: 'Chris', marks: 564, passed: true },
	{ name: 'Apu', marks: 456, passed: true },
	{ name: 'Naty', marks: 567, passed: true },
	{ name: 'James', marks: 98, passed: false },
	{ name: 'Andy', marks: 478, passed: true },
	{ name: 'Frank', marks: 180, passed: false },
	{ name: 'Don', marks: 123, passed: false }
];

```

## filter()
The `filter()` method **creates a new array** with all elements that pass the test implemented by the provided function.\
Let us  say we have to get only those students who have passed. So we will filter them as below
```js
const passedStudents = studentData.filter((student) => {
	return student.passed;
});
console.log(passedStudents);

```
Output : 
> [\
  { name: 'John', marks: 634, passed: true },\
  { name: 'Mark', marks: 467, passed: true },\
  { name: 'Randy', marks: 390, passed: true },\
  { name: 'Chris', marks: 564, passed: true },\
  { name: 'Apu', marks: 456, passed: true },\
  { name: 'Naty', marks: 567, passed: true },\
  { name: 'Andy', marks: 478, passed: true }\
]

## map()
The `map()` method **creates a new array** populated with the results of calling a provided function on every element in the calling array.
Say we want to get array of name of every student. So we can get it as follows
```js
const studentNames = studentData.map((student) => {
	return student.name;
});
console.log(studentNames);
```

Output:
>[\
  'John',  'Mark',\
  'Randy', 'Leo',\
  'Chris', 'Apu',\
  'Naty',  'James',\
  'Andy',  'Frank',\
  'Don'\
]

## find()
The `find()` method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, `undefined` is returned. Say we want to get data of student whose name is 'Leo' then
```js
const dataOfLeo = studentData.find((student) => {
	return student.name === 'Leo';
});
console.log(dataOfLeo);
```
Output:
>{ name: 'Leo', marks: 149, passed: false }

## reduce()
The `reduce()` method executes a `reducer` function (that you provide) on each element of the array, resulting in single output value. It takes first parameter as `reducer` function and second parameter is `initial value`
Say we want to calculate sum of marks of all students then
```js
const totalMarksOfAll = studentData.reduce((currentTotal, student) => {
	return student.marks + currentTotal;
}, 0);
console.log(totalMarksOfAll);

```
Output:
>4106

## findIndex()
The `findIndex()` method returns the **index** of the first element in the array **that satisfies the provided testing function.** Otherwise , it returns `-1`, indicating that no element passed the test. Say we want to find the index of Leo's Data then
```js
const indexOfLeo = studentData.findIndex((student) => student.name === 'Leo');
console.log(indexOfLeo);
```
Output:
>3

## forEach()
The `forEach()` method executes a provided function once for each array element. It works similar to for loop. Say we want to print result status for each student then 
```js
studentData.forEach((student) => {
	console.log(
		`${student.name} has ${
			student.passed ? 'passed' :
			'failed'} !`
	);
});

```
Output:
>John has passed !\
Mark has passed !\
Randy has passed !\
Leo has failed !\
Chris has passed !\
Apu has passed !\
Naty has passed !\
James has failed !\
Andy has passed !\
Frank has failed !\
Don has failed !

## some()
The `some()` method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array. Say we want to know if data have some failed students in it or not then
```js
const hasFailedStudents = studentData.some((student) => {
	return !student.passed;
});
console.log(hasFailedStudents);

```
Output:
>true

## every()
The `every()` method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value. It is similar to `some()` method the only difference is that the `some()` method will return true if any predicate is true while `every()` method will return true if all predicate are true. Say we want to check if all the students are passed or not then
```js
const hasAllPassed = studentData.every((student) => {
	return student.passed;
});
console.log(hasAllPassed);
```
Output:
>false

## New Data
Now , for remaining two methods lets use below data , 
```js
const languages = [
	'java',
	'cpp',
	'python',
	'javascript'
];
```
## includes()
The `includes()` method determines whether an array includes a certain value among its entries, returning `true` or `false` as appropriate.
Say we want to check if python and ruby are in above languages array or not then
```js
const includesRuby = languages.includes('ruby');
console.log(includesRuby)
const includesPython = languages.includes('python');
console.log(includesPython);

```

Output:
>false\
true

## indexOf()
The `indexOf()` method returns the first index at which a given element can be found in the array, or -1 if it is not present.
Say we want to find index of python then
```js
const indexOfPython = languages.indexOf('python');
console.log(indexOfPython);
```
Output:
>2

And that is it for this article. Thanks for reading.

thumbnail_js-array-methods.jpg

js-array-methods.jpg

In this article , we will see 10 important javascript array methods which almost needed everywhere in javascript projects. We will quickly take a look at each method with example.

😬 10 Must Know Javascript Array Methods

In this post , I will be showing how we can build a singly linked list data structure using javascript language.We will also learn all operations on it.
![linked-lists.png](https://res.cloudinary.com/dh1srz69c/image/upload/v1614713918/linked_lists_ca0b13a95f.png)
# 🧐Overview
In a singly linked list each item points to its successor.Each item in a linked list is called as a node.There is a head node in each linked list which points to its first node.The last node of linked list points to null.

# Node Class
First we will create a blue print for our node of linked list.We will create a Node Class in javascript which will have two properties-
- data  - which will store data of node
- next  - which will points to next node 


```js
class Node {
	constructor(data, next = null) {
		this.data = data;
		this.next = next;
	}
}

```

# Linked List Class
Now we will create a actual linked list class which will have two properties - 
- head -which will points to the first node of linked list
- size  -which represents the number of nodes present in the list

```js
class LinkedList {
	constructor() {
		this.head = null;
		this.size = 0;
	}
}

```
# Operations
Now , we will create some member functions in LinkedList class to perform various operations on linked list.
### (1) insertFirst() 
 To insert a  node at first position of list.\
Here we will simply point the head to new node and next of new node to previous head node . At the end , we will increment the size of list by 1. 
```js
	// Insert Node at first position
	insertFirst(data) {
		this.head = new Node(data, this.head);
		this.size++;
	}
```

### (2) insertLast() 
 To insert a  node at last position of list.\
Here we will have 2 case\
1.If list is empty - then we will simply point the head of node to new node.\
2. if list is not empty - then we will traverse the whole list and then point the next of last node to new node.\
```js
	// Insert Node at last position
	insertLast(data) {
		const newLast = new Node(data);

		// Check if list is empty then last node is first node which will be head
		if (!this.head) {
			this.head = newLast;
		}
		else {
			// if list is not empty traverse to last node
			let last = this.head;
			while (last.next) {
				last = last.next;
			}
			last.next = newLast;
		}
		this.size++;
	}
```

### (3) insertAt() 
 To insert a  node at given index.\
Here also we will have 2 case\
1.If index is 0 - then we will simply point the head of node to new node.\
2. if index is not 0 - then we will create two variables to track previous and current node and will traverse the list upto given index and and then point the next of previous node to new node and next of new node to current node.
```js
// insert a node at a particular index
	insertAt(data, index) {
		// check if index is valid
		if (index >= 0 && index < this.size) {
			// if first index
			if (index === 0) {
				this.head = new Node(data, this.head);
				return;
			}

			const node = new Node(data);
			let current, previous;

			current = this.head;
			let count = 0;

			while (count < index) {
				previous = current;
				count++;
				current = current.next;
			}

			node.next = current;
			previous.next = node;

			this.size++;
		}
		else {
			console.log('You have entered an invalid index!!');
		}
	}

```

### (4) removeAt() 
 To remove a node at given index.\
Here also we will have 2 cases as in (3)\
1.If index is 0 - then we will simply point the head to next of previous head node.\
2. if index is not 0 - then we will create two variables to track previous and current node and will traverse the list upto given index and and then point the next of previous node to  next  current node.
```js
	// remove a  node at a particular index

	removeAt(index) {
		let current = this.head;
		let previous;
		let count = 0;
		// check if index is valid
		if (index >= 0 && index < this.size) {
			// if first index
			if (index === 0) {
				this.head = current.next;
			}
			else {
				while (count < index) {
					previous = current;
					current = current.next;
					count++;
				}
				previous.next = current.next;
			}
			this.size--;
		}
		else {
			console.log('You have entered an invalid index!!');
		}
	}

```

### (5) getAt() 
 To get  data of a node at given index.\
Here also we will have 2 cases as in (3)\
1.If index is 0 - then we will simply return the data of head node.\
2. if index is not 0 - traverse upto given index in linked list and then return the data of current node.
```js
	getAt(index) {
		let current = this.head;
		let count = 0;
		// check if index is valid
		if (index >= 0 && index < this.size) {
			// if first index
			if (index === 0) {
				// console.log(this.data);
				return this.head.data;
			}

			while (count != index) {
				current = current.next;
				count++;
			}

			// console.log(current.data);
			return current.data;
		}
		else {
			console.log('You have entered an invalid index!!');
		}
	}
```

### (6) clearList() 
 To clear (empty) a whole list.\
Here we will simply point head of list to null and size to zero then list will become empty
```js
	// clear a whole list
	clearList() {
		this.head = null;
		this.size = 0;
	}
```

### (7) printListData() 
 To print data of all nodes in list.\
Here we will simply traverse to whole list and print data of each node.
```js
// print all data in list
	printListData() {
		let current = this.head;

		if (!this.head) {
			console.log('The list is empty!!');
			return;
		}

		while (current != null) {
			console.log(current.data);
			current = current.next;
		}
	}
```

# Driver Code
Now we will see code for how we can create an instance of this linked list and perform various operations onto it.By running below code with node or in browser
```js
// index.js
const li = new LinkedList();
li.insertLast(200);
li.insertFirst(100);
li.insertAt(300, 1);
li.insertLast(400);
li.printListData();
console.log(`The size of list is ${li.size}`);
console.log(li.getAt(2));
li.removeAt(1);
console.log(`The size of list is ${li.size}`);
li.clearList();
console.log(`The size of list is ${li.size}`);
```
we will get output as:
> 100\
300\
200\
400\
The size of list is 4\
200\
The size of list is 3\
The size of list is 0



I hope 😇 all of you understand how to build linked list with javascript. Thank you for reading.

thumbnail_linked-lists.png

linked-lists.png

In this post , I will be showing how we can build a singly linked list data structure using javascript language.We will also learn all operations on it.

Blog Articles