Maximum Length Product of Unique Words in JavaScript

AmitDiwan
Updated on 20-Mar-2021 05:39:40

162 Views

ProblemWe are required to write a JavaScript function that takes in an array of strings (only lowercase string alphabets) as the first and the only argument.The function should pick two such strings from the array that shares no common characters and have the maximum product of their lengths. And then our function should return the length product of two such strings. If there exist no such strings in the array, we should return 0.For example, if the input to the function is −const arr = ["karl", "n", "the", "car", "mint", "alpha"];Then the output should be −const output = 20;Output Explanation:The ... Read More

Switching On and Off a Bulb in JavaScript

AmitDiwan
Updated on 20-Mar-2021 05:37:36

707 Views

ProblemConsider this following situation −There are n bulbs that are initially off. We first turn on all the bulbs. Then, we turn off every second bulb. On the third round, we toggle every third bulb (turning on if it's off or turning off if it's on).In general, for the ith round, we toggle every i bulb. And lastly for the nth round, we only toggle the last bulb.We are required to write a JavaScript function that takes n as the only input and finds out how many bulbs are on after n rounds.For example, if the input to the function ... Read More

Finding Maximum Number from Two Arrays in JavaScript

AmitDiwan
Updated on 20-Mar-2021 05:35:27

664 Views

ProblemWe are required to write a JavaScript function that takes in two arrays of single digit numbers representing two numbers, arr1 and arr2 as the first and second argument. The third argument to the function will be a number, num (num {    const map = new Map();    const match = (a, b, num) => {       if (map.has(a + ', ' + b + ', ' + num)) {          return map.get(a + ', ' + b + ', ' + num);       }       let output = ... Read More

Sum Up to Amount with Fewest Coins in JavaScript

AmitDiwan
Updated on 20-Mar-2021 05:31:46

197 Views

ProblemWe are required to write a JavaScript function that takes in arr, arr, as the first argument. This array basically specifies the different types of coin denominations we have.The second argument to the function is a number, amount, which specifies the amount we want to add up to. Our function should simply return the minimum number of coins required to add up to that amount.If we can, in no way, reach amount, we should return -1.For example, if the input to the function is −const arr = [1, 2, 5]; const amount = 17;Then the output should be −const output ... Read More

Uneven Sorting of Array in JavaScript

AmitDiwan
Updated on 20-Mar-2021 05:29:41

240 Views

ProblemWe are required to write a JavaScript function that takes in an array of numbers, arr, as the only argument. Our function should sort this array in such a way that after sorting, the elements should follow this pattern −arr[0] < arr[1] > arr[2] < arr[3]....For example, if the input to the function is −const arr = [1, 5, 1, 1, 6, 4];Then the output can (there can be more than one possible answer as well) be −const output = [2, 3, 1, 3, 1, 2];ExampleThe code for this will be −const arr = [1, 5, 1, 1, 6, 4]; ... Read More

Validate URL in ReactJS

Rahul Bansal
Updated on 19-Mar-2021 11:15:50

3K+ Views

In this article, we are going to see how to validate a URL (Uniform Resource Locator) in a React application.To validate a URL, we are going to install a third-party package of ‘validator’ which is used to validate the URL. Example of a valid and an invalid URL are as follows −Valid URL − https://www.tutorialspoint.com/Invalid URL − https://www.tutorialspointInstalling the modulenpm install validatorORyarn add validatorNpm is the node package manager which manages our React package but yarn is the more secure, faster and lightweight package manager.ExampleIn this example, we will build a React application which takes a URL input from the ... Read More

Using onKeyPress Event in ReactJS

Rahul Bansal
Updated on 19-Mar-2021 11:15:29

4K+ Views

In this article, we are going to see how to access the keycode which the user has pressed in a React applicationTo detect the keycode or the key which the user has pressed from his keyboard then React has a predefined onKeyPress event for this. Although it is not fired for all keys like ALT, CTRL, SHIFT, ESC but it can detect other keys properly.The order of event firing is −onKeyDown − Fired when the user is pressing the keyonKeyPress − Fired when the user has pressed the keyonKeyUp − Fired when the user releases the keyExampleIn this example, we will ... Read More

Suspense in ReactJS

Rahul Bansal
Updated on 19-Mar-2021 11:15:05

1K+ Views

In this article, we will learn how to show a loader while the component is being lazily loaded.When the components are lazily loaded, it requires a fallback to be shown to indicate that the component is being loaded in the DOM.SyntaxExampleIn this example, we will build a Routing application that lazily loads the component and displays a loader while the component is being loaded lazily.App.jsximport React, { Suspense, lazy } from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import Loader from './Loader.js'; const Contact = lazy(() => import('./Contact')); const App = () => (   ... Read More

Strict Mode in ReactJS

Rahul Bansal
Updated on 19-Mar-2021 11:12:27

764 Views

In this article, we are going to see how to highlight potential problems that we might have in a React Application.React.StrictMode is a helper functionality provided by React which allows us to write better React codes. It provides visual feedback in the form of warnings if we don’t follow the React guidelines, but it works only in the development mode.Note: They are unsafe to use while using async await.Use-cases of Strict Mode −Identifying components with unsafe lifecyclesWarning about legacy string ref API usageWarning about deprecated findDOMNode usageDetecting unexpected side effectsDetecting legacy context APIWe can also bind React.StrictMode to work only ... Read More

Sending HTTP Requests in ReactJS

Rahul Bansal
Updated on 19-Mar-2021 11:08:51

1K+ Views

In this article, we are going to learn how to send and receive Http Responses in a React application.To send or receive data, we don’t need to use third-party packages, rather we can use the fetch() method which is now supported by all the modern browsers.Sending GET requesthttps://jsonplaceholder.typicode.com/todos/1Jsonplaceholder is a fake API which is used to learn the process of sending requests.Exampleindex.jsximport React from "react"; import ReactDOM from "react-dom"; import { CookiesProvider } from "react-cookie"; import App from "./App"; ReactDOM.render(              ,    document.getElementById('root') );App.jsximport React, { useEffect, useState } from 'react'; const ... Read More

Advertisements