DEV Community: SAIKAT BISHAL

Hey guys, Look. I found a really cool and very useful tool for content creators, especially in the tech space. Now you'll know how many times your content was plagiarised and by whom. I gave it a shot and found a 34% generic match with another.

SAIKAT BISHAL — Sun, 07 Dec 2025 04:25:15 +0000

Stokry

Dec 5 '25

I Found a Copy of My Blog Post Online — Here’s the Tool I Built to Track Every Plagiarized Version

#webdev #productivity #ai #javascript

Comments 1

2 min read

Navigating the React Redux toolkit as a Frontend developer

SAIKAT BISHAL — Wed, 31 Jan 2024 06:56:24 +0000

In the vast landscape of frontend development, navigating the intricacies of state management can often feel like deciphering a complex narrative. Enter Redux, a steadfast storyteller in our coding adventures, unraveling the tale of centralised state management. As we embark on this journey, the narrative takes an exciting turn with the introduction of Redux Toolkit – a robust toolbox designed to be the maestro orchestrating the symphony of state in React applications.

Redux, as our seasoned storyteller, has long been the go-to solution for managing the ever-evolving state of complex React applications. It weaves a story of predictability and clarity, providing a structured approach that, while powerful, can sometimes lead to verbose and boilerplate-heavy code. This is where the Redux Toolkit emerges as a transformative force, akin to a trusty companion offering a simplified and more intuitive path through the intricate tapestry of Redux.

Picture Redux Toolkit as a well-equipped toolbox, stocked with utilities that redefine our approach to state management. At the heart of this toolbox is configureStore, a function that streamlines the creation of Redux stores with sensible defaults. It's like having a seasoned guide ensuring we start our journey with the right map and provisions.

But the toolkit doesn't stop there;

CreateSlice

createSlice introduces a paradigm shift in structuring our state, actions, and reducers. It's as if we've found a magical quill that effortlessly writes organized and maintainable code, eliminating the need for boilerplate, and allowing us to focus on the essence of our application logic.

As the narrative unfolds, createAsyncThunk steps onto the stage, addressing the challenge of asynchronous operations in a manner reminiscent of a skilled conductor orchestrating a symphony. Fetching data from APIs becomes as seamless as a well-coordinated musical composition, enhancing the overall harmony of our application.

Let me untangle the nature of redux chapter by chapter

Chapter 1: Demystifying Redux

Redux serves as our reliable storyteller, narrating the tale of centralized state management. Enter Redux Toolkit, our toolbox for simplifying the intricacies of Redux, making the process more intuitive and efficient.

// Importing Redux
import { createStore } from 'redux';

// Initial State
const initialState = {
  // Your initial state properties here
};

// Reducer
const rootReducer = (state = initialState, action) => {
  // Reducer logic based on action types
  return state;
};

// Creating the Redux Store
const store = createStore(rootReducer);

// Example Dispatch
store.dispatch({ type: 'SOME_ACTION', payload: 'data' });

Chapter 2: The Redux Toolkit Toolbox

Imagine Redux Toolkit as the go-to toolkit, providing utilities like configureStore, createSlice, and createAsyncThunk for creating Redux stores, reducers, and handling asynchronous actions. This toolkit transforms verbose code into concise, readable expressions.

// Importing Redux Toolkit
import { configureStore } from '@reduxjs/toolkit';

// Initial State
const initialState = {
  // Your initial state properties here
};

// Reducer
const rootReducer = (state = initialState, action) => {
  // Reducer logic based on action types
  return state;
};

// Creating the Redux Store with Toolkit
const store = configureStore({
  reducer: rootReducer,
  // Additional configuration options
});

Chapter 3: Slicing Through Complexity

Creating slices with createSlice is akin to neatly dividing a cake. Each slice encapsulates a part of the application's state, alongside the necessary actions and reducers. This approach simplifies organization and enhances code maintainability.

// Importing createSlice from Redux Toolkit
import { createSlice } from '@reduxjs/toolkit';

// Initial State
const initialState = {
  // Your initial state properties here
};

// Creating a Slice
const mySlice = createSlice({
  name: 'myFeature',
  initialState,
  reducers: {
    // Reducer logic specific to this slice
  },
});

