DEV Community: Ateev Duggal

OOPS Concepts 101: What Are the Key Concepts You Need to Know?

Ateev Duggal — Wed, 04 Jun 2025 16:02:04 +0000

Object-Oriented Programming System (OOPS) is a programming paradigm built around the concept of objects — self-contained units that represent real-world entities like users, cars, or bank accounts. While objects are at the heart of OOPS, they are just one part of a broader system of concepts that define how OOP works. Together, these OOPS concepts (like classes, objects, methods, etc) concepts—form the building blocks of modular and efficient software development.

In this blog, we won’t dive into the four pillars of OOPS — Abstraction, Encapsulation, Polymorphism, and Inheritance — just yet. Instead, we’ll focus on some of the foundational Java concepts that are essential for understanding OOPS.

These include objects, classes, constructors, methods, access modifiers, etc — the building blocks of any Java program and the building blocks of OOPS as the four pillars use them to make our code modular, maintainable and flexible. Let’s revisit these concepts with a practical mindset and some real-world examples to see how they truly work

Let’s start...

Different OOPS Concepts in Java

As mentioned earlier, in this blog we’ll focus on some of the core concepts of Object-Oriented Programming (OOP), which are essential for writing clean and effective code in Java. Without a solid understanding of these OOPS concepts, it’s hard to fully appreciate the power of OOP and use it to make our code modular, flexible, and secure.

In this post, we’ll concentrate on five key concepts: classes, objects, methods, access modifiers, and constructors. While there are many other important OOP concepts, we’ve chosen these because they are especially relevant for beginners for will help them understand OOP better. The more advanced topics will be covered in future posts, as they require a deeper conceptual understanding.

Among these five, we’ll be creating separate blog posts for constructors and access modifiers, since they deserve a more detailed explanation. Understanding them is crucial both from a conceptual standpoint and for practical coding in Java.

Class

A class is a blueprint of an object or rather a blueprint that is used to create an object as it tells us which properties and methods will that object or objects of similar kind have. As Java likes to work on the DRY principle.

Understanding Event Bubbling in JavaScript and Its Working

Ateev Duggal — Sat, 03 Jun 2023 19:35:32 +0000

Understanding the concept of event bubbling in JavaScript is crucial for developers to create dynamic and efficient web applications. Imagine a webpage with multiple elements like buttons, images, and text. Now, let’s say an element was clicked, but which one? We know because we have clicked it, but how will the browser know? That’s where event bubbling comes into play!

Event bubbling facilitates the seamless detection and handling of associated events as they propagate through an element’s ancestors. This hierarchical event propagation lies at the core of JavaScript’s event system, enabling enhanced flexibility and comprehensive event management capabilities within web applications.

In this comprehensive guide, we will delve into the fascinating concept of event bubbling in JavaScript. As passionate developers, we understand the importance of mastering these fundamental aspects of JavaScript, as it forms the backbone of event handling in web development.

In this blog, we will cover many things like the default behavior of event propagation, event bubbling, capturing definitions and use cases, and their differences.

We hope you like it.

Let’s start…

Index

What is Event Propagation?
What is Event Bubbling?
How does Event Bubbling Work?
Event Capturing
Understanding the Concept of Event Bubbling in JavaScript with the Help of a Code
Briefly Understanding Event and Event Listeners of JavaScript
Understanding Event Capturing Using Code
Event Target Phase
Accessing the Event Object
How to Stop Event Propagation
Conclusion
Frequently Asked Questions
How to Stop Event Capturing?
What is the difference between Event Bubbling and Event Delegation?
What is Event Bubbling and How to Stop it?
Difference between Event Bubbling and Event Capturing?

What is Event Propagation?

Before moving forward with Event Bubbling, we first have to understand Event Propagation and the various ways in which events propagate in JavaScript. Event propagation is a concept in JavaScript that describes how events are handled in the Document Object Model (DOM) tree. It involves two phases: capturing and bubbling.

During the capturing phase, the event traverses from the outermost parent element down to the target element, allowing ancestor elements to capture the event along the way.

Once the event reaches the target element, the target phase begins, where event handlers attached directly to the target element are executed.

After the target phase, the event enters the bubbling phase, where it travels upward through the parent elements, triggering their respective event handlers.

To visualize this concept, we can represent it using a diagram:

