<h1>Today I am going to talk about node JS. </h1>

&nbsp;

Keep it mind Node JS is not a programming language like C Java or JavaScript or others

&nbsp;

Node js is nothing but JavaScript runtime it helps us to execute JavaScript code outside of Browser.

Before Node we couldn&#39;t execute JavaScript outside of Browser.

But now we can execute JavaScript code almost everywhere by the help of node JS.

&nbsp;

It has three types of models user defined, internal, external.

&nbsp;

User define Module: Which module created by us

&nbsp;

Internal Module: Node provides us some built in module it also known as internal module

&nbsp;

Example: File System Module, Http Module and more

&nbsp;

External Module: Which module we need to download vai NPM(Node Package Manager)

&nbsp;

&nbsp;

A basic introduction of node js

To take import from user in javaScript we need to use prompt&nbsp;finction.

Example:

<pre>
<code class="language-javascript">
var value = prompt("Type something: ");

console.log(value);
</code></pre>

&nbsp;

How to take user input in javaScript

In this article I am going to show you how to setup a basic router in react js.

Very first thing you need to install react-router-dom&nbsp; in your project. using npm comand

<h1>Example:</h1>

<pre>
<code class="language-javascript">npm i react-router-dom</code></pre>

&nbsp;

Then import&nbsp; BrowserRouter, Routes, Route and Link&nbsp; from &quot;react-router-dom&quot;

&nbsp;

<h1>Example:</h1>

<pre>
<code class="language-javascript">import { BrowserRouter, Routes, Route, Link } from "react-router-dom";</code></pre>

Now you can setup router in your component

<h1>Code Example:</h1>

<pre>
<code class="language-javascript">import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
export default function App() {
 return (
 &lt;BrowserRouter&gt;
 &lt;Link to="/about"&gt;About&lt;/Link&gt;
 &lt;Link to="/contact"&gt;Contact&lt;/Link&gt;
 &lt;Link to="/services"&gt;Login&lt;/Link&gt;

 &lt;Routes&gt;
 &lt;Route path="/" element={&lt;Home&gt;&lt;/Home&gt;}&gt;&lt;/Route&gt;
 &lt;Route path="/about" element={&lt;About&gt;&lt;/About&gt;}&gt;&lt;/Route&gt;
 &lt;Route path="/contact" element={&lt;Contact&gt;&lt;/Contact&gt;}&gt;&lt;/Route&gt;
 &lt;Route path="/services" element={&lt;Services&gt;&lt;/Services&gt;}&gt;&lt;/Route&gt;
 &lt;/Routes&gt;
 &lt;/BrowserRouter&gt;
 );
}


const Home = () =&gt; {
 return &lt;h1&gt;This is home page&lt;/h1&gt;;
};

const About = () =&gt; {
 return &lt;h1&gt;This is about page&lt;/h1&gt;;
};

const Contact = () =&gt; {
 return &lt;h1&gt;This is contact page&lt;/h1&gt;;
};

const Services = () =&gt; {
 return &lt;h1&gt;This is services page&lt;/h1&gt;;
};
</code></pre>

&nbsp;

How to setup a basic react router

In this article I am going to show how can use form in react using react hook

Very first you need to import react hook useState from react

&nbsp;

<h1>Example:</h1>

<pre>
<code class="language-javascript">import { useState } from "react";</code></pre>

Now you need to use useState hook inside your components.

Inside of useSate hook you can define a JavaScript object with some property

Like bellow

<pre>
<code class="language-javascript"> const [user, setUser] = useState({
 name: String,
 email: String,
 password: String,
 });</code></pre>

&nbsp;

Now you can use this hook in your from like this

<pre>
<code class="language-javascript"> &lt;form onSubmit={handleSubmit}&gt;

 &lt;input

 type="text"
 required
 placeholder="Type your name"

 onChange={(e) =&gt; setUser({ ...user, name: e.target.value })}

 &gt;
 &lt;/input&gt;

 &lt;input

 type="email"
 required
 placeholder="Type your email"

 onChange={(e) =&gt; setUser({ ...user, email: e.target.value })}

 &gt;
 &lt;/input&gt;
 &lt;input

 type="password"
 required
 placeholder="Type your password"

 onChange={(e) =&gt; setUser({ ...user, password: e.target.value })}

 &gt;
 &lt;/input&gt;

 &lt;button type="submit"&gt;Submit&lt;/button&gt;

 &lt;/form&gt;</code></pre>

&nbsp;

Create a function named handleSubmit or what are you like

<pre>
<code class="language-javascript"> const handleSubmit = (e) =&gt; {

 e.preventDefault();
 e.target.reset();

 try {
 //call API from here
 } catch (error) {
 console.log(error.message);

 }
 };</code></pre>

<h1>&nbsp;</h1>

<h1>Complete Example</h1>

<pre>
<code class="language-javascript">import React, { useState } from "react";

export default function App() {

 const [user, setUser] = useState({
 name: String,
 email: String,
 password: String,
 });

 const handleSubmit = (e) =&gt; {

 e.preventDefault();
 e.target.reset();

 try {
 //call API from here
 } catch (error) {
 console.log(error.message);
 }

 };

 return (
 &lt;&gt;

 &lt;form onSubmit={handleSubmit}&gt;
 &lt;input

 type="text"
 required
 placeholder="Type your name"

 onChange={(e) =&gt; setUser({ ...user, name: e.target.value })}
 &gt;
 &lt;/input&gt;

 &lt;input

 type="email"
 required
 placeholder="Type your email"

 onChange={(e) =&gt; setUser({ ...user, email: e.target.value })}
 &gt;
 &lt;/input&gt;

 &lt;input

 type="password"
 required
 placeholder="Type your password"

 onChange={(e) =&gt; setUser({ ...user, password: e.target.value })}
 &gt;
 &lt;/input&gt;

 &lt;button type="submit"&gt;Submit&lt;/button&gt;

 &lt;/form&gt;

 &lt;/&gt;
 );
}
</code></pre>