// Exporting Actions
export const { actions } = mySlice;

Chapter 4: Dispatching Actions with Ease

In this chapter, we explore the simplicity of dispatching actions. With Redux Toolkit, the need for separate action creators diminishes, allowing us to dispatch actions effortlessly, streamlining communication with reducers.

// Importing useDispatch from React Redux
import { useDispatch } from 'react-redux';

// Dispatching Actions
const MyComponent = () => {
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch(actions.someAction('data'));
  };

  return (
    // Your component JSX
  );
};

Chapter 5: Asynchronous Operations with createAsyncThunk

Handling asynchronous actions can be challenging, but Redux Toolkit introduces createAsyncThunk to make it seamless. Fetching data from APIs becomes straightforward, enhancing the overall efficiency of asynchronous operations.

// Importing createAsyncThunk from Redux Toolkit
import { createAsyncThunk } from '@reduxjs/toolkit';

// Async Operation
const fetchData = createAsyncThunk('myFeature/fetchData', async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
});

// Reducer Handling Async Operation
const mySlice = createSlice({
  name: 'myFeature',
  initialState,
  reducers: {
    // Other synchronous reducers
  },
  extraReducers: (builder) => {
    builder.addCase(fetchData.fulfilled, (state, action) => {
      // Handle the successful data fetch
    });
  },
});

Chapter 6: Embracing Immutability

No discussion on state management is complete without emphasizing the importance of immutability. Redux Toolkit ensures our state remains unchanged by discouraging mutation, promoting the use of pure functions for a more stable and predictable application state.

Conclusion

In the past, using Redux alone could be a bit cumbersome due to a few challenges. First, configuring a Redux store often involved dealing with complex setups. Second, to make Redux really useful, we had to rely on multiple packages, which could lead to a bloated project. Lastly, writing Redux code often resulted in a lot of boilerplate, making the codebase harder to manage.
However, with the introduction of Redux Toolkit, these problems have been efficiently addressed! ✅
Redux Toolkit simplifies the process of creating and configuring a Redux store. It offers a streamlined API and a set of utilities that make setting up the store much more straightforward and less intimidating.
Moreover, it provides a set of pre-configured packages and utilities, so you don't need to search for additional libraries to perform common tasks. This not only saves time but also ensures that your project remains lean and efficient.
The best part is that Redux Toolkit encourages the use of modern Redux patterns like the "slice" approach. By using slices, you can write concise, organized, and maintainable code, significantly reducing the boilerplate traditionally associated with Redux.

So, if you're working with Redux or planning to start a new project that involves Redux, I highly recommend giving Redux Toolkit a try! It's a powerful tool that makes managing state in Redux much more enjoyable and productive.

Exploring the React Component Lifecycle

SAIKAT BISHAL — Tue, 21 Feb 2023 07:56:14 +0000

A Journey Through the Life of a React Component.

In React, everything is a component. From the simplest UI elements to the most complex application views, each one is built using React's component architecture. But how does a React component actually work behind the scenes? That's where the React component lifecycle comes in.

The React component lifecycle is a series of phases that every React component goes through. Think of it as a journey through the life of a React component. Each phase has its own set of methods and behaviors, and understanding how they all fit together is crucial for building robust and performant React applications.

To help you better understand the React component lifecycle, let's use an analogy. Think of a React component as a tree. Just like a tree, a React component has roots, branches, leaves, and a trunk. Each of these parts corresponds to a different phase of the React component lifecycle.

The roots of the tree represent the first phase of the React component lifecycle:

Mounting

This is where a new component is created and added to the React tree. Just like a tree's roots, a React component's mounting phase is all about establishing a strong foundation.

Next up are the branches. These represent the second phase of the React component lifecycle:

Updating

When a component is updated, it's like the tree's branches growing and changing shape. During this phase, the component can receive new props, update its internal state, and make decisions about how to render itself based on these changes.

As the branches grow and change, they produce new leaves. In the React component lifecycle, the leaves correspond to the third phase:

Unmounting

This is when a component is removed from the React tree and its resources are released. Just like a tree's leaves falling off in the autumn, a React component's unmounting phase is all about letting go and freeing up resources.