This diagram illustrates the event propagation flow. The event starts from the topmost parent element, goes through the capturing phase, reaches the target element, and then proceeds to the bubbling phase, propagating it up to the parent elements.
By understanding event propagation, we can handle events at different levels of the DOM hierarchy, providing flexibility and control in event handling.

What is Event Bubbling?

When an event gets triggered within the nested set of HTML elements, this event bubbles up from that element to the outermost element of the nested HTML elements, this process is called event bubbling. During this process, event listeners attached to those elements which were involved in the bubbling process of that event also get triggered like a ripple in a pond.

Continue...

How to Detect a Click Outside of a React Component using Hooks?

Ateev Duggal — Fri, 26 May 2023 18:55:14 +0000

As web developers, we may come across situations where we might have to detect when a user clicks outside of a specific element, such as a modal or dropdown menu. This can be useful for closing the element or triggering some other action when the user clicks outside of it.

In React, you can detect a click outside of a component by using a technique called "event bubbling" or "event capturing". This involves attaching an event listener to the document object and checking if the click target is outside of the component.

In this blog post, we'll understand how to detect a click outside of a React component using the useRef and useEffect hooks in a step-by-step fashion using an example problem as it is better to understand things using practical examples.

Let’s start, but first to create a React app to understand this concept.

Index

Creating the React App
What are we making?
Working on the App
Detecting the Outside Click of a functional component
Use a React Ref to Create a Clickable Area
Creating an event listener for the clickable area
Checking if the click is outside of the React component
logic inside the if statement.
Different Ways using which we can Detect a Click Outside of a React Component
Conclusion
Frequently Asked Question

What are we making?

In this app, we will be making a counter app that contains a button wrapped up by a div. The initial value of the counter is 0. With each button click, the value of the counter gets increased by 1, while will decrease if anything other than the button and the wrapper element div is clicked. See the gif below to understand

How to Implement Infinite Scrolling in React by Creating a Custom Hook

Ateev Duggal — Tue, 02 May 2023 06:59:56 +0000

We often find ourselves in a situation where we have to deal with large sums of data in our Applications for user experience. If we render the data, in the same way, using the map function, the DOM Tree and the efficiency of our app will suffer the consequences like effects on speed and loading time, etc.

There are four solutions to this problem, and infinite scrolling in React is one of them. Infinite scrolling has become a popular feature in modern web applications, allowing users to seamlessly scroll through a large amount of content without clicking through multiple pages.

In this blog post, we will not only learn how to implement infinite scroll in React using a custom hook so that we can apply it in any application but also the different ways using which we can implement it in our React App.

Index

What is an Infinite Scroll?
Creating the React App
Understanding the UI of the App
Getting Data from the API
Creating the Custom Hook — React Infinite Scroll Hook
Working on the UI of the main component
Detecting the Bottom of the Page
The Pros and Cons of Infinite Scroll
Tips for Debugging infinite scrolling in React
Conclusion

What is an infinite scroll?

Infinite scrolling is a web design technique that uses lazy loading to load only the content that is currently visible to the user, and as the user scrolls down, it loads more content automatically Instead of clicking a “next” button like we did when we make a pagination component,

It creates a seamless browsing experience for the user and can help keep them engaged on the site for extended periods. React Infinite scroll component is often used in social media platforms, online marketplaces, and other types of websites where there is a large amount of content to be displayed.

Now that we know what infinite scrolling is, and how useful it is for our apps, let's make one for ourselves.

Creating the React App

First and foremost we have to create our React app. It’s straightforward to create a React app — just go to your working directory in your preferred IDE and enter the following command in the terminal:

npx create-react-app infinite-scrolling-in-react

If you are unsure how to set up a create-react-app project properly, you can refer to the official guide here at create-react-app-dev.‌‌

After the setup, run npm start in the same terminal to start localhost:3000 where our React app will be hosted. We can also see all our changes there.

We will be using Bootstrap for default styling and the rest will be done by custom CSS which will not be discussed in this blog as the main focus of this blog is explaining the construction and use of the different components that we have made in this app like a custom hook for implementing infinite scroll. But for people who want to practice the styling part as well, here is the GitHub repo of this project and the live link.

Understanding the UI of the App

Our app contains a number of cards containing a dummy image, name, and description generated from a test API and displayed in the form of cards as shown.

Trouble accessing context values with useContext in child component

Ateev Duggal — Wed, 19 Apr 2023 08:22:26 +0000

