DEV Community: Indrakant Mishra

Deep clone objects in javascript

Indrakant Mishra — Sun, 05 May 2024 17:38:55 +0000

Open github repo in Visual studio code without cloning or downloading on local

Indrakant Mishra — Tue, 10 Oct 2023 02:23:58 +0000

Hey guys, many times we need to just download or clone the repo which we are not even going to keep in local for long time and delete it after checking the code in our IDE. So to remove all these and just review the github repo code online itself in popular VSCode editor we have a trick which can save a lot of your time.

Step 1: Click on the URL bar in your browser. (it should be editable now)
Step 2: Replace https://github.com/ with https://github1s.com/ and hit enter

And that's it 🤯😲.

now you can view all repo files and folders just like you view in your local vscode.

Hope that helped you 😊

Find out first unique element from array

Indrakant Mishra — Fri, 29 Sep 2023 09:05:05 +0000

Hello..., let's find how how we can find the unique element from an array from an unsorted array which has duplicate values -

let's initialize an array -

let a = [1,2,2,3,4,1,5,6,6,7]

and create a variable and initialize it with a[0] value -

let r = a[0]

now the main part, to iterate through array and find out the element with no duplicate value without creating any data structure and in single for loop -

for(let i=0; i<a.length; i++){
    r = r ^ a[i] 
    // here ^ is a bitwise XOR operator which gives a unique value. Here is how it works - if a value is same it gives 0 to it and if its a unique it returns 1 and for the value which is unique we get 1 and this is how we can find out unique element
}

here is the complete code at one -

let a = [1,2,2,3,4,1,5,6,6,7]
let r = a[0]
for(let i=0; i<a.length; i++){
    r = r ^ a[i]
}

Hope it helped you and you found it valuable.

Create a timer in React with Start, Pause and Reset feature

Indrakant Mishra — Thu, 28 Sep 2023 03:03:48 +0000

Hello guys, i came across this task during my interview with a great company so i thought to share it with you all. The task is to create a countdown timer in React with Start, Pause and Reset features, so let's start building it -

// Import the useState hook from React for managing state
import { useState } from "react";

// Import the CSS file for styling
import "./styles.css";

// Define the main App component
export default function App() {
  // Initialize state variables for timer and timeInterval
  const [timer, setTimer] = useState(0);
  const [timeInterval, setTimeInterval] = useState(null);

  // Function to start the timer
  const startTimer = () => {
    // Use setInterval to update the timer every 1000 milliseconds (1 second)
    setTimeInterval(setInterval(() => {
      // Update the timer by incrementing the previous value by 1
      setTimer((prev) => prev + 1);
    }, 1000));
  }

  // Function to pause the timer
  const pauseTimer = () => {
    // Clear the interval to stop the timer from updating
    clearInterval(timeInterval);
  }

  // Function to reset the timer
  const resetTimer = () => {
    // Reset the timer value to 0
    setTimer(0);
    // Clear the interval to stop the timer
    clearInterval(timeInterval);
  }

  // Render the timer and buttons in the component
  return (
    <div className="App">
      <h3>Timer: {timer}</h3>
      <div className="btn-wrapper">
        {/* Button to start the timer */}
        <button onClick={startTimer}>Start</button>
        {/* Button to pause the timer */}
        <button onClick={pauseTimer}>Pause</button>
        {/* Button to reset the timer */}
        <button onClick={resetTimer}>Reset</button>
      </div>
    </div>
  );
}

This is the complete code, i hope you found it informative and you can extend it to next level by setting a timer and decreasing it until 0. See you soon in the next post 😊

Built tic tac toe game using javascript

Indrakant Mishra — Sat, 12 Aug 2023 12:09:19 +0000

Hello guys, if you like to try new stuffs in javascript and create something interesting this post is for you. Here we created a tictactoe game using javascript with little bit of UI designs.

Try it here - https://codepen.io/indrakantmishra/pen/bGQPOra

Hope you like it :)

Holi colors throw on click of screen

Indrakant Mishra — Wed, 08 Mar 2023 07:18:59 +0000

Sort an array by boolean value

Indrakant Mishra — Wed, 31 Aug 2022 19:08:26 +0000

Hello guys, i hope you are doing really well and trying to solve bigger problems. But sometimes we get really difficult problem to solve in some interviews which can take our valuable chance 😥. Here we will be going through a problem to sort an array by boolean value without using any method and without creating and new array in O(n) time complexity.

This problem was appeared in Amazon interview and i think this will be much useful for you. So let's start 😎 -

Let's assume we have an unsorted array like this -

const response = [ { id: 1, name: 'Phone', isChecked: false }, { id: 2, name: 'Laptop', isChecked: true }, { id: 3, name: 'Desktop', isChecked: false }, { id: 4, name: 'Watch', isChecked: true } ];

and we need to place all checked items first and unchecked items at last. Below is the code for this.

let lastElementUnchecked;
for (let i = 0; i < response.length; i++) {
    if (response[i].isChecked && lastElementUnchecked !== undefined) {
        let current = response[i];
        response[i] = response[lastElementUnchecked];
        response[lastElementUnchecked] = current;
        i = lastElementUnchecked;
        lastElementUnchecked = undefined;
    } else {
        if (!response[i].isChecked && lastElementUnchecked === undefined) {
            lastElementUnchecked = i;
        }
    }
}

This is very simple example to understand but while interviews it can be tough to reach over.

I hope you like this, thank you for reading 😊

How to track browser tab / window switch event

Indrakant Mishra — Wed, 22 Sep 2021 04:35:39 +0000

Hello guys,

In this article we will see how we can track the event of Tab/window change in browser. This method helps in tracking if user switches or navigates from your site to some other site.

We can use an event listener to keep track of event change of tab switch which is visibilitychange. Let's see it in code -

document.addEventListener('visibilitychange', () => {
    console.log('Current State: ', document.visibilityState)
})

Here if user switches to another tab or window we will get hidden in console.log and if user comes back we will see visible in console.log. By default the state will be visible if user is on your website.

*Hope you liked it, please mention in comment for any suggestions or feedback *

Method Chaining in JavaScript

Indrakant Mishra — Tue, 10 Aug 2021 06:24:34 +0000

Hello,
In this article we will see how we can chain methods in javascript. This is most commonly asked questions in interviews for front end developers. An example of it could be person.walks().talks().laughs().listens()

We can chain this till any level, let's see this in code:

class Person{
    constructor(name){
        this.name = name;
    }
    walks(){
        console.log(this.name +' Walks')
        return this;
    }
    talks(){
        console.log(this.name +' Talks')
        return this;
    }
    laughs(){
        console.log(this.name +' Laughs')
        return this;
    }
}

let person = new Person('Person 1');
person.walks().talks().laughs();

//Output: 
Person 1 Walks
Person 1 Talks
Person 1 Laughs

Here, return this helps in chaining the methods which passes the complete object with all of it's prototypes and with that we can chain the methods.

*Hope you liked it, please mention in comment for any suggestions or feedback *