Finally, we have the trunk. This represents the fourth and final phase of the React component lifecycle:

Error Handling

If something goes wrong during the previous phases, like an error in the component's render method, the component will enter the error handling phase. This is like a tree's trunk, providing a strong support system for the rest of the tree.

So there you have it, a fun and easy-to-understand analogy for exploring the React component lifecycle. Just like a tree, a React component goes through many changes and stages in its lifetime, and understanding each one is crucial for building successful React applications.

Ok that ended quickly, so let's dive a bit deeper than this. Let's write some code. But don't worry, I'll try to make this easy -

Deep Dive

The React component lifecycle is a series of phases that every React component goes through, from creation to destruction. Each phase has its own set of methods and behaviors that developers can use to customize and control how their components behave. Here are the four phases of the React component lifecycle, along with the most important methods associated with each one:

Mounting

This is the first phase of the React component lifecycle, where a new component is created and added to the React tree. During this phase, the following methods are called in order:

constructor(): This method is called before the component is mounted, and is used to initialize the component's state and bind event handlers.

static getDerivedStateFromProps(props, state): This method is called before every render, and is used to update the component's state based on changes to its props.

render(): This method is called to create the component's virtual DOM representation, which is used to generate the actual HTML.

componentDidMount(): This method is called after the component is mounted, and is used to perform any necessary setup, such as fetching data from a server or initializing third-party libraries.

Here's an example of the mounting phase:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  static getDerivedStateFromProps(props, state) {
    // Update state based on props
    return { count: props.count };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }

  componentDidMount() {
    // Fetch data from a server
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ count: data.count }));
  }
}

Updating

This is the second phase of the React component lifecycle, where a component can be updated due to changes in its props or state. During this phase, the following methods are called in order:
static getDerivedStateFromProps(props, state): This method is called before every render, and is used to update the component's state based on changes to its props.

shouldComponentUpdate(nextProps, nextState): This method is called to determine whether the component should re-render or not. If it returns false, the component will not update.

render(): This method is called to create the component's virtual DOM representation, which is used to generate the actual HTML.

getSnapshotBeforeUpdate(prevProps, prevState): This method is called before the component's virtual DOM is updated, and is used to capture any information about the current DOM state, such as scroll position.

componentDidUpdate(prevProps, prevState, snapshot): This method is called after the component's virtual DOM is updated, and is used to perform any necessary cleanup or side effects, such as updating a third-party library.

Here's an example of the updating phase:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Only re-render if count has changed
    return this.state.count !== nextState.count;
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }

  componentDidMount() {
    // Perform any necessary setup
  }

  componentDidUpdate(prevProps, prevState) {
// Check if props or state have changed
    if (prevProps.count !== this.props.count) {
      this.setState({ count: this.props.count });
    }  }

  componentWillUnmount() {
    // Perform any necessary cleanup
    console.log("Component is unmounted");
  }
}

Unmounting

In the unmounting phase of a component's lifecycle, the component is removed from the DOM and any cleanup operations necessary are performed. This typically involves removing any event listeners, cancelling any network requests or timers, and generally releasing any resources held by the component.

Here's an example of a component that sets up an event listener in the componentDidMount method and removes it in the componentWillUnmount method:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Button clicked');
  }

  componentDidMount() {
    // Add event listener when component is mounted
    document.addEventListener('click', this.handleClick);
  }

  componentWillUnmount() {
    // Remove event listener when component is unmounted
    document.removeEventListener('click', this.handleClick);
  }

  render() {
    return (
      <div>
        <button>Click me</button>
      </div>
    );
  }
}

In this example, the MyComponent class defines a handleClick method that logs a message to the console, and adds an event listener to the document element in the componentDidMount method. This event listener listens for the click event and calls the handleClick method.

In the componentWillUnmount method, the event listener is removed from the document element to prevent memory leaks and other issues when the component is removed from the DOM.

Conclusion

In conclusion, understanding the React component lifecycle is essential for creating robust and efficient applications with React. By leveraging the different lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount, developers can create components that effectively handle state updates, respond to user input, and cleanly release resources when they are no longer needed.