I am making Google Keep Clone with React and Context API (useContext hook). It was going very smoothly, everything was coming in proper order until I thought of somehow passing the notes from home to the archive and delete section using a button. For this purpose, I have used useContext hook so that I can avoid unnecessary prop drilling and complex codes. But somehow it's not working. Can anyone help me?

import React, { createContext, useState } from "react";
export const dataContext = createContext([]);

const Context = ({ children }) => {
  const [addData, setAddData] = useState([]); //to store all the values of the state data
  const [archive, setArchive] = useState([]);
  const [deleteNotes, setDeleteNotes] = useState([]);

  return (
    <>
      <dataContext.Provider
        value={{
          addData,
          setAddData,
          archive,
          setArchive,
          deleteNotes,
          setDeleteNotes,
        }}
      >
        {children}
      </dataContext.Provider>
    </>
  );
};

export default Context;
// export { dataContext };

import React, { useContext, useState } from "react";
import Inputbox from "../Components/Inputbox";
import { dataContext } from "../Components/Context";
import { v4 as uuid } from "uuid";
import SingleNote from "../Components/SingleNote";

const Notes = () => {
  const [loading, setLoading] = useState(true);
  const { addData, setAddData, setArchive, setDeleteNotes } =
    useContext(dataContext);
  //Math.random can also be used here but to make things simpler we have used a npm package as we don't know how many notes will a person will save
  const [show, setShow] = useState(false); //to toggle between between the main note and the big note

  const [data, setData] = useState({
    //to stores all the values given by the user
    id: uuid(),
    title: "",
    description: "",
  });

  const addNote = () => {
    setAddData((oldData) => {
      return [...oldData, data]; // Calling the done function using the addNote function
    });
  };

  const Delete = (index) => {
    const DelArray = addData.filter((Val) => {
      return index !== Val.id;
    });
    setAddData(DelArray);
    setDeleteNotes((preArr) => [addData, ...preArr]);
  };

  const Archive = (index) => {
    const ArchiveArray = addData.filter((Val) => {
      return index !== Val.id;
    });
    setAddData(ArchiveArray);
    setArchive((preArr) => [addData, ...preArr]);
  };

  const handleClickAway = (e, val) => {
    e.preventDefault();
    setShow(false); //if data filed is blank, close the input fields
    //if data field is not empty
    if (data.title || data.description) {
      setLoading(false);
      addNote(val);
      setData({
        title: "",
        description: "",
      });
    }
  };
  return (
    <>
      <Inputbox
        handleClickAway={handleClickAway}
        data={data}
        setData={setData}
        setAddData={setAddData}
        show={show}
        setShow={setShow}
      />
      {loading ? (
        <div style={{ marginLeft: "30%", marginTop: "5%" }}>
          <div className="icon-1">
            <i class="fa-regular fa-note-sticky"></i>
          </div>
          <div className="fs-3 fw-bold opacity-50">
            Your Notes will Appear Here
          </div>
        </div>
      ) : (
        <SingleNote addData={addData} Delete={Delete} Archive={Archive} />
      )}
    </>
  );
};

export default Notes;

import React from "react";

const SingleNote = ({ addData, Delete, Archive }) => {
  return (
    <>
      <div className="row mt-5 d-flex">
        {addData &&
          addData.map((Val, index) => {
            const { title, description, id } = Val;
            return (
              <>
                <div className="note m-3" key={index} id={index}>
                  <div className="fs-4 fw-bold">{title}</div>
                  <br />
                  <p>{description}</p>
                  <div className="d-flex flex-row-reverse">
                    <div
                      onClick={() => Delete(id)}
                      style={{ cursor: "pointer" }}
                      title="Delete"
                    >
                      <i className="fa-regular fa-trash-can fs-4 py-2 text-danger mx-3"></i>
                    </div>
                    <div
                      onClick={() => Archive(id)}
                      style={{ cursor: "pointer" }}
                      title="Archive"
                    >
                      <i className="fa-solid fa-boxes-stacked fs-4 py-2 text-success"></i>
                    </div>
                  </div>
                </div>
              </>
            );
          })}
      </div>
    </>
  );
};

export default SingleNote;

import React, { useContext } from "react";
import { dataContext } from "../Components/Context";

