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 Mohit Panchasara
Page 6 of 7
Loading Text Animation Effect using CSS
Nowadays, the animation is the most powerful feature in the applications to attract more users, and it increases users' interest in exploring the application. In web applications, we can create animations using HTML and CSS. However, we can create animations using JavaScript, but it makes the website slower. In this tutorial, we will learn to load text animation using HTML and CSS. It is important to show loading text with animation while fetching data from API or loading web pages to make it more attractive. Example 1 In the example below, we created the ‘loader’ div and ‘loader-inner’ div element ...
Read MoreHow to send button value to PHP backend via POST using ajax?
AJAX (Asynchronous JavaScript and XML) makes web pages more responsive, interactive, and dynamic by enabling server communication without requiring a page to load. JavaScript is used to send and receive data from a server using various technologies, including XML, JSON, and HTML. In these, JSON is the most popular. AJAX is frequently used to transmit information from a web page to a server-side script, like a PHP script. The XMLHttpRequest object, included in most contemporary web browsers, can be used for this. You can establish a connection to a given URL, send data to that URL, and then wait ...
Read MoreHow to use Container Component in ReactJS?
The container component creates a container on the web page like a box. Also, we can set the height of the container according to the height of the inside content. Furthermore, we can set the variable width for the Container component. Basically, we can use the Container to create a Rectangular box and add some HTML content inside that. Users should use the below command to install the Material UI in the React project. npm install @mui/material @emotion/react @emotion/styled Syntax Users can follow the syntax below to use the Cotnainer component of Material UI. ...
Read MoreHow to use Checkboxes in ReactJS?
The checkbox allows users to select multiple values in the form. Also, it is useful to take the Boolean response from the users. For example, an Instagram-like button is a kind of checkbox. When users like the post, it shows the filled icon; Otherwise, it shows the border icon. Here, we will learn to handle single and multiple checkboxes in ReactJS. First, we will create the custom checkboxes and then learn to use the checkbox component of Material UI. Create a Custom Checkbox Component in ReactJS We can use the normal HTML input to create a checkbox in ...
Read MoreHow to upload file without form using JavaScript?
Sometimes, developers may require to upload a file without using the form in JavaScript. Generally, we create a form to get the data and files from the users, but in this tutorial, we will learn to get the file from users without a form and send it to the backend. Use the FormData() object and Ajax Request The FormData object allows us to store the form data in the key value pair. We need to initialize the variable with a constructor. We can allow users to upload files using HTML input and store that file in form data. After ...
Read MoreHow to uniquely identify computers visiting web site in JavaScript?
Whenever we create any application or website, we require to identify computers visiting the website uniquely. There are a lot of benefits to uniquely identifying computers. For example, you are providing some services to your users. By uniquely identifying the computer, you can give free service for a trial purpose when a user visits your website for the first time from a new device. When a user visits again, you can ask users to buy premium or subscribe to your application. Here, we will use cookies to identify the computer visiting web site. What are cookies? The ...
Read MoreHow to test a value x against predicate function and returns fn(x) or x in JavaScript?
Testing the value x against the predicate function means checking if x is evaluated to be valid for a particular condition. If x is following the particular condition, we need to perform some operation on the x using any function named ‘fn’ and passing it as a function parameter. Otherwise, we need to return the value of x itself. Syntax Users can follow the syntax below to test a value x against the predicate function and return the fn(x) or x in JavaScript. let result = predicate(x) ? operation(x) : x; In the above syntax, we ...
Read MoreHow to terminate a script in JavaScript?
The termination of the script means that it stops executing the JavaScript code. In some emergency cases, developers requires to abort the execution of JavaScript code in the middle while the script is executing. Also, we can use the if-else statement to decide when to terminate the script execution and when to continue. Here, we will learn different ways to terminate the script midway. Use the Return Statement The return statement is used to terminate the execution of any code inside the script. Once we execute the return statement inside the function, the code written after the return statement ...
Read MoreHow to stop event propagation with inline onclick attribute in JavaScript?
Sometimes, we require adding the same events on the nested HTML elements. For example, we have two divs, one is parent div, and another is child div. Now, we need to add the onclick event on the parent div and child div and execute the different functions when users click on the parent div and child div. In this case, it will always execute the event on the parent div and child div. Let’s understand executing the same event on the nested HTML elements via the example below. Example In the example below, we have created the two ...
Read MoreHow to create Price Range Selector in ReactJS?
The price range selector allows us to select two values representing the range. Sometimes, we require to create a range slider to allow users to select a range. For example, we can allow users to select a minimum and maximum price using the price range selector. We can also show the products by filtering based on the selected minimum and maximum prices. In this tutorial, we will learn to create a price range selector using various libraries in ReactJS. Using the material UI to create a range selector The material UI provides various components we can import into the ...
Read More