In addition, the recent introduction of new lifecycle methods such as getDerivedStateFromProps and getSnapshotBeforeUpdate provides even more flexibility in how components can be designed and optimized.

By carefully considering the different lifecycle methods available and their uses, developers can create more maintainable, scalable, and efficient React applications. It's important to note that the React team has deprecated some lifecycle methods such as componentWillReceiveProps and componentWillUpdate in favor of the newer methods, so staying up to date with the latest changes and best practices is crucial for creating high-quality React applications.

Beginners guide to using git like a pro.

SAIKAT BISHAL — Sun, 21 Aug 2022 19:41:20 +0000

What is git?

Git is a free and open-source software for distributed version control. It differs from GitHub, one of the many websites that used git as its version control software. What is Distributed Version Control, you ask. distributed version control (also known as distributed revision control) is a form of version control
in which the complete codebase, including its full history, is mirrored on every developer's computer.

For better understanding, let me explain you a situation I faced very early in my career and how git saved me from it.

When I first learned about git, I started using it everywhere. (You do not need internet to use git. You just need git installed in your system to track changes). I was writing my college essay for my final project which was due very soon. So after pulling an all-nighter, I went to take a quick nap. Sometime between that time, my roommate mischievously changed the whole essay to lorem ipsum and saved it.

But unknown to him, I had committed it to git before going to bed and had also created a backup branch. What a loser. I just had to go back to my last commit and pull it back from where I had left. You should have seen his face the next day when I nonchalantly submitted the project.

I will tell you exactly how I did it. It is easy and fun.

Initialize your Folder (also called Repository)

Go into the folder, the changes to which you want to track. i.e., You will be asking git to watch that folder (lets call it proGit) for any change that occurs hereafter. Open the command prompt (or any other CLI) inside proGit and type in this .

git init

git init - initialize a folder to track the changes made to it using git source control.

Make changes to the folder as you wish. You could add, delete, replace the whole code or even rename the files.

git add

The git addcommand adds new or changed files in your working directory to the Git staging area.

git add . // this means git add all
git add <path>/<filename> 
// this means that you add only the files you want to commit.

This is the most important step. Without it, the next step is utterly useless. As you're working, you change and save a file, or multiple files. Then, before you commit, you must git add. This step allows you to choose what you are going to commit. This way you make it harder for anyone(including yourself) to make a big blunder.

git commit

git commitcreates a commit, which is like a snapshot of your repository. These commits are snapshots of your entire repository at specific times. This is the main reason why I was able to recover my progress from my last night project.

git commit -m "this is the comment header message" -m "this is the comment body message"

-m after the commit command means commit message.

Note : Always remember to add easily understandable comment messages. Over time, commits should tell a story of the history of your project.

So now that you’ve made the changes and saved the history to git. You can now rest easy that your progress isn’t going anywhere.

You wake up the next day and open your project. But now you do not like what you did last night. For some reason you need to uncommit and go back to your previous iteration. Time to revert the changes.

git revert

git revertis the safest way to change history with Git. Instead of deleting existing commits, git revert looks at the changes introduced in a specific commit, then applies the inverse of those changes in a new commit. It is as if you have two duplicate commits at different times. It would look something like this

a → b → c → b

git revert HEAD --no-edit
// adding the option --no-edit to skip the commit message editor
git revert HEAD~x 
// x is a number. x=1 going back one more, x=2 going back two more, etc

git reset

git reset brings the repository back to an earlier state in the commits without making a new commit. I would not recommend this unless there is some very good reason to totally prune the commits (like hiding sensitive data or api private keys, etc.) Resetting is a one way time travel where you can’t travel back to the future.

Before

After

You can learn more about git reset in this blog by Atlassian.

So far so good. But now you want to try out some new changes to your project that you aren’t confident would work. So if that doesn’t work well, you will have to undo them later and move back to where you are now. You also don’t want to go through the hassle of reset or revert. Or say you want to create a different version of your project. This creates a perfect example where git branch can be used.

git branch

Abranch is a new/separate version of the main repository.

git branch 
// this shows the name of all the branches you have on your folder

git branch <new-branch> 
//  this creates a new branch  with the name of the new-branch

Branching from the parent branch(in blue). Green and purple circles signify the commits done in the new branches (also called the feature branches).