&nbsp;

How to use form in React js

<h1>Problem:</h1>

<div style="background:#eeeeee; border:1px solid #cccccc; padding:5px 10px">Suppose, you have an array like this myArray=[2,3,4,5,6,7,8,9]</div>

<div style="background:#eeeeee; border:1px solid #cccccc; padding:5px 10px">You need to find summation of this array.</div>

<h1>Solution:</h1>

<pre>
<code class="language-javascript">
let sum = 0;
let myArray = [10, 20, 30, 40, 40, 50, 60, 70, 80, 90];
for (let i = 0; i &lt; myArray.length; i++) {
 sum = sum + myArray[i];
}
console.log("Sum of this array: " + sum);</code></pre>

&nbsp;

Find summation of an array

&nbsp;

Problem:

<div style="background:#eeeeee; border:1px solid #cccccc; padding:5px 10px">Write a function to calculate tow number.</div>

Solution:

<pre>
<code class="language-javascript">function sum(x, y) {
 return x + y;
}

console.log("Result: " + sum(3, 5));</code></pre>

&nbsp;

Find summation of tow number using function

<h2>&nbsp;</h2>

<h2><code><tt>In this article I am going to show you how you can get active URL link using React hook named useRouter.</tt></code></h2>

&nbsp;

<h2><code><tt>In your component, need to import useRouter hook.</tt></code></h2>

&nbsp;

<pre>
<code>import { useRouter } from &#39;next/router&#39;;</code></pre>

&nbsp;

<h2><tt>Inside your function you need to define a variable and initialize with this hook</tt></h2>

&nbsp;

<pre>
<code>const router = useRouter();</code></pre>

&nbsp;

<h2><tt>useRouter return an object. There is a property called pathname.And this is your currently active URL.</tt></h2>

&nbsp;

<h2><tt>You can see by console log or use in any other purpose.</tt></h2>

&nbsp;

<h2><tt>Now, I&nbsp;am going to see this pathname by printing on webpage.</tt></h2>

<pre>
<code class="language-javascript">import React from "react";
import { useRouter } from "next/router";

export default function Test() {
 const router = useRouter();
 return &lt;h1&gt; Current URL: {router.pathname}&lt;/h1&gt;;
}
</code></pre>

&nbsp;

How to get active URL path in NextJs

<h2>&nbsp;</h2>

<h2><code><tt>In this article I am going to show you, how you can import a component without server side randering in NextJS.</tt></code></h2>

&nbsp;

<h2><code><tt>Very first, you need to import dynamic from &#39;react/dynamic&#39;</tt></code></h2>

<pre>
<code class="language-javascript">import dynamic from 'react/dynamic'</code></pre>

&nbsp;

<h2><tt>Now, you can import any component using dynamic and here very important thing is that, you need to pass extra information ssr = false. Link this.</tt></h2>

<pre>
<code class="language-javascript">const componentName = dynamic(() =&gt; import("component-path"), { ssr: false });</code></pre>

&nbsp;

<h2><tt>I am going to show you a complete example.</tt></h2>

<h2><tt>Let&#39;s say my component name is&nbsp;programmingnet. Now I am going to import this component dynamically without server side rendering or ssr = false.</tt></h2>

<pre>
<code class="language-javascript">import dynamic from 'next/dynamic';
const programmingnet = dynamic(() =&gt; import("components/programmingnet"), { ssr: false });

export default function App() {
 return(
 &lt;programmingnet /&gt;
 )
}</code></pre>

&nbsp;

&nbsp;

Thank You<img alt="wink" src="http://localhost:3000/ckeditor/plugins/smiley/images/wink_smile.png" title="wink" />

&nbsp;

How to import component without server side rendering in NextJs

Today I am going to show you how you can setup your node-express server with nodemon for auto refreshing when you make any change in your file.

&nbsp;

First thing you need to create a folder named what are you like In my case I am going to put my folder name is backend.

&nbsp;

Make sure you have installed node in your machine.

&nbsp;

Now inside this folder open terminal and execute some command.

<pre>
<code class="language-javascript">npm init -y</code></pre>

This command will create a JSON file with some information.This command basically initialize your node application.

&nbsp;

We are ready to install nodemon and express js

<pre>
<code class="language-javascript">npm i express nodemon</code></pre>

Installation is done...!

&nbsp;

Create a file called server.js or you can use any name inside your root folder(in my case this is backend,if you don&#39;t create inside root folder, then this setup will not work).Open and setup like bellow.

<pre>
<code class="language-javascript">import express from 'express';
const app = express();

app.get('/',(req,res)=&gt;{

res.send("Hello World");

})

app.listen(5000, () =&gt; {
 console.log('Server is runing');
});
</code></pre>

&nbsp;

Now, just you need to do some configuration in your packege.json file which is created by executing our first command.

&nbsp;

Let&#39;s open your package.json file.And setup like bellow.Only you need to change&nbsp;&nbsp;&quot;scripts&quot;&nbsp;&nbsp;to &quot;start&quot;: &quot;nodemon server.js&quot;

<pre>
<code class="language-javascript">{
 "name": "backend",
 "type": "module",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "start": "nodemon server.js"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
 "express": "^4.17.1",
 "nodemon": "^2.0.13"
 }
}
</code></pre>

&nbsp;

Done...

&nbsp;

Let&#39;s run our node application

<pre>
<code class="language-javascript">npm start</code></pre>

&nbsp;

Open your browser and go to &#39;http://localhost:5000&#39; you should see Hello World in your browser.If you make any change in server.js file and save immediately you can see&nbsp;this change in browser.

&nbsp;

