Found 217 Articles for Javascript Library

In this article, we will learn how make an autocomplete and suggestion box in React JS. Autocomplete is one of the basic features that every website has, however implementing it in a React website is very complex and problematic. Here, we will see an easy implementation of autocomplete in React JS.First create a React project −npx create-react-app tutorialpurposeNow go to the project directory −cd tutorialpurposeExampleFirst download a package −npm install --save downshiftThis library is used to add suggestion list for searchbox and the list will be written inside an array.You just copy the following code and change its style and ... Read More

In this article, we will see how to create a scroll to top animation in React JS using the react-spring package.First create a react project −npx create-react-app tutorialpurposeNow go to the project directory −cd tutorialpurposeExampleInstall the react-spring package −npm install react-springreact-spring is used to add Spring concept based animations to our website.Next, Add the following lines of code in App.js −import React, {useState} from 'react' import { useSpring, animated } from 'react-spring' export default function App(){ const [flip, set] = useState(false) const words = ['We', 'came.', 'We', 'saw.', 'We', 'hold', 'it s', ... Read More

Lottie is an open source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime. Let us learn how to implement Lottie animation in React.js. Lottie animations are mainly used for loader screen or as a start screen. It is written and implemented in JSON format in our React projects.ExampleGo to the official Lottie animation website and download Lottie JSON.Link to animation the I am going to use − https://lottiefiles.com/74546-character-02#/Name the JSON file "myloader.json" and keep it at the same level as App.js.Now install the react-lottie package −npm i --save react-lottieLottie library will be used to add ... Read More

In this article, we will see how to create a 3D text using react-threefiber. We will first download the font of JSON and then we will add it in our Text Geometry object. We will add orbit control to it which will allow moving the text on the screen and view the 3D text properly. So, let's get started.ExampleFirst, download important libraries −npm i --save @react-three/fiber threeThis library react-three/fiber will be used to add webGL renderer to the website and to connect threejs and React.Now install a typeface font JSON and put it inside “src” folder. You can download a ... Read More

In this article, you will learn how to create a globe using react-threefiber. We will first make a sphere and then map a whole Earth map on it. This is an interesting texture loader feature using which we canmake any image to wrap over a sphere as texture. So, let's get started!ExampleFirst, download important libraries −npm i --save @react-three/fiber threeThis library react-three/fiber will be used to add webGL renderer to the website and to connect threejs and React.Download an image of Earth map and place it in the “src” folder. We have named the image file as "world-map.gif".Add the following ... Read More

Other than all being a natural number, the numbers 0, 4, 6, 8, 9 have one more thing in common. All these numbers are formed by or contain at least one closed loop in their shapes.For example, the number 0 is a closed loop, 8 contains two closed loops and 4, 6, 9 each contains one closed loop.We are required to write a JavaScript function that takes in a number and returns the sum of the closed loops in all its digits.For example, if the number is 4789Then the output should be 4 i.e.1 + 0 + 2 + 1ExampleFollowing is ... Read More

Suppose, we have an array of numbers like this −const arr = [3, 5, 5, 23, 3, 5, 6, 43, 23, 7];We are required to write a function that takes in one such array and constructs another array whose elements are the difference between consecutive elements of the input array.For this array, the output will be −const output = [-2, 0, -18, 20, -2, -1, -37, 20, 16];ExampleFollowing is the code −const arr = [3, 5, 5, 23, 3, 5, 6, 43, 23, 7]; const consecutiveDifference = arr => {    const res = [];    for(let i = 0; ... Read More

Compound Interest FormulaCompound interest is calculated using the following formula −CI = P*(1 + R/n) (nt) – PHere, P is the principal amount.R is the annual interest rate.t is the time the money is invested or borrowed for.n is the number of times that interest is compounded per unit t, for example if interest is compounded monthly and t is in years then the value of n would be 12. If interest is compounded quarterly and t is in years then the value of n would be 4.We are required to write a JavaScript function that takes in principal, rate, ... Read More

AngularJSAngularJS, is a javascript based open-source front-end framework and is mainly used to develop single page applications on web. It enriches the static HTML to dynamic HTML. It extends existing HTML by providing directives. Its latest stable version is 1.7.7AngularAngular is alternative to AngularJS and it is a major version upgrade to Angular JS. Angular release starts from 2.0. It is very fast as compared to AngularJS. It has modular design, have angular CLI and easy to develop. Angular latest stable version is 9.Following are the important differences between AngularJS and Angular.Sr. No.KeyAngularJSAngular1ArchitectureAngularJS works on MVC, Model View Controller Design. ... Read More

ReactJSReact or ReactJS was originally developed by Facebook and it acts on view layer for web and mobile based application. It integrates well with Node js environment. Following are key features of React.Scalability - react is highly adaptable and scalable library.Rich in features - Provides extensions to existing javascript and typescript languages.Reusablity - react components are highly reusable.Vue.jsVue.js is javascript based MVC framework and is very helpful in creating responsive UI.Following are key features of Vue.js.Scalability - Vue.js is highly adaptable and scalable library.Rich in features - Provides extensions to existing html components.Reusablity - Vue.js components are highly reusable and ... Read More