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
Articles by Shubham Vora
Page 40 of 80
How to create own Ajax functionality?
An Ajax (Asynchronous JavaScript and XML) request is an HTTP request made using JavaScript, typically with the XMLHttpRequest object, to exchange data with a server and update a specific part of a web page without requiring full page refresh. There are two ways to create own Ajax functionality. You can use JSONPlaceholder API or your own file. We will discuss these two ways in detail in this tutorial. Using JSONPlaceholder API JSONPlaceholder is a free online REST API that you can use to test and practice your development skills Syntax Users can follow the below syntax for creating an ...
Read MoreHow to show Page Loading div until the page has finished loading?
Rather than showing the whole white or black screen while loading the page, it is better to show the loading indicator, which also improves the UX of the application. Nowadays, there are some libraries available to show loading indicators. However, we can use HTML and CSS to create a customized loading indicator div. In this tutorial, we will use HTML, CSS, and JavaScript to show page loading div until the page has finished loading Use the onreadystatechange event to show the loading indicator while loading the page In JavaScript, the onreadystatechange event triggers whenever the state of the web ...
Read MoreHow to serialize a cookie name-value pair into a Set Cookie header string in JavaScript?
The cookie allows us to store users’ data in the web browser for quick response. For example, when a user opens the profile page in any web application, the web page receives the data from the server. The server also sends the cookies containing the data to store in the web browser. When a user goes on the profile page again, it fetches the data from the cookie rather than fetching it from the server to load the webpage quickly. To get data browser looks in the cookie first, and if it doesn’t find data stored in the cookie, it ...
Read MoreHow to use the handleChange() function in react component?
The handleChange() is not a built-in function in the React, but as its name suggests, we can define it to handle changes that users made in the input. In the react, we need to handle the input whenever a user enters some value in the input field to make it editable. Here, we will learn to use the handleChange() function with single and multiple inputs. Use the handleChange() function with functional components In react, we can define the components using the function keyword and call them functional components. We can use hooks to manage the input value while using the ...
Read MoreHow to use AppBar Component in Material UI?
The Material UI is a library containing various components with different styles and responsive designs. For example, Material UI contains an AppBar component, which we can directly import into the React component and use as a child component of other components. Also, the Material UI library contains different components like buttons, links, tab bars, pagination etc. Furthermore, we can manipulate every component by passing a prop while using the component. For example, we can make an AppBar responsive by passing the respected props. This tutorial will teach us to use the AppBar component in Material UI. Users should install the ...
Read MoreHow to set focus on an input field after rendering in ReactJS?
While working with the forms in React, sometimes we may require to focus on any input. For example, we want to enable the submit button only if the user enters some text in the input field. In such cases, we can focus on the input so that users know that they have to enter some text in the input field to enable the button. In this tutorial, we will learn multiple ways to focus on the input field after rendering in ReactJS. Use the autoFocus attribute with the input field We can use the autofocus attribute in HTML to focus ...
Read MoreHow to send one or more files to an API using axios in ReactJS?
ReactJS is a frontend library, so we can use it to create web pages. It’s natural to show data in real-time applications, and the backend manages it. So, whenever React needs data to show on the web page, it gets it from the backend by making API calls. Sometimes, we may require to send data to the backend to store it in the database. For example, we have taken the user’s profile image and need to send it to the backend to store it in the database. In many cases, we require to send single or multiple files to ...
Read MoreHow to create Menu Item Component in ReactJS?
The Menu item component shows users various menu options, and they can select any option from the menu item component. The menu item component in React Js is similar to the element in HTML, or we can say it is a dropdown menu. Also, menu components contain a submenu to show multiple options for any menu item. Developers should use the HTML tag to implement menu item components from scratch. However, many React libraries available on the internet provide pre-designed Menu item components. So, we will use different libraries to build the menu item components below. Use ...
Read MoreHow to create Instagram Like button in ReactJS?
Most of all, you have used Instagram and have looked at the Like button given below every post. There are two things to notice about Instagram Like button: one is its shape is a heart shape which we need to create, and another is it fills up with red colour when we Like someone's post. There are two different ways to create Instagram Like button. One is created from scratch using CSS and JavaScript, and another uses two different icons. One is filled, and another is outlined. Use the Material UI library We will use the FormControlLabel component from the ...
Read MoreHow to Enforce the type of the indexed members of a Typescript object
The programming language TypeScript is based on JavaScript and is strongly typed, object-oriented, and compiled. The language is improved with tools like static typing, classes, and interfaces that help with early error detection and make JavaScript more manageable. One of TypeScript's features is the ability to enforce the types of an object's indexed members, and this process is also referred to as an index signature. An index signature is a set of key-value pairs describing the many properties an object may have. The type of the property name and the type of the property value are specified, respectively, using the ...
Read More