How to setup Node-Express server with nodemon(Auto refresh when you make any change)

In this article I am going to teach you every thing need to know about HTML.

&nbsp;

HTML stans for Hyper Text Markup Language.

&nbsp;

This language use to make webpage.It&#39;s give only structure of your webpage.

There are some tag in HTML just you need to know about those tags.

Then you can start making a web page.

&nbsp;

I will discuss everything in&nbsp;up coming article.

What is HTML

In this article I am going to show you how you setup your PC to start writing HTML code.

&nbsp;

Very first thing you need to create a text file on you computer then rename the extension .txt to .html and save it.

Done.Now, this text file converted to a web page, you can write html inside this web page.

Right click and open this file with notepad.

&nbsp;

Notepad is a text editor where you can write html code.

You can download any other text editor from internet and use it like sublime text, notepad++ etc.

For opening this web page you need to double click then this file will open with a browser automatically.

Basic setup PC for making webpage using HTML for beginner

Every web page has a stander basic structure.

&nbsp;

HTML Basic Structure:

<hr />
<pre>
<code class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- Write your code here --&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>

This is mandatory, you have to write this basic structure.

Inside this body tag you can write any html tag to make your web page. tag will not visible to browser you can see only text in browser.

&nbsp;

Let&#39;s make a basic web page which will show a Welcome massage in browser.

<pre>
<code class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;Welcome to programmingnet.com&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>

&nbsp;

Output in browser

<pre>
<code class="language-markup">Welcome to programmingnet.com</code></pre>

&nbsp;

Basic structure of HTML

<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
	<caption>HTML tags</caption>
	<tbody>
		<tr>
			<td>Tags</td>
			<td>Code Example</td>
			<td>Output</td>
		</tr>
		<tr>
			<td>&lt;!--</td>
			<td>&lt;!--This is a comment--&gt;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;p&gt;&lt;/p&gt;</td>
			<td>&lt;p&gt;Hello&lt;/p&gt;</td>
			<td>Hello</td>
		</tr>
		<tr>
			<td>&lt;br&gt;</td>
			<td>&lt;p&gt;Hello&lt;/p&gt; &lt;br&gt;&nbsp;&lt;p&gt;World&lt;/p&gt;</td>
			<td>
			Hello

			World
			</td>
		</tr>
		<tr>
			<td>&lt;hr&gt;</td>
			<td>&lt;p&gt;Hello&lt;/p&gt; &lt;hr&gt;&nbsp;&lt;p&gt;World&lt;/p&gt;</td>
			<td>----------</td>
		</tr>
		<tr>
			<td>&lt;span&gt;&lt;/span&gt;</td>
			<td>&lt;span&gt;Hello&lt;/span&gt;</td>
			<td>Hello</td>
		</tr>
		<tr>
			<td>&lt;h1&gt;&lt;/h1&gt;</td>
			<td>&lt;h1&gt;Hello World&lt;/h1&gt;</td>
			<td>
			<h1>Hello World</h1>
			</td>
		</tr>
		<tr>
			<td>&lt;h2&gt;&lt;/h2&gt;</td>
			<td>&lt;h2&gt;Hello World&lt;/h2&gt;</td>
			<td>
			<h2>Hello World</h2>
			</td>
		</tr>
		<tr>
			<td>&lt;h3&gt;&lt;/h3&gt;</td>
			<td>&lt;h3&gt;Hello World&lt;/h3&gt;</td>
			<td>
			<h3>Hello World</h3>
			</td>
		</tr>
		<tr>
			<td>&lt;h4&gt;&lt;/h4&gt;</td>
			<td>&lt;h4&gt;Hello World&lt;/h4&gt;</td>
			<td>
			<h4>Hello World</h4>
			</td>
		</tr>
		<tr>
			<td>&lt;h5&gt;&lt;/h5&gt;</td>
			<td>&lt;h5&gt;Hello World&lt;/h5&gt;</td>
			<td>
			<h5>Hello World</h5>
			</td>
		</tr>
		<tr>
			<td>&lt;h6&gt;&lt;/h6&gt;</td>
			<td>&lt;h6&gt;Hello World&lt;/h6&gt;</td>
			<td>
			<h6>Hello World</h6>
			</td>
		</tr>
		<tr>
			<td>&lt;pre&gt;&lt;/pre&gt;</td>
			<td>
			&lt;pre&gt;

			Hello

			world

			&lt;/pre&gt;
			</td>
			<td>
			Hello

			world
			</td>
		</tr>
		<tr>
			<td>&lt;strong&gt;&lt;strong&gt;</td>
			<td>&lt;strong&gt;Hello World&lt;strong&gt;</td>
			<td>Hello World</td>
		</tr>
		<tr>
			<td>&lt;sup&gt;&lt;/sup&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;sub&gt;&lt;/sub&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;div&gt;&lt;/div&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;head&gt;&lt;/head&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;a href=&quot;&quot;&gt;&lt;/a&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;img src=&quot;&quot; /&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;i&gt;&lt;/i&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;input type=&quot;&quot; /&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;marquee&gt;&lt;/marquee&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;meta/&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;ul&gt;&lt;/ul&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;li&gt;&lt;/li&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;ol&gt;&lt;/ol&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;option&gt;&lt;/option&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;select&gt;&lt;/select&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;small&gt;&lt;/small&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;table&gt;&lt;/table&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;form&gt;&lt;/form&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;td&gt;&lt;/td&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;th&gt;&lt;/th&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;label&gt;&lt;/label&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;header&gt;&lt;/header&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&lt;nav&gt;&lt;/nav&gt;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>

&nbsp;

Some Commonly Used HTML Tags

In this article I am going to show you hou you can add hyper link to web page.

&nbsp;

Example:

<pre>
<code class="language-markup">&lt;a href="" target='_blank"&gt;Text here&lt;/a&gt;</code></pre>