The above image visually shows you how your folder would be structured inside git. A folder can have as many branches as is required but I would suggest that you have as less as possible and they be as descriptive as possible in their names.

git branch -d <branch>
// This command deletes a redundant or useless branch.

Always delete the branches that you are sure will not be used or has been merged to the main branch (to avoid confusion). Never use uppercase -D unless you are double sure.

git branch -D <branch> force deletes the branch, even if there are unmerged changes.

git checkout : You can hop around from branch to branch using this command.

git checkout <new-branch> 
// you are currently in the new-branch. all changes that you make hereafter will be effected in the new-branch.

git checkout main
// You have now hopped to the main branch.

Now that you are pretty sure that your feature branch looks better than your main project, you would certainly want to add this to your main branch.

git merge

Git mergewill combine multiple sequences of commits into one unified history. In the most frequent use cases, It is used to combine two branches.

git checkout <old-branch>
// Place yourself on the branch which would act as the base branch. i.e., the new branch would merge into this branch.

git merge <new-branch> 
// Merge the new branch to the base branch.

git branch -d <new-branch>
// Now delete the new-branch. This is already merged, hence redundant.

This is how you can start to use git in your personal projects and reap the benefits of this cool version control system. But there are a lot more features and sub features of all these commands. There are commands which are particularly useful when you are working in a team and storing project data in a remote repository like GitHub or Bitbucket.

I’ll be talking about some of them in my next blog. Let me know in the comments if there is something I missed or some confusion regarding the blog. Feel free to leave a heard if it helped you in any way.

CSS color tricks to make your life easier

SAIKAT BISHAL — Wed, 17 Aug 2022 18:57:17 +0000

Colors in CSS are pretty easy to handle and do not pose much difficulty. But there are certain tricks not many developers know, that could make your life much easier while working with CSS colors.

Read on to learn about them.

You do not need comma separated values

Very recently the syntax of CSS has been updated for rgb and hsl because we have many new syntaxes(functions) coming in the near future. We can work with bigger color gamuts.

Now we do not have to add commas when specifying rgba values.
Example :

.color-old-syntax {
background-color : rgb(100,255,120);

}

.color-new-syntax {
background-color : rgb(100 255 120);
}

You do not need an a in to specify opacity

While we needed to specify rgba or hsla so that we could add an opacity value to the element, we do not need it in the new syntax.
Example :

.color-old-syntax {
background-color : hsla(100,50,50,0.5)
}
.color-new-syntax {
background-color : hsl(100 50 50 / 0.5)
}

Note that you still would be able to specify the opacity in the same function. The syntax has changed from comma separated values to a forward slash (just to specify the opacity value).

Specify values with percentages in rgb

You can now specify the color values in percentages rather than specifying them on a 0 to 255 scale.

.color-old-syntax {
background-color : rgb(127,100,100,0.5)
}
.color-new-syntax {
background-color : rgb(50%,40%,40%,0.5)
}

This is a better way to visualise how the colors would behave when mixed up in certain percentages or to compare two rgb colors.
Needless to say, you do not have to use this if you do not want to. Everything is backward compatible.

What's more, you could also mix and match percentage and absolute values inside the rgb() function. But I would not recommend that.
Example :


.rgb-background-new {
background-color : rgb(100% 255 50%)
}

//is same as

.rgb-background-old {
background-color : rgb(255 255 127)

}

This mix and match feature is just in chrome right now.

hsl() is more intuitive than rgb()

hsl stands for hue saturation lightness
Hue is the actual color you want to get. It is in the range of 0 to 360 degree where 0 and 360 is pure red. (see the hsl color wheel for more info).
Saturation is the amount of color that you want of a certain hue. This is specified in percentages.

The lightness of a color can be described as ** how much light** you want to give the color. It is also in percentage where 0% is black and 100% is white. 50% is the sweet spot if you want to get the most pure color.

.hsl-map-one {
background-color: hsl(0 50% 50%);
}
// is same as
.hsl-map-two {
background-color : hsl(360 50% 50%); 
}

red -- 0
green -- 120
blue -- 240
hsl in this way is more intuitive if you need to specify colors in between the three primary color (for example anything that is a mix of red and green would be between 0 and 120), you just need to change the first value of the function for that unlike rgb().

