Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Shubham Vora
Page 63 of 80
How to use Box Component in Material UI?
As the Box name suggests, it allows users to add the box of different dimensions on the web page. Users can also add any custom HTML content inside the Box component. Also, users can style the box by passing the style as props. To use the Box component of Material UI, users need to run the below command in the terminal to install the Material library. npm install @mui/material @emotion/react @emotion/styled Syntax Users should follow the syntax below to use the Box component of the Material UI library. Content of the Box. Users can see how ...
Read MoreHow to use API inside callbacks using jQuery DataTables plugin ?
In jQuery, the DataTables plugin allows us to add some extra features to the HTML table. When you create a table using the raw HTML, it looks unformatted. So, we need to style it using CSS. Also, we need to add some functionalities to the table, like pagination, searching into the table, and sorting in ascending and descending order according to a particular column's data. So, this all can take lots of effort from one developer. What if I say we add all functionalities using the DataTables plugin? Yes, you heard right. Here, we will look at the different examples ...
Read MoreHow to use CircularProgress Component in ReactJS?
The circular progress bar is an attractive UI for any application. We can show the circular loading indicator whenever our application fetches data from the server; users are uploading files or downloading data. Here, we will learn different approaches to creating a circular progress bar using the various libraries. Use the React-circular-progressbar NPM Package The react-circular-progressbar is an NPM package, and we can import the ‘circularProgressbar’ component. It takes value as a prop to show circular progress. Users should execute the below command in the terminal to install the react-circular-progressbar NPM package in the React application. npm i react-circular-progressbar Syntax ...
Read MoreHow to shard test files in protractor?
Sharding is a method for distributing data or tasks across several machines to improve performance and scalability. Sharding is a technique used in test automation to distribute test cases among various instances of the testing framework and speed up test execution. Protractor is a testing framework that facilitates sharding test cases using the Jasmine test framework. To shard test files in Protractor, a configuration file must be written that details the path of the test files and the number of instances to be created. To shorten the overall test execution time, Protractor divides the test cases across several instances and ...
Read MoreHow to update mouse location when scrolling with jQuery?
In jQuery, we can trigger the ‘mousemove’ event to detect the mouse pointer's location on the web page. Also, we can detect the scroll using the ‘scroll’ event and subtract that value from the y position to get the relative mouse location. Using the ‘overflow-y: scroll’ CSS property, we can make any div scrollable. Syntax Users can follow the syntax below to get the relative mouse position while scrolling on the div. $('#main').scroll(function (event) { if (finalScroll != $('#main').scrollTop()) { location_y -= finalScroll; finalScroll = ...
Read MoreHow to show/hide div element depending multiple values using Bootstrap and jQuery?
Sometimes, we may require to show and hide div based on the selected values. For example, you want to show the registration or login forms based on the radio button's selected value. Below, we will learn to show/hide the div elements based on the selected value using JQuery. Show/hide the div Element Depending on the Selected Value From the Select Menu In JQuery, we can get the selected option’s value from the ‘select’ menu. After that, we can access the div element according to the selected option value and show them. Syntax Users can follow the syntax below to show/div ...
Read MoreHow to create a domain name finder app in ReactJs?
An online application that enables users to look for accessible domain names using keywords or phrases can be called a domain name finder. It is a helpful tool for companies and individuals wishing to register a new domain name for their websites. Users of this software can look up domain names and display the search results along with other details like cost and availability. To build a ReactJs domain name search app, one must first plan the app's structure and decide which features to include. After configuring the development environment, a search field can be added so that users can ...
Read MoreHow to validate Passport Number is ReactJS?
Passport number is very sensitive data, and it always requires to validate. For example, you are taking the user’s data for their identification, and you can use the passport number to validate the user’s identity. Sometimes, the user may enter the wrong passport number. However, you must need to use the database to check whether the passport number matches the user’s real passport number. Still, when a user enters the passport number, you should ensure that the user has entered the correct format. This tutorial will teach us various approaches to validating passport numbers in ReactJS. Use the Validator ...
Read MoreHow to validate Octal number in ReactJS?
There are various types of number representation available such as decimal, hexadecimal, binary, octal, etc. The octal number is a number value by taking the base-8, and it accepts only numbers between 0 to 8. Here, we will learn to validate the octal number. We need to check that all characters of the octal number string should be numeric and between 1 to 8. Use the regular expression to validate octal number in ReactJS The best approach to validate the octal number is using the regular expression. We can use the test() method with the regular expression to ensure ...
Read MoreHow to validate a credit card number in ReactJS?
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