Inside href you need to pass url,target not mandatory if you want to open a new window then use target.

&nbsp;

Complete example:

<pre>
<code class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;a href="http://www.google.com" target="_blank" &gt;Click here&lt;/a&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>

&nbsp;

Output:

<a href="http://www.google.com/" target="_blank">Click here</a>

Add hyper link to web page

Adding img to webpage by using HTML

For adding image to web page need to use img tag like bellow

<pre>
<code class="language-markup">&lt;img sre="img address" alt="image name" /&gt;</code></pre>

You can define height and width also using height and width attribute like bellow

<pre>
<code class="language-markup">&lt;img sre="img address" alt="image name" height="150px" width="150px" /&gt;</code></pre>

&nbsp;

How to add img in webpage

To make scrolling text you need to use marquee tag

<pre>
<code class="language-markup">&lt;marquee&gt;Your scrolling text here&lt;/marquee&gt;</code></pre>

&nbsp;

Create a scrolling text in html

<pre>
<code class="language-markup">&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

  &lt;head&gt;

    &lt;meta charset="UTF-8" /&gt;

    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;

    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;

    &lt;title&gt;Html Form Example&lt;/title&gt;

    &lt;style&gt;

      form {

        border: 1px solid #ccc;

        width: 30%;

        margin: auto;

        padding: 20px;

        border-radius: 4px;

      }

      label {

        font-size: 21px;

        font-weight: 700;

      }



      button,

      input {

        width: 100%;

        outline: none;

        border: 1px solid #ccc;

        border-radius: 4px;

        font-size: 19px;

        padding: 7px 0px;

      }



      button {

        font-size: 21px;

        font-weight: 700;

      }

      button:hover {

        background-color: #ccc;

      }

    &lt;/style&gt;

  &lt;/head&gt;

  &lt;body&gt;

    &lt;form action="#"&gt;

      &lt;h1 style="text-align: center"&gt;Html Form&lt;/h1&gt;

      &lt;label for="fname"&gt;First name:&lt;/label&gt;&lt;br /&gt;

      &lt;input

        type="text"

        id="fname"

        name="fname"

        placeholder="Type your here"

      /&gt;&lt;br /&gt;&lt;br /&gt;

      &lt;label for="lname"&gt;Last name:&lt;/label&gt;&lt;br /&gt;

      &lt;input

        type="text"

        id="lname"

        name="lname"

        placeholder="Type your here"

      /&gt;&lt;br /&gt;&lt;br /&gt;

      &lt;button type="submit"&gt;Submit&lt;/button&gt;

    &lt;/form&gt;

  &lt;/body&gt;

&lt;/html&gt;</code></pre>

&nbsp;

Design a from

Binary Search Algorithm using JavaScript

<pre>
<code class="language-javascript">
let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

function binarySearch(arr, element) {

 let result = true;
 let firstIndex = 0;
 let lastIndex = arr.length - 1;

 while (firstIndex &lt;= lastIndex) {

 let mid = (firstIndex + lastIndex)/2;

 if (arr[mid] === element) {

 result = false;
 return `Element ${element} found in index ${mid}`;

 }
 else if (element &lt; arr[mid]) {

 lastIndex = mid - 1;

 }
 else {

 firstIndex = mid + 1;

 }
 }

 if (result) {

 return `Element ${element} is not found`;

 }
}
console.log(binarySearch(myArray, 5));
</code></pre>

&nbsp;

Binary Search Algorithm in JavaScript

Linear Search Algorithm in JavaScript

<pre>
<code class="language-javascript">
let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

function linearSearch(arr, element) {

 for (let i = 0; i &lt; arr.length; i++) {

 if (arr[i] === element) {

 return `Element ${element} found in index ${i}`;

 }

 }

 return `Element ${element} is not found`;
}

console.log(linearSearch(myArray, 5));
</code></pre>

&nbsp;

Linear Search Algorithm in JavaScript

Queue Data Structure in JavaScript

<pre>
<code class="language-javascript">let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

class Queue{
 constructor() {

 this.items=[]

 }

 enqueue(element) {

 this.items.push(element)
 }

 dequeue() {

 if (this.items.length == 0) {

 return `Queue is empty`;
 }

 return this.items.shift()
 }

 peek() {
 
 if (this.items.length == 0) {

 return `Queue is empty`;
 }

 return this.items[0]
 
 }

 getSize() {

 return this.items.length;
 }

 isEmpty() {

 if (this.items.length == 0) {
 return true
 }

 return false
 }
}

const queue = new Queue()
queue.enqueue(50)
queue.enqueue(200)
queue.enqueue(500)
console.log(queue.dequeue());
console.log(queue.peek());
console.log(queue.getSize());
console.log(queue.isEmpty());

</code></pre>

&nbsp;

Queue in JavaScript

Stack Data Structure in JavaScript

<pre>
<code class="language-javascript">let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];


class Stack{

 constructor() {

 this.items=[]
 }

 push(element) {

 this.items.push(element)

 }

 pop() {

 if (this.items.length == 0) {

 return `Stack is empty`;
 }

 return this.items.pop()
 }

 peek() {
 
 if (this.items.length == 0) {

 return `Stack is empty`;
 }

 return this.items[this.items.length-1]
 
 }

 getSize() {

 return this.items.length;
 }

isEmpty() {

 if (this.items.length == 0) {
 return true
 }

 return false
}
}

const stack = new Stack()
stack.push(50)
stack.push(200)
stack.push(500)
console.log(stack.pop());
console.log(stack.peek());
console.log(stack.getSize());
console.log(stack.isEmpty());


</code></pre>

&nbsp;

Stack in JavaScript

In this article going to show how we can pass data between components.

This is very simple in react

In this example we send data App component to Profile component

&nbsp;

<h1>App component</h1>

