Overview To perform a certain task first we need to access that particular element by its class or by id so before accessing the element we check whether that class is present in that particular element or not. The classList object contains the built-in method classList.contains() in JavScript. This method determines whether the given element belongs to the specified class. This whole process will take place, as first we have to access that element by getElementById(), getElementsByClassName(), or any other method. After accessing it, we have to check for the class with the classList.contains() method. Syntax The syntax used in ... Read More
The readonly is an HTML attribute that we can add to any HTML tag. Whenever we use the readonly attribute with any HTML element, it becomes non-editable. Users can’t write into the text field but can only read. In this tutorial, we will learn to add the readonly attribute to the HTML element using the various methods of jQuery. Use the attr() method of jQuery The attr() method of jQuery sets the attribute to the HTML element. It takes two parameters, and we can pass the attribute name as the first parameter and the attribute value as the second ... Read More
The grid means the structure of rows and columns like a table. When we create a table using the HTML tag, we can create every row and column of different dimensions, but the Grid component of the Material Ui library allows us to do so. We can use the Grid component of the Material UI as a container and item. Also, we can adjust the grid automatically according to the dimensions of the device screen. Users first need to install the Material Ui library to use the Grid component in the React project using the below command. ... Read More
Overview The existence of a key in an object can be checked using AngularJS. The key in an object is unique and cannot be duplicated. As object is a collection of different data types in Key-Value form, which contains String, Number type of data into a single reference variable. To check the existence of a key, we will use the "in" operator, which will check the object and return true or false. Syntax The syntax used in this problem is − if (key in objectName ) { action } else { action } ... Read More
The fab component is a short form of the floating action button. You may have seen the floating action button in many Android applications at the bottom right corner. However, it's not fixed that you need to add the floating action button at the bottom right corner, but it is the most used place. Users can use the Fab component of Material UI to create floating action buttons with different icons. To start with the Material UI, execute the below command in the terminal in the React project directory. npm install @mui/material @emotion/react @emotion/styled Syntax Users can ... Read More
Overview In today's world there are various browsers available on the system. So sometimes there are certain Cascading Style Sheets (C.S.S.) property that does not run on that browser. So to check which CSS properties are supported for that specific browser, JavaScript has the in-built method CSS.supports(), which checks whether that specific property is supported by the browser or not. The supports() method is supported by all the browsers: Opera, Edge, Chrome, and Firefox. Syntax The CSS.supports() method takes a key-value pair as input, which is in String format. The basic syntax used is − CSS.supports(“propertyName:value”); supports() − ... Read More
The setInteral() method allows us to continuously trigger a callback function after every particular time period. We can pass the callback function as the first parameter to trigger after every time period, and the time period in the milliseconds as a second parameter. The setInterval() method invokes the callback function after a particular number of milliseconds for the first time. Now, the problem is we need to invoke the callback function instantly for the first time at 0 milliseconds, and after that, we need to invoke it continuously in the given time period. Example In the example below, we created ... Read More
The range input allows a selection of any value between the particular range of values. Using JavaScript, we can get the input value that users have entered in the range input. The onchage event triggers only when the user releases the mouse key. So, it will not update the value while dragging the range slider. You can face this problem in all browsers, such as chrome, safari, but not only in Firefox. Users can follow the example below to check whether the input value is updated while dragging the range input. Example 1 (Input values will not update while dragging ... Read More
Generally, developers add the submit button to submit the input field's text. However, if they allow users to submit the input value by pressing enter, it improves the UX of the application. Here, we will learn the general way to detect the key press using the key listener event. Afterwards, we can perform any operation whenever the user presses the enter key button. Syntax Users can follow the syntax below to detect whenever the user presses the enter key. input.addEventListener("keypress", function (event) { if (event.keyCode == 13) { // enter pressed ... 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