const Archive = () => {
  const { archive, setAddData, setArchive, setDeleteNotes } =
    useContext(dataContext);

  const Delete = (index) => {
    const DelArray = archive[0].filter((Val) => {
      return index !== Val.id;
    });
    setDeleteNotes(DelArray);
    setAddData((preArr) => [archive, ...preArr]);
  };

  const UnArchive = (index) => {
    const ArchiveArray = archive[0].filter((Val) => {
      return Val.id !== index;
    });
    setArchive(ArchiveArray);
    setAddData((preArr) => [...preArr, archive]);
  };
  return (
    <>
      <div className="row mt-5 d-flex">
        {archive.map((Val, index) => {
          const entry = Val[0];
          const { title, description, id } = entry;
          return (
            <>
              <div className="note m-3" key={index} id={index}>
                <div className="fs-4 fw-bold">{title}</div>
                <br />
                <p>{description}</p>
                <div className="d-flex flex-row-reverse">
                  <div
                    onClick={() => Delete(id)}
                    style={{ cursor: "pointer" }}
                    title="Delete"
                  >
                    <i className="fa-regular fa-trash-can fs-4 py-2 text-danger mx-3"></i>
                  </div>
                  <div
                    onClick={() => UnArchive(id)}
                    style={{ cursor: "pointer" }}
                    title="Unarchive"
                  >
                    <i className="fa-solid fa-arrow-up-from-ground-water fs-4 py-2 text-success"></i>
                  </div>
                </div>
              </div>
            </>
          );
        })}
      </div>
    </>
  );
};

export default Archive;

Now the problem that I am facing is I can send the data from the notes component to the archive component, but it's not coming back from the archive component to the notes component. PLease help me.

How to build a Movie App in React using TMDB API

Ateev Duggal — Mon, 27 Mar 2023 05:44:30 +0000

React Movie App or Movie App in React is a fun project that every React developer should make once, in order to improve/ enhance/ polish their React coding skills. It is a must considering AIs like ChatGPT which can do pretty much anything even coding are now among us. So it’s better to understand these concepts well in order to use them in our future projects

In this blog, we will be making a movie app in React using TMDB API by using some very easy but tricky concepts to make our app more entertaining. These concepts are -

Fetching data from API
Displaying data in the form of a card
Pagination
Filtering data of both Movies and TV Shows based on their genre
A custom hook to help us in this filtering process
A Custom Search Bar using which we can search movies as well as tv series.

We will be using Bootstrap for default styling and the rest will be done by custom CSS which will not be discussed in this blog as the main focus of this blog is explaining the construction and use of the different components that we have made in this app like the Filter Component, Custom Hook, etc. But for people who want to practice the styling part as well, here is the GitHub repo of this project and the live link.

Let’s Start…

Index

Creating the React App
Getting data from TMDB API
Working on the UI part of the App
Creating different pages of our App
Creating the Trending Page
Creating the Movies Page
Creating the TV Series Page
Creating the Custom Search Page
Summary

Creating the React App

npx create-react-app the-movie-central

If you are unsure how to set up a create-react-app project properly, you can refer to the official guide here at create-react-app-dev.‌‌

After the setup, run npm start in the same terminal to start localhost:3000 where our React app will be hosted. We can also see all our changes there.

Our movie app wouldn’t be any good if we didn’t have any movies to display. So to solve this issue we will be using the TMDB API as our source for movies and other stuff related to it. This API is free to use, and all we have to do is sign up and get an API key. Let’s see how.

Getting the API Key from TMDB’s official website
TMDB stands for The Movie DataBase which is basically an online database that contains information related to films, television programs, and video games. It is a community-built resource, open to anyone who would like to contribute.

The TMDB API provides access to detailed information about movies, television shows, actors, crew members, and more. The API includes over 3 million pieces of data, including movie posters, release dates, cast and crew information, plot summaries, and more.

And we are going to take advantage of all these features that this API is providing while making our Movie App, though we will be limiting ourselves to the Movie Section and the TV Series Section.

A Guide to React Context API and useContext hook

Ateev Duggal — Fri, 17 Feb 2023 10:08:44 +0000

React Context API was introduced a while ago with React version 16.3. It was mainly introduced to solve one of the major problems that React developers like us were facing at that time - prop drilling and component re-rendering. In this article, we will cover the reasons which led to the birth of Context API and a lot more topics related to it, with step-by-step explanations.

Index

What is React Context API?
What is Prop Drilling?
How does React Context API work?
Understanding React Context API
What is useContext hook?
React Context API VS Redux
Summary
Frequently Asked Questions

What is React Context API

