Nowadays, many applications allow their users to upload and download files. For example, plagiarism checker tools allow users to upload a document file with some text. After that, it checks for plagiarism and generates a report, and users can download it. Everyone knows to create an upload file button using the input type file, but there are few developers who know to create a file download button using JavaScript/ JQuery. This tutorial will teach various approaches to trigger a file download when clicking an HTML button or JavaScript. Use the download attribute with HTML tag to trigger a file ... Read More

In JavaScript, we can use the splice() method to splice an array. The splice() method inserts or deletes single or multiple elements from the array. We can pass the starting index as the first parameter of the splice() method, from which we can insert or delete the elements. It takes the number of elements to delete from the array as a second parameter and array values as the third parameter to insert into the array. This tutorial will teach us to splice an array without mutating the original array. Mutating the original array means making changes to the array. Whenever ... Read More

We can create tabs using HTML, CSS & JavaScript. There can be two types of tabs. One is horizontal tabs, and another is vertical tabs. The tabs allow us to show different contents in very less space as we can show the different content according to the different tabs. We will learn to create horizontal and vertical tabs from scratch using HTML, CSS, and JavaScript. Create horizontal tabs We can show all tabs in a single row by creating horizontal tabs. Also, we can show the content of the selected tab below all tabs. Syntax Users can follow the syntax ... Read More

The hamburger menu icon has three vertical bars, which the navbar uses to expand and collapse the menu on mobile and tablet devices. This tutorial will teach us to create a hamburger menu from scratch. Here, we will use HTML, CSS, JavaScript, and Bootstrap to create a stylish hamburger menu with a navbar. Steps Users can follow the steps below to create a navbar with a hamburger menu icon. Step 1 − Create a div with a container class containing a navbar and an expandable menu. Step 2 − After that, create a div with a header class inside ... Read More

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 More

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 More

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 More

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

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

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