<pre>
<code class="language-javascript">import React from "react";
import Profile from "./compontents/Profile";

export default function App() {

 return (
 &lt;&gt;
 &lt;Profile userName={"Admin"} email={"example@gmail.com"}&gt;&lt;/Profile&gt;
 &lt;/&gt;
 );

}
</code></pre>

<h1>&nbsp;</h1>

<h1>Profile component</h1>

<pre>
<code class="language-javascript">import React from "react";

export default function Profile({ userName, email }) {

 return (
 &lt;&gt;
 &lt;p&gt;usaename: {userName}&lt;/p&gt;
 &lt;p&gt;usaename: {email}&lt;/p&gt;
 &lt;/&gt;
 );

}
</code></pre>

&nbsp;

Passing data between component

In this article going to show how we can pass function between components.

This is very simple in react

In this example we pass a function App component to Profile component

&nbsp;

<h1>App component</h1>

<pre>
<code class="language-javascript">import React from "react";
import Profile from "./compontents/Profile";

export default function App() {

 const sayHello = () =&gt; {
 alert("Hi, I am a function from app component")
 }

 return (
 &lt;&gt;
 &lt;Profile sayHello={sayHello}&gt;&lt;/Profile&gt;
 &lt;/&gt;
 );

}
</code></pre>

<h1>&nbsp;</h1>

<h1>Profile component</h1>

<pre>
<code class="language-javascript">import React from "react";

export default function Profile({ sayHello}) {

 return (
 &lt;&gt;
 &lt;button onClick={sayHello}&gt;Click here&lt;/button&gt;
 &lt;/&gt;
 );

}
</code></pre>

&nbsp;

Passing function between component

Hi there , in this article I am going to show, how call API from react component or&nbsp;fetching data from backend API using react hook and axios library

Very first need to install axios using NPM command like bellow

<pre>
<code class="language-javascript">npm i axios</code></pre>

&nbsp;

Then import useState, useEffect hook from react, axios from axios and start working

&nbsp;

<h1>Code Example</h1>

<pre>
<code class="language-javascript">import React, { useEffect, useState } from "react";
import axios from "axios";

export default function App() {

 const [products, setProducts] = useState([]);
 const [err, setErr] = useState();

 const getData = async () =&gt; {

 try {

 const { data } = await axios.get(`Put your API end point here`);
 {
 /*You can use this fack API end point for testing `https://fakestoreapi.com/products` */
 }

 setProducts(data);

 } catch (error) {
 setErr(error.message);
 }

 };

 useEffect(() =&gt; {
 getData();
 }, []);

 return (
 &lt;&gt;

 &lt;p&gt;{err ? err : null}&lt;/p&gt;

 &lt;div&gt;

 {products ? (
 products.map((product) =&gt; {

 return (
 &lt;div key={product.id}&gt;
 &lt;h1&gt;{product.title}&lt;/h1&gt;
 &lt;p&gt;{product.description}&lt;/p&gt;
 &lt;/div&gt;
 );

 })
 ) : (
 &lt;p&gt;Data is loadin...&lt;/p&gt;
 )}

 &lt;/div&gt;

 &lt;/&gt;
 );
}
</code></pre>

&nbsp;

Calling API or fetching data from backend API in reactjs

To use&nbsp;bootstrap&nbsp;CDN with react js you need to add bootstrap cdn in index.css file in react app

<h1>Example</h1>

<pre>
<code class="language-javascript">@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css");
</code></pre>

That&#39;s it ,Now you are ready to use bootstrap classes with react components

<h1>Thank you</h1>

How to use bootstrap cdn with reactjs

<h1>How to conditionally&nbsp;return JSX from react components</h1>

<h1>Example</h1>

<pre>
<code class="language-javascript">import React, { useState } from "react";

export default function App() {

 const [user, setUser] = useState(false);

 return user ? &lt;Profile /&gt; : &lt;Login /&gt;;
}

const Profile = () =&gt; {
 return &lt;h1&gt;This is profile page&lt;/h1&gt;;
};

const Login = () =&gt; {
 return &lt;h1&gt;This is login page&lt;/h1&gt;;
};
</code></pre>

&nbsp;

How to conditionally return JSX from react components

<h1>How to conditionally apply display block and show</h1>

<h1>Example</h1>

<pre>
<code class="language-javascript">import React, { useState } from "react";

export default function App() {
 const [show, setShow] = useState(false);

 return (
 &lt;&gt;

 &lt;div style={{ display: show ? "none" : "block" }}&gt;

 &lt;h1&gt;First page&lt;/h1&gt;
 &lt;button onClick={() =&gt; setShow(true)}&gt;Show Second Page&lt;/button&gt;

 &lt;/div&gt;

 &lt;div style={{ display: show ? "block" : "none" }}&gt;

 &lt;h1&gt;Second page&lt;/h1&gt;

 &lt;/div&gt;

 &lt;/&gt;
 );
}
</code></pre>

&nbsp;

Conditionally apply display block and show in reactjs

Read input field value in reactjs using react hook

<h1>Example</h1>

<pre>
<code class="language-javascript">import React, { useState } from "react";

export default function App() {

 const [name, setName] = useState();

 return (
 &lt;&gt;

 &lt;p&gt;{name}&lt;/p&gt; 

 &lt;input

 type="text"

 onChange={(e) =&gt; setName(e.target.value)}

 placeholder="Type your name"

 &gt;&lt;/input&gt;

 &lt;/&gt;
 );
}
</code></pre>

&nbsp;

How to read input field value in reactjs

In this article we are going to see the way how we can pass children in react.&nbsp;

Children is nothing but whatever we pass inside of a component at the time of calling a componenet like props.

See example bellow.

In this example going to create tow react component App, Layout and from app componenet we pass some content App component to Layout&nbsp;component 

See example bellow

<h1>Layout.jsx</h1>

<pre>
<code class="language-javascript">import React from "react";
export default function Layout({ children }) {
 return (
 &lt;&gt;
 &lt;h1&gt;This is layout page&lt;/h1&gt;
 &lt;div&gt;{children}&lt;/div&gt;
 &lt;/&gt;
 );
}
</code></pre>

&nbsp;

<h1>App.jsx</h1>

<pre>
<code class="language-javascript">import React from "react";
import Layout from "./compontents/Layout";

export default function App() {

 return (

 &lt;Layout&gt;

 {/* whatever we pass from here we can access inside layout component as a chilrder by distructuring props */}

 &lt;h3&gt;This is children text&lt;/h3&gt;

 &lt;p&gt;
 In publishing and graphic design, Lorem ipsum is a placeholder text
 commonly used to demonstrate the visual form of a document or a typeface
 without relying on meaningful content. Lorem ipsum may be used as a
 placeholder before the final copy is available
 &lt;/p&gt;


 &lt;/Layout&gt;
 );
}
</code></pre>

&nbsp;

Passing children in reactjs

To apply style in JSX we need to pass a javaScript object like bellow

&nbsp;

<h1>Example</h1>

<pre>
<code class="language-javascript">import React from "react";

export default function App() {
 return (
 &lt;div
 style={{
 width: "80%",
 margin: "auto",
 background: "gray",
 textAlign: "center",
 color: "white",
 padding: "20px",
 fontSize: "25px",
 fontWeight:"800"
 }}
 &gt;
 Apply Style in React JS
 &lt;/div&gt;
 );
}
</code></pre>

&nbsp;

Apply style in JSX

In this article I am going to show display data to web page in react using map function

<h1>Example</h1>

<pre>
<code class="language-javascript">import React from "react";
export default function App() {

 const products = [

 {
 id: 1,
 name: "iPhone",
 price: 654,
 },
 {
 id: 2,
 name: "Samsung",
 price: 454,
 },
 {
 id: 3,
 name: "Nokia",
 price: 214,
 },

 ];

 return (
 &lt;div&gt;

 {products
 ? products.map((product) =&gt; {

 return (
 &lt;div key={product.id}&gt;
 &lt;p&gt;Name: {product.name}&lt;/p&gt;
 &lt;p&gt;Price: {product.price}&lt;/p&gt;
 &lt;/div&gt;
 );

 })
 : null}

 &lt;/div&gt;
 );
}
</code></pre>

&nbsp;

How to display data in ract js using map function

&nbsp;

Hi friend in this article I am going to describe what exactly encapsulation and emplemation in JavaScript

In a simple word encapsulation is defined as the wrapping up of data and method under a single unit.

&nbsp;

<h1>Example</h1>

<pre>
<code class="language-javascript">class Person {

 constructor(name, phone, email) {
 this.name = name;
 this.phone = phone;
 this.email = email;
 }

 getPersonName() {
 return this.name;
 }

 getPersonPhone() {
 return this.phone;
 }

 getPersonEmail() {
 return this.email;
 }

}

const ob = new Person("Mahbub Hasan", 88021344444, "example@gmail.com");
console.log(ob.getPersonName());
console.log(ob.getPersonPhone());
console.log(ob.getPersonEmail());</code></pre>

&nbsp;

Encapsulation in JavaScript

&nbsp;

In this article going to show what exactly inheritance and implementation in javaScrip

In a simple word inheritance&nbsp;is the procedure in which one class&nbsp;inherits&nbsp;the attributes and methods of another class.

<h1>Example</h1>

<pre>
<code class="language-javascript">class Car {
 constructor(name, model) {
 this.name = name;
 this.model = model;
 }

 startEngine() {
 console.log(`${this.name}'s engine has been started`);
 }

 stopEngine() {
 console.log(`${this.name}'s engine has been stoped`);
 }

}

class Tesla extends Car {

 constructor(name, model, speed) {

 super(name, model);

 this.speed = speed;
 }

 carSpeed() {
 console.log(`${this.name} speed is now ${this.speed}`);
 }

}

const ob = new Tesla(`Nikola Tesla`, `Tesla Model S`, 250);
ob.startEngine();
ob.carSpeed();
ob.stopEngine();</code></pre>

&nbsp;

Inheritance in javaScript

In this article going to show what exactly abstruction and implementation in javaScrip

In a simple word abstraction&nbsp;is way of hiding complexity and&nbsp;internal details and showing the essential features of the user.

<h1>Example</h1>

<pre>
<code class="language-javascript">class Bank {

 constructor(customerName, deposit, month) {
 this.customerName = customerName;
 this.deposit = deposit;
 this.timeInMonth = month;
 this.interest = 0;
 }

 checkAccountInfo() {

 this.calculateInterest();

 console.log(
 `Customer name: ${this.customerName} - deposit: ${this.deposit} - after ${this.timeInMonth} months - interest: ${this.interest}`
 );

 }

 calculateInterest() {

 switch (this.timeInMonth) {
 case 6: {
 this.interest = this.calculatePercent(20);
 break;
 }
 case 8: {
 this.interest = this.calculatePercent(30);
 break;
 }
 case 12: {
 this.interest = this.calculatePercent(50);
 break;
 }
 default: {
 this.interest = 0;
 }
 }

 }

 calculatePercent(percent) {
 return Math.floor((percent / 100) * this.deposit);
 }

}

const ob = new Bank(`Mahbub Hasan`, 50000, 6);
ob.checkAccountInfo();</code></pre>

&nbsp;

Abstruction in JavaScript

&nbsp;

In this article going to show what exactly pholimolphysome and implementation in javaScrip

In a simple word pholimolphysome is&nbsp;the provision of a single interface to entities of different types.

&nbsp;

<h1>Example</h1>

<pre>
<code class="language-javascript">class Car {
 constructor(name, model) {
 this.name = name;
 this.model = model;
 }

 startEngine() {
 console.log(`${this.name}'s engine has been started`);
 }

 stopEngine() {
 console.log(`${this.name}'s engine has been stoped`);
 }

 showCarInfo() {
 console.log(`Car name: ${this.name} - car Model: ${this.model}`);
 }

}

class Tesla extends Car {

 constructor(name, model, speed) {
 super(name, model);
 this.speed = speed;
 }

 // This called method overriding
 showCarInfo() {
 console.log(
 `Car name: ${this.name} - Model: ${this.model} - Speed: ${this.speed}`
 );
 }
}

const ob = new Tesla(`Nikola Tesla`, `Tesla Model S`, 250);
ob.startEngine();
ob.stopEngine();
ob.showCarInfo();
</code></pre>

&nbsp;

Pholimolphysome in JavaScript

&nbsp;

We can use JavaScript filter method to filter data

For data I am going to create a data.js file and put here some product object inside array like bellow but you can call api or something like this what are you need.

&nbsp;

<h1>data.js</h1>

<pre>
<code class="language-javascript">
export default [

 {
 id: 1,
 name: "Phone",
 category: "phone",
 price: 333,
 },
 {
 id: 2,
 name: "Laptop",
 category: "laptop",
 price: 533,
 },
 {
 id: 3,
 name: "iMac",
 category: "desktop",
 price: 633,
 }

];
</code></pre>

&nbsp;

Now I am going to create a component called Mobile.jsx and import data.js file to use. Inside useState hook applay filter method to filtering product based on product category

&nbsp;

<h1>Mobile.jsx</h1>

