Asynchronous in Javascript

Hello viewers, whats up!! Here i am back again with the new post of asynchronous in javascript. Javascript is a high level programming language used for known as web development. With this you can create dynamic and interactive content on websites.

Syntax is similar to that of other programming languages like java and C. It is client side scripting language and when we talk about its Data types , it is support various data types, including numbers, strings booleans objects, arrays and functions.

Asynchronous 

In JavaScript, asynchronous programming is a way to handle operations that might take some time to complete, such as reading from a file, making a network request, or waiting for a user input. Asynchronous programming helps prevent blocking the execution of code, allowing other tasks to continue while the asynchronous operation is being performed.

Note - Asynchronous in Javascript = CLICK HERE

How is it works?

The asynchronous working process in JavaScript involves handling tasks that might take some time to complete without blocking the execution of the entire program. This is crucial for web development, where operations like fetching data from an API, reading files, or responding to user input may introduce delays.

Let's code

let a = 20;
let b = 0;

let waitingData = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(30)
    }, 2000)
})

waitingData.then((data) => {
    b=data;
    console.log(a+b)
})

Explaination

1) Variable Declaration

let a = 20;
let b = 0;


Two variables, a and b, are declared and initialized with values 20 and 0, respectively.



2) Promise Creation:



let waitingData = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(30)
    }, 2000)
})


A new Promise named waitingData is created.

The promise executor function is provided, which has two parameters: resolve and reject.

Inside the executor function, a setTimeout is used to simulate an asynchronous operation. After 2000 milliseconds (2 seconds), the promise is resolved with the value 30.



3) Promise Handling:

waitingData.then((data) => {
    b = data;
    console.log(a + b);
})


The then method is called on the waitingData promise, which registers a callback function to be executed when the promise is resolved.

The callback function takes a parameter data, which is the resolved value of the promise (in this case, 30).

Inside the callback, the variable b is assigned the value of data (which is 30).

The sum of a and b (20 + 30) is then logged to the console, resulting in the output 50.

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Asynchronous in Javascript

Hello viewers, whats up!! Here i am back again with the new post of asynchronous in javascript. Javascript is a high level programming language used for known as web development. With this you can create dynamic and interactive content on websites.

Syntax is similar to that of other programming languages like java and C. It is client side scripting language and when we talk about its Data types , it is support various data types, including numbers, strings booleans objects, arrays and functions.

Here we have a problem about Asynchronous execution in javascript. Question is  suppose that we have 3 execution in one program

#    first one takes 2 seconds
#    second one takes 5 seconds and
#    third one takes 1 seconds
    
 

but execution is coded in line by line first, second, third. So, in case of Asynchronous and yeah javascript is an Asynchronous language but which one is printed first. First we need to understand what is Asynchronous and how is it works?
    
    

Asynchronous 

In JavaScript, asynchronous programming is a way to handle operations that might take some time to complete, such as reading from a file, making a network request, or waiting for a user input. Asynchronous programming helps prevent blocking the execution of code, allowing other tasks to continue while the asynchronous operation is being performed.

How is it works?

The asynchronous working process in JavaScript involves handling tasks that might take some time to complete without blocking the execution of the entire program. This is crucial for web development, where operations like fetching data from an API, reading files, or responding to user input may introduce delays.

Let's code

setTimeout(() => {
    console.log("technically, I am the first person")
    }, 2000);   // 2 seconds


setTimeout(() => {
console.log("technically, I am the second person") 
}, 5000);    // 5 seconds


setTimeout(() => {
    console.log("technically, I am the third person") 
    }, 1000);   // 1 second 

    

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

let vs var using setTimeout in javascript

Hello viewers, whats up!! Here i am back again with the new post of let vs var using setTimeout in javascript. Javascript is a high level programming language used for known as web development. With this you can create dynamic and interactive content on websites.

