The button is used to perform some actions like form submission, file upload, link click, web page routing etc. The Material Ui provides the pre-styled button component, which users can import into the React application and use inside the React component. Different variants of the button are available in the Material UI, and users can use any according to their requirements. Execute the below command in the terminal to install the Material UI library. npm install @mui/material @emotion/react @emotion/styled Syntax Users should follow the syntax below to use the Button component of the Material Ui library. Click ... Read More

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 More

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 More

In JavaScript, sometimes, we are required to use the variables as an object key. For example, when fetching data from the API and not sure about all the response data attributes, we must iterate through the response object and store every property of it. However, we can’t use the variables as a key while creating the object, but after creating, we can add the variable properties to the object. Syntax Users can follow the syntax below to use a variable for a key in a JavaScript object. object[key] = value; In the above syntax, ‘key’ is a variable containing ... Read More

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 More

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 More

In JavaScript, an object contains the properties in the key-value format. We can access any property of an object using the property name by taking the object as a reference. Sometimes, we try to access the object property that doesn’t exist in the object. In such cases, we get the undefined value. Let’s understand it by the example below. Example (Accessing the Object Properties) In the example below, we have created the object and added some properties. Also, we have added some nested properties. After that, we try to access the ‘prop5’ property which is a nested property of the ... Read More

The code often throws an error, and handling errors is more important. JavaScript also allows users to throw a custom error using the ‘throw’ keyword. We can catch the errors in the catch block. We can use the try-catch syntax to catch errors thrown by normal functions. Let’s understand it by the example below. Example 1 (Throw Errors in Regular Function) In the example below, we have created the throwError() regular function, which uses the throw keyword to throw an error with the custom error message. We have executed the function inside the try block. If the function throws any ... Read More

The html2pdf is a JavaScript package that allows developers to convert the html to canvas, pdf, image, etc. It takes html as a parameter and adds that to the pdf or required document. Furthermore, it also allows users to download the document after adding the html content to that. Here, we will access the form and add it to the pdf using the html2pdf npm package. We will see different examples of adding form data to pdf. Syntax Users can follow the syntax below to take html form data as text and send them to html2pdf. var element = document.getElementById('form'); ... Read More

Whenever you develop a website or application for a worldwide business, you must also focus on which language your audience can understand. For example, English is an international language, but in some parts of the world, people don’t understand English as they speak German, Spanish etc. However, if you have observed, then some websites provide the option to change the website's language. You just need to click on the button, which changes the whole website's language. Have you ever thought about how it is possible? Here, we will learn to switch the language of the web page using JavaScript. Syntax ... Read More