<pre>
<code class="language-javascript">import React, {useState } from "react";
import data from "data";
export default function Mobile() {
 const [products, setProduct] = useState(data.filter((x) =&gt; x.category == "phone"));
 
 return (
 &lt;&gt;
 
 &lt;h1&gt;Display Sorted Products&lt;/h1&gt;
 &lt;div&gt;
 {products &amp;&amp;
 products.map((product) =&gt; {
 return (
 &lt;div key={product.id}&gt;
 &lt;div&gt;
 &lt;img src={product.img} height={300} width={280}&gt;&lt;/img&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;p&gt;Name: {product.name}&lt;/p&gt;
 &lt;p&gt;Price: {product.price}&lt;/p&gt;
 &lt;button type="button"&gt;Add to cart&lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
 })}
 &lt;/div&gt;
 &lt;/&gt;
 );
}
</code></pre>

&nbsp;

How to filter data in reactjs based on category

&nbsp;

Double(==) vs&nbsp; triple(===) equals in JavaScript

In JavaScript == and === both are used to compare value only difference is in checking data type.

Double (==) equal check value but ignore data type where triple (===) equal chack data type also

Double(==) vs triple(===) equals javascript

&nbsp;

Array.filter()

&nbsp;

Filter method is used to filtering a array based on a condition. This method takes a callback method inside this method we need to give a condition if condition is true then return value see example bellow

&nbsp;

<h1>Example</h1>

<pre>
<code class="language-javascript">let myArray = [1, 2, 4, 3, 5, 6, 7, 8, 9]

let result = myArray.filter((x) =&gt; x &lt;= 5);

console.log(result);
</code></pre>

&nbsp;

In this example we filter this array by using this condition number &lt;= 5

Filter method in javascript

&nbsp;

Destructuring is a JavaScript expression that&nbsp;allows us to extract data from arrays, objects, and maps and set them into new, distinct variables.

<h1>Example of object&nbsp;Destructuring </h1>

<pre>
<code class="language-javascript">let person = {

 name: "xyz",
 phone: "8801625444",
 email:"example@gmail.com"

}

const { phone } = person;
console.log(phone);
</code></pre>

&nbsp;

Destructuring in JavaScript

&nbsp;

<h1>Spread syntax (...)</h1>

Spread syntax can be used when all elements from an object or array need to be included in a list of some kind.

<pre>
<code class="language-javascript">let arrayA = [1, 2, 4, 6];
let arrayB = [3, 5, 6, 8, 9];

let arrayC=[...arrayA,...arrayB]
console.log(arrayC);</code></pre>

&nbsp;

Spread Operator in Javascript

switch case in javaScript

Switch case like if else statement

<h1>Example</h1>

<pre>
<code class="language-javascript">let option = 'c';

switch (option) {
 case "a": {
 console.log("Option matched with a");
 break;
 }
 case "b": {
 console.log("Option matched with b");
 break;
 }
 case "c": {
 console.log("Option matched with c");
 break;
 }
 default: {
 console.log("Default option");
 }
}

</code></pre>

&nbsp;

Switch case in javaScript

When we need to do same or semiler work we need to use for loop

<h1>Syntex</h1>

<pre>
<code class="language-javascript">for (initialization; condition; update){
 //code here
}</code></pre>

<h1>Example</h1>

<pre>
<code class="language-javascript">for (let i = 0; i &lt; 6; i++){
 console.log("Hello Devpeogrammer");
}</code></pre>

&nbsp;

In this example we have print &quot;Hello Devprogrammer&quot; 6 times

For loop in javascript

<h1>Syntex (``)</h1>

Template&nbsp;literals&nbsp;use instead of double or single quotes.It&#39;s easy to use variable with string see example bellow

&nbsp;

<h1>Example</h1>

<pre>
<code class="language-javascript">let number = 10;

console.log(`The number is: ${number}`);</code></pre>

&nbsp;

Template literals javascript

let, const and var keyword used to define a variable in Jacascript but there are deffence between then

Let const and var in Javascript

&nbsp;

First thing you need to create a folder named what are you like In my case I am going to put my folder name is backend.

&nbsp;

Make sure you have installed node in your machine.

&nbsp;

Now inside this folder open terminal and execute some command.

<pre>
<code class="language-javascript">npm init -y</code></pre>

This command will create a JSON file with some information.This command basically initialize your node application.

Now you need to create a index.js inside backend folder.That&#39;s it.

&nbsp;

Your node application is ready.Start coding in index.js file.

To run this application open terminal from backend folder and execute this command

<pre>
<code class="language-javascript">npm star</code></pre>

&nbsp;

Go to browser and type localhost:3000 ,Now you should see the output in browser.

How to create a node app

Very first we need to create a node application and install express

Installing express

<pre>
<code class="language-javascript">npm i express</code></pre>

If you don&#39;t know how to create a node application check this link bellow

<a href="https://devprogrammer.com/how-to-create-a-node-app" target="_blank">Create a node application</a>&nbsp;

Create a js file under root folder in this case I am going to put file name index

<h2>index.js</h2>

<pre>
<code class="language-javascript">import express from "express";
const app = express();

//get request
app.get("/", (req, res) =&gt; {

 res.send("Hello World");

})

app.listen(5000, () =&gt; {

 console.log(`Server is running on port 5000`);

})</code></pre>

&nbsp;

Basic node express api

&nbsp;

In this article I am going to show CRUD(Create, Read, Update Delete) operation using React and firebase

&nbsp;

In this example I am not going to show you firebase setup&nbsp;I am assume that you have a firebase project and want to work on it.

&nbsp;

Copy your firebase configaration info from your frirebase project

Cretae a file called firebase-config under project root folder or what are you like I am going to create this file inside src folder and setup this file like bellow

&nbsp;

<h2>firebase-config.js</h2>

<pre>
<code class="language-javascript">import { initializeApp } from "firebase/app";
const firebaseConfig = {
 apiKey: "",
 authDomain: "",
 projectId: "",
 storageBucket: "",
 messagingSenderId: "",
 appId: "",
};

export const app = initializeApp(firebaseConfig);
</code></pre>

&nbsp;

Now, ready to start working our react project........

<h2>app.js</h2>

<pre>
<code class="language-javascript">import React, { useState, useEffect } from "react";
import { getFirestore } from "firebase/firestore";
import { app } from "../src/firebase-config";

import {
 collection,
 getDocs,
 addDoc,
 doc,
 deleteDoc,
 updateDoc,
} from "firebase/firestore";

export default function App() {

 const [products, setProduct] = useState({
 productName: String,
 price: Number,
 });

 const db = getFirestore(app);

 //setup a firebase collection
 const collectionRef = collection(db, "productColl");

 //save data to firebase
 const addProduct = async () =&gt; {

 if (!products.productName || !products.price) {
 alert("Product object is empty");

 } else {

 //Create new collection in firebase
 await addDoc(collectionRef, { ...products });
 //page reloading
 window.location.reload();

 }

 };

 useEffect(() =&gt; {

 //get data from firebase
 const getProduct = async () =&gt; {

 //Read collections from firebase
 const data = await getDocs(collectionRef);
 setProduct(data.docs.map((doc) =&gt; ({ ...doc.data(), id: doc.id })));

 };
 getProduct();

 }, []);

 //update product
 const updateProduct = async (id) =&gt; {

 let productName, price;

 //take user input
 productName = prompt("Enter new name:");
 price = prompt("Price:");

 //Prepare a specifie collection to update using doc()
 //doc(db, "collection name", collection id)
 const productDoc = doc(db, "productColl", id);

 //cretae a new object with new value
 const newValue = {
 productName: productName ? productName : products.productName,
 price: price ? Number(price) : products.price,
 };

 if (window.confirm("Do you want to update?") === true) {

 //Update a collection in firebase
 await updateDoc(productDoc, { ...newValue });

 //page reloading
 window.location.reload();
 }
 };

 //delete data from firebase
 const dalateProduct = async (id) =&gt; {

 //Prepare a specifie collection to dalete using doc()
 //doc(db, "collection name", collection id)
 const productDoc = doc(db, "productColl", id);

 if (window.confirm("Do you want to delate?") === true) {

 //Delete a collection from firebase
 await deleteDoc(productDoc);

 //page reloading
 window.location.reload();
 }
 };

 return (
 &lt;div&gt;
 &lt;h1&gt;CRUD Operation using firebase &amp; React&lt;/h1&gt;
 &lt;input
 type="text"
 onChange={(e) =&gt;
 setProduct({ ...products, productName: e.target.value })
 }
 placeholder="Product name"
 &gt;&lt;/input&gt;
 &lt;input
 type="number"
 onChange={(e) =&gt; setProduct({ ...products, price: e.target.value })}
 placeholder="Product price"
 &gt;&lt;/input&gt;
 &lt;button type="button" onClick={() =&gt; addProduct()}&gt;
 Save
 &lt;/button&gt;
 
 &lt;h1&gt;All product list&lt;/h1&gt;
 {products.length &gt; 0
 ? products.map((product) =&gt; {
 return (
 &lt;div key={product.id}&gt;
 &lt;p&gt;Name: {product.productName}&lt;/p&gt;
 &lt;p&gt;Price: {product.price}&lt;/p&gt;
 &lt;button onClick={() =&gt; updateProduct(product.id)} type="button"&gt;
 Update
 &lt;/button&gt;
 &lt;button onClick={() =&gt; dalateProduct(product.id)} type="button"&gt;
 Delete
 &lt;/button&gt;
 &lt;/div&gt;
 );
 })
 : null}
 &lt;/div&gt;
 );
}
</code></pre>

&nbsp;

All Article List

About Author

Hi, I am Mahbub Hasan
Software Engineer

Thank You

All Article List

About Author

Hi, I am Mahbub HasanSoftware Engineer

Thank You

Hi, I am Mahbub Hasan
Software Engineer