Syntax is similar to that of other programming languages like java and C. It is client side scripting language and when we talk about its Data types , it is support various data types, including numbers, strings booleans objects, arrays and functions.

Here we have a problem about setTimeout in javascript. Question is that there are two types of using var and let in setTimeout,  So, in javascript might be same but little bit difference because of if we use var with setTimeout and forloop then same number print many times (We will give you as many numbers as you want in the loop).

 when we use let in setTimeout and forloop then output is simple looping number printed.

Let's Code

for (var i=0; i<3; i++)
{
    setTimeout(() => {
        console.log("When we use of var with setTimeout", i);  
    })
}

//www.kumaratuljaiswal.in

for (let i=0; i<3; i++)
{
    setTimeout(() => {
        console.log("when we use of let with setTimeout", i);
    })
}

Question from setTimeout in Javscript - CLICK HERE

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Hello viewers, whats up!! Here i am back again with the new post of question about setTimeout in javascript. Javascript is a high level programming language used for known as web development. With this you can create dynamic and interactive content on websites.

Syntax is similar to that of other programming languages like java and C. It is client side scripting language and when we talk about its Data types , it is support various data types, including numbers, strings booleans objects, arrays and functions.

Here we have a problem about setTimeout in javascript. Question is that there so 6 line of code in javascript. So simply use arrow function and for output we use console.log and after that we have to used setTimeout function and tell that what is the output and which output print first. Look like this -

Code 

(function() {
      console.log("a");
      setTimeout(() => console.log("b"), 1000);
      console.log("c");
      setTimeout(() => console.log("d"), 500);
})();

1) console.log("a"); - Outputs "a" to the console.


2) setTimeout(() => console.log("b"), 1000); - Schedules the execution of the function () => console.log("b") after a delay of 1000 milliseconds (1 second).
   
 
3) console.log("c"); - Outputs "c" to the console.
    

4) setTimeout(() => console.log("d"), 500); - Schedules the execution of the function () => console.log("d") after a delay of 500 milliseconds (0.5 seconds).


Now, let's consider the timing:


#:/    "a" is logged immediately.
#:/    "b" is scheduled to be logged after 1 second.
#:/    "c" is logged immediately.
#:/    "d" is scheduled to be logged after 0.5 seconds.


However, JavaScript is single-threaded, and the event loop is used to manage the execution of asynchronous code. The scheduled functions (like "b" and "d") are placed in the event queue and executed when the call stack is empty.



So, the output order will be:

    "a"
    "c"
    "d"
    "b"

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

React Share  Social Media Button in Reactjs

Hello viewers, i am back again for you and now we will start from reactjs. So, we are ready for implemenation of react-share-social-media-button in reactjs and set result. Actually we are making some project like E-commerce where we can implement react social media icon as a shareable.

React

Topic we will cover -

# Install npm install react-rating-star-with-type

# Implementation of rating start

# Output

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/add-routing-and-make-cart-page.html

Install Social Media button React

Here, we will install library of reactjs (npm install react-share) in cmd prompt, terminal whatever.

Now, we are ready to code of react social media shareable button using with this library. After installation of  react-share-social-media-button. We are building an E-Commerce website using Redux.

First we import this library.

