Found 8591 Articles for Front End Technology

How to validate a credit card number in ReactJS?

Shubham Vora
Updated on 06-Mar-2023 15:07:40

4K+ Views

When a bank issue any credit or debit card number, they don’t generate the random numbers for the card. They follow some rules to issue a new card number. They first validate the card number using the Luhn algorithm and check if it starts with a particular number. Here, we will learn different approaches to validating credit card numbers. Use the React Creditcard Validator NPM Package The react creditcard validator is an NPM package, allowing us to validate the card number. Whenever a user enters the credit card number, It checks which type of card it is. For ... Read More

How to use TextField Component in Material UI?

Shubham Vora
Updated on 06-Mar-2023 15:00:03

4K+ Views

The Material UI library provides various react components, and TextField is one of them. We can use the TextField component to take user input and use it inside the form. Whatever operation we can perform with the HTML input field, we can also perform with the TextField component. For example, we can use events and attributes with the TextField component, which we can use with the normal input field component. The main benefit of using the TextField component is its well-designed design. Users can execute the below command in the project directory to install the Material UI library. npm ... Read More

How to use Slider Component in Material UI?

Shubham Vora
Updated on 06-Mar-2023 14:57:46

2K+ Views

The slider is an important feature for any application to improve the UX of the application. For example, if you want to allow users to choose any value between 1 to 100, it would be better to use the slider than the custom number input field. The Material UI provides the pre-designed Slider component. Also, it contains the different variants of the Slider component. We can pass the props to the Slider component to custom it Execute the below command in the project directory to install the Material UI in the React application. npm i @mui/material @emotion/react @emotion/style ... Read More

How to use Selenium Web Driver and JavaScript to Login any website?

Shubham Vora
Updated on 07-Mar-2023 14:08:52

2K+ Views

Nowadays, automation is very useful for testing the application. Many automation tools are available, and Selenium is one of them, developed in 2004. Also, it is a crossplatform tool, so we can use Selenium with most programming languages, and here we will use it with JavaScript. Users need to create the NodeJS application to use the Selenium web driver with JavaScript. Create a NodeJS Application Users can follow the steps below to create a NodeJS application. Step 1 – Open the project directory in the terminal and enter the below command. npm init -y Step 2 – ... Read More

How to use Regex to get the string between curly braces using JavaScript?

Shubham Vora
Updated on 06-Mar-2023 14:52:37

6K+ Views

We can create a regular expression so it can find all the substrings between the curly braces. After that, we can use the exec() or match() method to extract the matching substring. In this tutorial, we will learn to use a regular expression to get the string between curly braces using JavaScript. For example, if we have given a string like ‘This is a {string} with {curly} braces, we need to extract all substrings that reside between the curly braces. Using the exec() method with a regular expression to get the string between curly braces The exec() ... Read More

How to use Radio Component in Material UI?

Shubham Vora
Updated on 06-Mar-2023 14:22:09

2K+ Views

The radio button is used to allow users to choose any one value among a group of values. For example, the best use case of the radio button is allowing users to choose a gender in the form. The material UI provides the pre-designed Radio component, which we can use to create a group of radio buttons. Users can use the below command in the terminal to install the Material UI library in the React project. npm install @mui/material @emotion/react @emotion/styled Syntax Users can follow the syntax below to use the Radio component of the ... Read More

How to use Particle.js in JavaScript project?

Shubham Vora
Updated on 06-Mar-2023 12:43:35

2K+ Views

As the name suggests, the Particle.js library allows us to add particles to a particular HTML element. Also, we can change the shape of the particles number of particles in the div. We can add animation or motion to particles using the Particle.js library. Here, we will learn to change the shape, colour, and motion of particles via different examples. Syntax Users can follow the syntax below to use the Particle.js library in a JavaScript project. tsParticles.load("id", { particles: { // properties for the ... Read More

How to sorting an array without using loops in Node.js?

Shubham Vora
Updated on 06-Mar-2023 12:38:44

1K+ Views

In Node.js, a built-in sort() method is available to sort an array without a headache. However, as a beginner to learn how the sort() method works internally, users should learn various sorting algorithms. In this tutorial, we will learn a different algorithm to sort an array without using loops in NodeJS. Use the setInterval() method The setInterval() method allows us to invoke any particular function after each interval. Also, we can store the id of the setInterval() method in any variable and use it later to clear the interval. So, we can call a callback function in the ... Read More

How to create a dynamic search box in ReactJS?

Shubham Vora
Updated on 06-Mar-2023 12:02:41

4K+ Views

Search is one of the most important functionalities of the website. It allows users to filter products and search for specific things on the website, reducing the time users find particular things on the website. For example, you can see a search bar at the top of this page. Whenever we enter any search input, it shows us a search result by filtering the courses and tutorials based on the search result. This tutorial will teach us to implement dynamic search from scratch in ReactJS. Use the AutoComplete Component of Material UI The Material UI library contains various ... Read More

Javascript Program to Count Pairs with Given Sum

Ravi Ranjan
Updated on 06-Jun-2025 19:17:34

1K+ Views

To count pairs with given sum, is a common problem asked in job interviews and is often used in many real-world applications such as cryptography and data compression. In this article we are having an array and a target sum value, our task is to write a Javascript program to count pairs with given sum. Example Input: arr = [1, 2, 3, 5, 6, 7, 9] sum = 8 Pairs = (1, 7), (2, 6), (3, 5) Output: Count: 3 Approaches to Count Pairs with Given Sum Here is a list of ... Read More

Advertisements