Context API in React JS is an in-built API feature of React that manages props and states globally. Simply said, it is a way of passing the data from the parent to the child component - its final destination, without going through every other child component.
Imagine a situation where we have to pass down data from a parent component to the last child component. One way is to manually pass down the data in the form of props to every other child component until it has reached the last child component - where it has to be used. This process is called prop drilling and it complicates our overall code and can even make it ugly.
What we can do to avoid prop drilling is we can make a global state variable with the help of the createContext() function of React, store and fetch all state management variables from it using methods like Provider and Consumer and we can even use a hook to make things even simpler as they are globally stored. See the image below to understand.

What is Prop drilling?

In a typical React Application, we use props to pass down the data from parent to child, but sometimes it can become a hassle as it can create a lot of complex codes mainly when we are dealing with some pretty heavy coding stuff like creating a UI Theme, Authenticating user credentials, etc.

In cases like these, if we use the same method of passing props from parent to child component until it has reached its final destination, it will not become a thing of beauty but will become something so complicated that sometimes we, who have written it, might get confused, and this is called prop drilling.

Prop Drilling is a situation where data is passed down from a parent component to multiple child components until it has reached its final destination. Prop Drilling not only complicates our code but also consumes a lot of space and can sometimes be the root of re-rendering.

This is simply because whenever we pass a prop down the component, our App gets re-rendered and in the case of prop drilling, there can be multiple re-renders. To avoid this, the concept of Context API was introduced in both class and functional components. In this article, we will mainly see how to use React Context API with functional components.

Explaining TreeMap in Java in Simple English

Ateev Duggal — Sat, 05 Nov 2022 20:08:14 +0000

TreeMap in Java, just like the HashMap, is part of the java collection framework. It is a red-black tree-based implementation of the Map interface, NavigableMap, and AbstractMap classes. It stores data in the form of Key and Value pairs where the key is a unique identifier used to associate each value on the Map. It means that every key is mapped to exactly one value and that we can use it to retrieve its corresponding value from the map.

Now that we have a general idea about TreeMap, Let’s dive into its more advanced features for a better understanding.

Index

What is a TreeMap?
Initializing a TreeMap
Features of TreeMap
Why is TreeMap not Synchronized in Nature?
Internal Structure of TreeMap.
Basic Operations of TreeMap.
Some more Methods of TreeMap in Java
Constructors in TreeMap
Sorting in TreeMap
Internal Working of TreeMap
Red-Black Tree Algorithm
Step-by-Step Procedure for Working on TreeMap
Conclusion
Frequently Asked Question

What is a TreeMap?

As mentioned above, TreeMap is nothing more than a Data Structure that stores data in the form of the key and value pair, where the key should be a unique identifier that allows us to perform multiple operations like add, delete, replace, etc on the data stored in the TreeMap.

Unlike HashMap which only takes a constant time, it takes a logarithmic time to perform the above-mentioned operations. This makes one wonder why it was introduced in the first place. The answer is simple…to save the memory used to store data. It only uses the amount of memory needed to hold/ store the items, unlike a HashMap which uses a contiguous region of memory.

The best thing about TreeMap is that here storing of data is done based on the natural ordering of keys — if keys are initialized as integers then they will be stored in ascending order of the keys, and if the keys are initiated as String or characters, then the data will be stored in the alphabetic order.

But in the case of TreeMap custom sorting is also possible. For that, we have to use a specific type of constructor to perform this custom sort which we will see later in the blog.

The ordering maintained by a TreeMap (just like any other sorted map) must be compatible with the equal sign if it correctly wants to implement the Map interface irrespective of whether a constructor is provided or not. This is because all the operations performed on the map Interface use the equal operator, while all the operations performed on the Sorted map use its compareTo or compare method.

Initializing a TreeMap

Creating a TreeMap is the same as creating a HashMap in Java. Just like in HashMap, first, we have to import the TreeMap class from the util package and then write the following line to create a new TreeMap in Java and use all its methods and constructor.

TreeMap<Key, Value> numbers = new TreeMap<>()

Here

key — is the unique identifier used to associate each element in the map

value — elements associated by keys in a map.

How to Merge Two Sorted Arrays

Ateev Duggal — Sat, 05 Nov 2022 19:56:45 +0000

Problem
You are given two sorted arrays A and B of lengths m and n, the task is to merge the two sorted arrays in such a way that the merged array is also sorted.

Example

Input
A[] = {3, 9, 10, 18, 23}
B[] = {5, 12, 15, 20, 21, 25}

Output
Merged[] = {3, 5, 9, 10, 12, 15, 18, 20, 21, 23, 25}

Explanation
The merged array is of the size of n + m and contains both the elements of array A and array B in sorted order

Input:
A[] = { 5, 8, 9}
B[] = {4, 7, 8}

Output:
Merged[] = {4, 5, 7, 8, 8, 9}

Explanation
The merged array is of the size of n + m and contains both the elements of array A and array B in sorted order

Index

Brute Force Approach
Insertion Sort Approach
Efficient Approach — Using Merge Sort

Brute Force Approach

The idea is to create a new array C[] of length m+n and put all the elements from A[] and B[] in it and then sort them using Arrays.sort().

Algorithm

Create an array C of n+m size to store the merged array
Put the values of both A and B arrays using a for loop
Sort the C array using Array..sort().

Pseudo Code

Int[] solve(int[] A, int[] B, int n, int m) { Create a new array C of n+m size while(i<n) { C[k++] = A[i++]; } while(j<m) { C[k++] = B[j++]; } Sort C; return C }

Output

Array after merging - 1 2 3 4 5 6 7 8

Time Complexity — O((m+n) log(m+n))
We have sorted an array of size m+n using Arrays.sort(), and the time complexity of this operation is O(n log n) which in this case becomes O((m+n )log(m+n))

Space Complexity — O(m+n)
We have created a new array C of size n+m which will store the merged sorted array.

How to Merge Two Sorted Arrays

Ateev Duggal — Mon, 12 Sep 2022 00:17:24 +0000

Problem

You are given two sorted arrays A and B of lengths m and n, the task is to merge the two sorted arrays in such a way that the merged array is also sorted.

Example

Input
A[] = {3, 9, 10, 18, 23}
B[] = {5, 12, 15, 20, 21, 25}

Output
Merged[] = {3, 5, 9, 10, 12, 15, 18, 20, 21, 23, 25}

Explanation
The merged array is of the size of n + m and contains both the elements of array A and array B in sorted order

Input:
A[] = { 5, 8, 9}
B[] = {4, 7, 8}

Output:
Merged[] = {4, 5, 7, 8, 8, 9}

Explanation
The merged array is of the size of n + m and contains both the elements of array A and array B in sorted order

Index

Brute Force Approach
Insertion Sort Approach
Efficient Approach — Using Merge Sort

Brute Force Approach

The idea is to create a new array C[] of length m+n and put all the elements from A[] and B[] in it and then sort them using Arrays.sort().

Algorithm

Create an array C of n+m size to store the merged array
Put the values of both A and B arrays using a for loop
Sort the C array using Array..sort().

Pseudo Code

Int[] solve(int[] A, int[] B, int n, int m) {
Create a new array C of n+m size
while(i<n) {
C[k++] = A[i++];
}
while(j<m) {
C[k++] = B[j++];
}
Sort C;
return C
}

Output

Array after merging - 1 2 3 4 5 6 7 8

Time Complexity — O((m+n) log(m+n))
We have sorted an array of size m+n using Arrays.sort(), and the time complexity of this operation is O(n log n) which in this case becomes O((m+n )log(m+n))

Space Complexity — O(m+n)
We have created a new array C of size n+m which will store the merged sorted array.

Explaining Selection Sort Algorithm in Simple English

Ateev Duggal — Mon, 05 Sep 2022 23:10:52 +0000

In this Blog, we will discuss the Selection Sort Algorithm and its working procedure. Selection sort is an in-place comparison-based sorting algorithm that sorts the array by repeatedly finding and swapping the minimum element with the leftmost element of the array.

In-place means that the algorithm does not use extra space for manipulating the input but may require a small though non-constant extra space for its operation. Usually, this space is O(log n), though sometimes anything in O(n) (Smaller than linear) is allowed.

In this algorithm, the array is divided into two parts. One part will initially be empty but will contain the sorted array and is placed on the left-hand side, while the other part carries the original unsorted array and is placed on the right-hand side. In every iteration, the minimum element is picked from the unsorted list and gets placed at the beginning of the sorted array, thus reducing the size of the unsorted array by one while at the same time increasing the size of the sorted array by 1.

Now that we have understood what selection sort is, let’s understand its working procedure with a simple example of an array with a length of 5.

How Selection Sort Algorithm Works