import { FacebookIcon, FacebookShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from 'react-share'

Now we are using social media name button JSX tag.

 <FacebookShareButton
            url={'https://facebook.com/share.php?u=http://localhost:5173/exclusivecollection'}
            quote={'Printed Shirt'}
            hashtag="#mfo">
              <FacebookIcon size={32} round />
            </FacebookShareButton>
             
            <WhatsappShareButton
            url={'http://localhost:5173/exclusivecollection'}
            quote={'Printed Shirt'}
            hashtag="#mfo">
              <WhatsappIcon size={32} round />
            </WhatsappShareButton>
             
              
            <TwitterShareButton
            url={'http://localhost:5173/exclusivecollection'}
            quote={'Printed Shirt'}
            hashtag="#mfo">
              <TwitterIcon size={32} round />
            </TwitterShareButton>

# The FacebookShareButton component is used for the Facebook share button.
 
# It takes props like url, quote, and hashtag, specifying the URL, quote, and hashtag to be shared on Facebook.
 
# The FacebookIcon component is nested inside, indicating the appearance of the button.

# As a localhost it is our localhost url but you can set domain name and your url where site is located.

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Search product with API

Hello viewers, i am back again for you and now we will start from reactjs. So, we are ready for implemenation of react-rating-start in reactjs and set result. Actually we are making some project like E-commerce where we can implemen react rating start.

React

Topic we will cover -

# Install npm install react-rating-star-with-type

# Implementation of rating start

# Output

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/add-routing-and-make-cart-page.html

Install React Rating Start 

Here, we will install library of reactjs (npm install react-rating-star-with-type) in cmd prompt, terminal whatever.

Implementation of React Rating Start

Now, we are ready to code of react rating star using with this library. After installation of react rating start. We are building an E-Commerce website using Redux.

First we import this library.

import ReactStars from 'react-rating-star-with-type';

Now we are using useState hooks for change the static state value of rating start when user hover on rating start with onChange event handler change the color.

  const [star, setStar] = useState(5);
   const onChange=(nextValue) => {
    setStar(nextValue)
   }

 <ReactStars classNames=" " onChange={onChange} value={4.2} edit={true} activeColors={[ "yellow", "red"]} 
    />

 1. classNames: This prop allows you to pass additional CSS classes to the component. In your example, it is an empty string (" "). This can be useful for styling the component with custom CSS.

2.onChange: This prop specifies a callback function that will be called whenever the user changes the rating by clicking on the stars. In your example, it refers to a function named onChange. You need to define this function elsewhere in your code to handle the rating changes.

3. value: This prop sets the initial value of the star rating. In your example, it's set to 4.2. This means that initially, the component will display 4.2 stars filled.

4. edit: This prop determines whether the user can interact with the stars to change the rating. When set to true, users can click on the stars to modify the rating; when set to false, the stars are essentially read-only. In your example, it's set to true, indicating that the user can edit the rating.

5. activeColors: This prop sets the color of the active (filled) stars. In your example, it's an array containing one color, "yellow". This means that the filled stars will be displayed in yellow

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Search product with API

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of Search product with API in react redux saga and set result. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

React

Topic we will cover -

# Make Search box and Add style

# Make Action and Saga

# Call API for search product

# Test API result

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/add-routing-and-make-cart-page.html

Make Search box and Add style

We will make a search bar first with tailwind style css in Header.jsx where user can search anything about product. We will use tailwind css for adding style.

 Header.jsx

 <div className="max-w-[1040px] shadow-xl mx-auto min-h-[40px] p-3 ">
        <div className="pt-2">
          <input
            type="search"
            placeholder="Search the Product"
            className="w-full pl-3 pr-3 pt-2 pb-2 border border-blue-700 rounded text-slate-600  "
             
          />
        </div>
      </div>

 Make Action and Saga

Now we will make action file (already have been created - please check our previous blog).

ProductAction.jsx

Here we import first PRODUCT_SEARCH as a constant from constant.jsx file and then make const productSearch and inside this arrow function we pass a query this will be useful as a parameter when we search anything from searchbar and return type (same as constant file).

import { PRODUCT_SEARCH } from "./Constant";

export const productSearch = (query) => {
    return {
        type: PRODUCT_SEARCH,
        query,
    }
}

Constant.jsx

Now we will call from header.jsx file

import { useSelector, useDispatch } from "react-redux";
  import {productSearch } from '../redux/ProductAction';
  
  const dispatch = useDispatch();
  
   <div className="max-w-[1040px] shadow-xl mx-auto min-h-[40px] p-3 ">
        <div className="pt-2">
          <input
            type="search"
            placeholder="Search the Product"
            className="w-full pl-3 pr-3 pt-2 pb-2 border border-blue-700 rounded text-slate-600  "
            onChange={(event) => dispatch(productSearch(event.target.value))}
          />
        </div>
      </div>
  

productSaga.jsx

function* searchProduct(data) {
    let result = yield fetch(`http://localhost:3000/products?q=${data.query}`);
    result = yield result.json();
    console.log("product search is called", data);
    yield put({type: SET_PRODUCT_LIST, data:result})

    if (result.length === 0){
        console.log("not found");
    }
}

function* ProductSaga() {
 yield takeEvery(PRODUCT_SEARCH, searchProduct)

}

Whole Code (Header.jsx)

import React from "react";
import { BsFillCartPlusFill } from "react-icons/bs";

import { useSelector, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";

import {productSearch } from '../redux/ProductAction';

const Header = () => {
  const result = useSelector((state) => state.cartData);
  console.log("redux data in header", result);

  const dispatch = useDispatch();

  const navigate = useNavigate();

  return (
    <div>
      <div className="bg-[#434be6] p-4 w-full relative">
        <div className=" flex justify-between mx-auto px-2   items-center  ">
          <div>
            <h1
              className="text-white font-bold cursor-pointer"
              onClick={() => navigate("/")}
            >
              E-Commerce
            </h1>
          </div>

          <div className="cursor-pointer" onClick={() => navigate("/cart")}>
            <span className="bg-green-500  rounded-xl px-1 absolute text-[12px] top-[9px]  right-7 text-white border border-black">
              {result.length}
            </span> 

            <BsFillCartPlusFill size={30} className="" />
          </div>
        </div>
      </div>

      <div className="max-w-[1040px] shadow-xl mx-auto min-h-[40px] p-3 ">
        <div className="pt-2">
          <input
            type="search"
            placeholder="Search the Product"
            className="w-full pl-3 pr-3 pt-2 pb-2 border border-blue-700 rounded text-slate-600  "
            onChange={(event) => dispatch(productSearch(event.target.value))}
          />
        </div>
      </div>
    </div>
  );
};

export default Header;

Constant.jsx

export const  ADD_TO_CART  = "ADD_TO_CART";
export const  REMOVE_TO_CART  = "REMOVE_TO_CART";
export const  EMPTY_CART  = "EMPTY_CART";
export const PRODUCT_LIST = "PRODUCT_LIST";
export const SET_PRODUCT_LIST = "SET_PRODUCT_LIST";
export const PRODUCT_SEARCH = "PRODUCT_SEARCH";



//www.kumaratuljaiswal.in #www.hackingtruth.in

ProductAction.jsx

import { PRODUCT_LIST,PRODUCT_SEARCH } from "./Constant";

    export const productList =  () =>  {

    return {
        type: PRODUCT_LIST,

    }
}

export const productSearch = (query) => {
    return {
        type: PRODUCT_SEARCH,
        query,
    }
}

ProductSaga.jsx

import { takeEvery, put } from 'redux-saga/effects';
import {ADD_TO_CART, PRODUCT_LIST, PRODUCT_SEARCH, SET_PRODUCT_LIST} from './Constant';

function* getProducts(){
 
     let data = yield fetch(`http://localhost:3000/products`);
     data = yield data.json();
     yield put({ type: SET_PRODUCT_LIST, data})

 
}
 

function* searchProduct(data) {
    let result = yield fetch(`http://localhost:3000/products?q=${data.query}`);
    result = yield result.json();
    console.log("product search is called", data);
    yield put({type: SET_PRODUCT_LIST, data:result})

    if (result.length === 0){
        console.log("not found");
    }
}


function* ProductSaga() {
 yield takeEvery(PRODUCT_LIST, getProducts)
 yield takeEvery(PRODUCT_SEARCH, searchProduct)
 
}

export default ProductSaga

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer