Found 8591 Articles for Front End Technology

Destructuring of Props in ReactJS

Prince Yadav
Updated on 26-Jul-2023 15:18:21

7K+ Views

ReactJS is a popular JavaScript library that has gained immense popularity in the last few years. It provides an efficient way to build complex user interfaces with reusable components. One of the essential features that make ReactJS a powerful tool is the way it handles props. Props are properties that are passed down to components, allowing for customization and dynamic rendering of data. Destructuring of Props is a feature in ReactJS that makes it easier to handle props in components. In this tutorial, we'll explore the concept of destructuring in JavaScript and how it can be used in ReactJS to ... Read More

if/else condition in CSS

Mohit Panchasara
Updated on 14-Nov-2024 10:08:52

6K+ Views

Users can not directly use if/else condition in CSS. For conditional styling in CSS, we have to use alternatives of if/else condition. We will be understanding three different alternate ways to use conditional styling in CSS. In this article, our task is to implement if/else condition in CSS. Since if/else condition is not supported in CSS, we will be understanding its alternate approaches. Approaches for Using Conditional Styling in CSS Here is a list of approaches for using conditional styling in CSS which we will be discussing in this article with stepwise explanation and complete example codes. ... Read More

How to replace a string by another string in Angular JS?

Mohit Panchasara
Updated on 26-Jul-2023 12:57:29

1K+ Views

Angular JS is a popular JavaScript framework that offers developers a range of useful tools for creating dynamic web applications. A common requirement in web development is to change specific words or phrases within a given text. In this tutorial, we will explain how to replace one string with another using AngularJS. We will provide clear, step-by-step instructions to accomplish this task effectively. To make it easier to understand, we will use a practical example to demonstrate the powerful features of Angular JS for string replacement. Importance of Replacing a String Before we explore the technical aspects, let's first grasp ... Read More

How to prevent XSS with HTML/PHP?

Mohit Panchasara
Updated on 26-Jul-2023 12:52:45

695 Views

Cross-Site Scripting (XSS) is a major threat to web application security because it allows attackers to inject malicious scripts into reputable websites. This attack depends on innocent consumers, exposing important information or potentially gaining control of their accounts. Understanding and combating XSS threats is critical for maintaining a strong security posture as web applications become more complex and dynamic. In this article, we will dive into XSS attacks and look at possible prevention strategies. What are XSS Attacks? Cross-Site Scripting (XSS) attacks are a common security risk in web applications. Attackers take advantage of vulnerabilities in web pages to inject ... Read More

How to remove controls of a text canvas using Fabric.js?

Mohit Panchasara
Updated on 26-Jul-2023 12:48:36

621 Views

Fabric.js is a powerful tool written in JavaScript that makes it easier to build applications with interactive and dynamic graphics using HTML5 canvas. It offers many useful features, including the ability to add controls such as resizing and rotation handles to objects on the canvas. Sometimes, though, you might want to take away these controls from certain objects, like text, to limit what users can do. In this article, we'll show you how to remove controls from a text canvas using Fabric.js, using a simple example that you can follow along with. How to Remove Controls of a Text? To ... Read More

How to pass data into a bootstrap modal?

Mohit Panchasara
Updated on 26-Jul-2023 12:45:21

5K+ Views

Bootstrap is a CSS framework allowing developers to style HTML elements without writing any CSS code. We can use pre-defined classes of Bootstrap with HTML elements to style them. The Bootstrap also contains the modal. The simple meaning of the modal is the pop-up box. For example, an alert box, payment box, etc. In this tutorial, we will learn to add data to the bootstrap modal using JavaScript or JQuery. One scenario when we require to add data to the bootstrap modal is that we allow users to select any product. After that, we need to open a payment modal ... Read More

HTML width/height Attribute vs CSS width/height Property

Mohit Panchasara
Updated on 26-Jul-2023 12:40:47

489 Views

While developing web pages, many times, developers require to manage the size of different HTML elements such as image, div element, span element, etc. Developers can use the width and height CSS properties or HTML attributes to manipulate the dimensions of a particular element. In this tutorial, we will see the difference between the width/height HTML attribute and CSS properties. Width and Height HTML Attributes The width/height attributes in HTML are used for the presentation. It takes the width and height values in the ‘px’, ‘%’, etc. units but not in ‘rem’ units. Also, if we don’t define the unit ... Read More

How to record and play audio in JavaScript?

Mohit Panchasara
Updated on 26-Jul-2023 12:38:11

5K+ Views

Are you also willing to add a custom audio recording feature to your web application? If yes, you are in the right place, as we will learn to record and play audio using JavaScript in this tutorial. Some applications like Discord allow you to record the audio and store it inside that to play it anytime. The recorded audio can also be used as a meme for fun, alerts in the discord meetings, etc. We can also use the mediaRecorder API of JavaScript to add the recording audio feature to our web application. Here, we will learn a step-by-step guide ... Read More

How to put the text inside of a created icon?

Mohit Panchasara
Updated on 26-Jul-2023 12:36:34

804 Views

Sometimes, developers require to put the text in the icons. For example, adding the total number of likes inside the ‘like’ icon makes UI better, adding a comment inside the comment icon, showing a particular number in any icon, etc. In HTML, we can add the text and icon both separately. After that, we can set the position of the text to place them in the middle of the icon. In this tutorial, we will learn different examples of putting the text inside a created icon. Syntax Users can follow the syntax below to set the position of the text ... Read More

How to print a page using jQuery?

Mohit Panchasara
Updated on 26-Jul-2023 12:35:20

5K+ Views

Allowing users to print the web page can be a great feature in many scenarios. For example, users can print the invoice, the whole article if they are on the web page containing the blog, some important data, etc. The JQuery contains the print() method allowing us to print the HTML content of the web page by adding it into the pdf format. It opens the print pop-up, and when the user clicks the print button, it starts printing the page if the printer is connected. Otherwise, it saves the data in the local computer in the pdf file format. ... Read More

Advertisements