Hue values in hsl() can go beyond 0 degree and 360 degree

As we know hsl() hue works on the concept of color wheel, it makes sense that the hue value can go beyond 360.
Example :

.hue-value-one {
background-color : hsl(120 50% 50%)
}

// is same as  

.hue-value-one {
background-color : hsl(480 50% 50%)
}

The hue value can also go negative. (You can visualise this as the values go from 0 to negative, the arrow rotates in counterclock wise direction). Hence hsl(120 50% 50%) is same as hsl(-240 50 50).

These properties are particularly useful when you use javascript to dynamically change the color values. You do not have to use a lot of calculation on javaScript to make this work. Quite handy isn't it?

Opacity can now work in percentages

Not that it would make much difference, yet it is better to know that we can now specify the opacity values in decimal as well as in percentages.

.opacity-box-one {
background-color : rgb (100  200 100 / 0.5);
}

// is same as

.opacity-box-two {
background-color : rgb (100 200 100 / 50%);
}

That is it. If you know any other tricks or newer css features , feel free to comment that below. It would be very helpful for all the readers and me as well.

How to make a Splash Screen using HTML CSS and JavaScript

SAIKAT BISHAL — Wed, 13 Jul 2022 16:08:35 +0000

Does your college project have a splash screen that welcomes viewers to your humble website?

Here is how I made a splash screen using just HTML, CSS and JavaScript. You can copy paste the code in your single page project and change the HTML as you wish. But if you wish to go in depth of how it was made, then read on.

The idea is to overlay a div over the main page and turn its opacity to 0 when it is clicked.

The HTML

The HTML is quite simple. Just make a container div that we would, at a later stage, style using css. From now on we will call it splash container. This div would block the main page view when the site fires up.
Inside the splash container div put the contents of your splash screen. It could be anything that you want to show or tell the user at the start.

The CSS

In CSS our main focus would be to make the splash container cover the whole screen. Choose the background-color height and width of your screen as you would like.
For centering the splash container, we used fixed positioning and a top and left of 50%. But this just centers the top left corner of the splash-screen.



position : fixed;
top : 50%;
left : 50%;

To center the splash container around itself, we need to put a transform and move it by -50% on both axes.



transform : translate(-50%,-50%);

To make it look cooler when it dissapears we would also add a transition. I generally use ease-in-out in almost all my projects. Additionaly, it would take 600ms for my splash screen to fully dissapear when it is clicked.But feel free to change it according to your wish.



transition : all ease-in-out 600ms;

Now, just to add a bit more detailing, We will add a cursor style on the splash screen.
(But this might make us write some extra code in CSS and JS 🥲).



cursor : pointer;

Get the full list of cursor-types here

We add a class which hides the container (after the opacity is turned to 0 using JS) so that the pointer doesn't show for the next eternity even though the splash screen isn't visible to the user.



.hidden{
  transition : 0.5s;
  display : none;
}

This hidden class would be added dynamically using JS.

The JS



var splashScreen = document.querySelector('.splash');

To manipulate the splash container we first have to capture the element with the class splash. For this we use querySelector() method.

We add an event Listener which listens for a click on the splash-container. (In simple language we are telling js to listen for a click of the mouse on the said container).



splashScreen.addEventListener('click',someFunction())

As soon as the click happens, a function is triggered. Lets call this function parentFunction. What does parentFunction function do?

It adds a style property to the 'splash container' that turn its opacity to 0. ```

splashScreen.style.opacity = 0;
// CSS style -- opacity : 0;

2. It also adds a `hidden` class to our `splash container` class after 600ms. (This is so that we do not see the pointer cursor on the screen).

setTimeout(()=>{
splashScreen.classList.add('hidden')
},610)


`setTimeout()` is a custom function that takes in two parameters.
 The **first parameter** is some action that has to be done. (A function that adds a class to a div in this case).
The **second parameter** is the time after which the action is to be done (in milliseconds).

That's it. You are ready to make and customize your own splash screen. Have fun with my code on codepen and feel free to check out my other pens there. Please put a heart if this helped you in any way.

Thanks for reading. ❤️