The working principle of this algorithm is very simple. As told, we just have to find the minimum element from the unsorted array and place it at the beginning of the sorted array.

To begin with we have to assume that the first element of the unsorted subarray is the minimum element of the array. Then by iterating and comparing every element of this unsorted array with the first element which we have assumed to be the minimum element of the array we have to find the minimum element of the array.

If we find any element less than our current min element, that element becomes the new min of the array and the journey continues till the last element. Upon reaching the end of the array, simply replace the leftmost element of the unsorted array with the current min element. We have to do this every time until the array is sorted completely.

Let’s take an example of an array of length 5 to understand it better

Since the array we are using is of length 5, we will be making 4 passes. One pass per element, and as for the last element, it will be automatically sorted. Thus we can say that for an array of size n, n-1 passes are required to sort that array using the selection sort.

How to make Fireworks in React using Particle JS React.

Ateev Duggal — Wed, 24 Aug 2022 04:38:51 +0000

Have you ever thought about how some developers can create stunning background animations like fireworks, confetti, night sky with blinking stars, etc? At first, I thought it was just a video playing at the back, or come crazy developer with some crazy-ass experience made it, but I was wrong as after several hours of research I found a fantastic package that can solve this problem without writing any complex code. The name of the package is Particle JS React which is a lightweight, dependency-free, responsive, and flexible JavaScript plugin which is used to create 2D animations like the ones mentioned above.

In this blog, we will use this package in React with a little twist. The twist is that we will be using its typescript version which is created specifically for component-based frameworks like React, Angular, and Vue called React TsParticles which is even easier to handle than Particle JS. We will understand how to make a beautiful firework background animation with this TsParticle.JS library or package in React with the help of a Congratulations Page.

Lets Start…

Index

Introduction of Particle js
Creating the React App
Installing Particle js library
Importing the library in our app
Working on the UI part of the App
Working on the Animation of the App
Working on the functionality of the App
Conclusion
FAQ

Introduction of TSParticle.JS

Before moving forward with our app, let’s take an overview of the library — Tsparticle that we will be using in this app to make an excellent background animation.

Below is the GIF of the actual website of TSParticle where we can see all the stunning background animation in action and on the right-hand side on the top we have an options tab which we can use to play around and learn what different options are there and how to use them to get our desired result.

Creating the React App

It’s very easy to create a React app — just go to your working directory in your preferred IDE and enter the following command in the terminal:

npx create-react-app fireworks-app

If you are unsure how to properly set up a create-react-app project, you can refer to the official guide here at create-react-app-dev.‌‌

After the setup, run npm start in the same terminal to start localhost:3000 where our React app will be hosted. We can also see all our changes there.

Installing the Particle.Js library

To start using the Particles Js in React we have to first install its typescript version as this version is only made for React and is much simpler to use than the actual one.

To install it, run the following command in the command prompt or terminal which is already running at the back of the project we have just created.

For npm users
npm i react-tsparticles 
npm i tsparticles

For yarn users
yarn add react-tsparticles
yarn add tsparticles

We can also install the react-tsparticles while creating our react app with the below-given command

$ create-react-app your_app –template particles or $ create-react-app your_app –template particles-typescript

If any legacy error shows, use –force for npm users as this will forcefully update everything

npm i react-tsparticles –force

npm i tsparticles –force

Importing the TSParticles Js Library in our App

Just like any other package, we first have to import the library from the node modules in the App.js file so that we can start using it.

import React from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
const App = () => {
return <div>Hello</div>;
};
export default App;

Working on the UI part of the App.

This part will be further divided and discussed in two parts. The first part contains the text and the styling part of our app which we have done using some Vanilla CSS and Bootstrap, while in the other we will discuss how we have made the fireworks animation using the TSParticle.js package

import React from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
const App = () => {
return (
<>
<h1 className="text-white display-3 fw-bold mt-5 text-center">
Congratulations
</h1>
<h3 className="text-white fs-5 mt-3 mb-5 text-center">
You are among the top 5% of the people who have reached here.
</h3>
<div className="trophy d-flex justify-content-center mt-5">
<i className="fa-solid fa-award t-1"></i>
<i className="fa-solid fa-award t-2"></i>
<i className="fa-solid fa-award t-3"></i>
</div>
<div className="text-center mt-4 pt-4">
<button className="btn btn-danger fs-3 fw-bold text-white">
Keep Going ---->
</button>
</div>
</>
);
};
export default App;