Static variables can be defined as a class property that is used in a class and not on the class instance. This type of variable is stored in the data segment area of the memory. The value assigned to these types of variables is shared among every instance that is created in the class.We need to use the static keyword for creating any static entity like a static variable, static function, operators, properties, etc. The value of a static variable is set at the runtime of the application and serves as a global value for the whole application.Example 1In the ... Read More

The addEventListener and the on-click event both listen for an event. Both these event methods record an event and execute a function based on that event whenever a button is clicked. Though there is a difference between both these events work.In this article, we are going to explore the differences between the addEventListener and the on-click function in JavaScript.1. addEventListenerThe addEventListener method uses an event handler to attach it to the specified elementSyntaxelement.addEventListener(event, listener, useCapture);Parametersevent − Event can be defined as any valid JavaScript event. The events are generally used without the on prefix (as used in the onclick method).Listener ... Read More

JavaScript has become an inevitable part of modern-day websites. Each and every website requires the latest JavaScript support and works flawlessly once allowed. We have a toggle inside every browser to switch on and off the JavaScript on our websites. If JavaScript is not enabled in our browsers, they react abnormally and prevent the user from using most of the functions and events.Therefore, to use the websites efficiently we need to enable JavaScript. Following are the most popularly used browsers. We will be looking to enable JavaScript in these −Google ChromeMozilla FirefoxSafariGoogle ChromePlease follow the below steps to enable JavaScript on ... Read More

We can easily create a simple color picker on a palette in Javascript. The primary colors on a color picker are RGB i.e. Red, Green, and Blue. With the help of mixing these colors, we can form any color we want.In this article, we will be learning about how to get the RGB value from the user and form different colors with the help of CSS using the RGB color properties. The color intensity of RGB ranges from 0 to 255 where 0 is the least intensity and 255 is the highest intensity.When the intensity of all the 3 coolers ... Read More

In this article, we are going to create a calculator using JavaScript We will be using the basic math formulas to calculate the profit and loss. We will be returning the result in percentage along with the actual values.To calculate the Profit and Loss we need two things that are: CP (Cost Price) and SP (Selling Price).Formulas to Calculate Profit and Loss −Profit: SP – CPProfit Percentage: Profit/CP * 100Loss: SP – CPLoss Percentage: Loss/CP * 100Example 1In the example below, we have created a calculator that will calculate the profit and loss percentage as per the cost price and ... Read More

In this article, we are going to explore on how to create a chart after fetching the JSON data. To fetch JSON data we use fetch() method of Fetch API. We will first fetch the data and once the data is available we will feed it into the system to create a chart. The Fetch API provides a simple interface for accessing and manipulating HTTP requests and responses.Syntaxconst response = fetch(resource [, init])Parametersresource − This is the resource path from where the data is fetched.init − It defines any extra options such as headers, body, etc.ApproachThe steps can be defined ... Read More

In this article, we are going to create a canvas with a text cursor using FabricJS. A text cursor indicates text which can be selected. text is one of the native cursor style available which can be used in the FabricJS canvas too. FabricJS provides various types of cursors like default, all-scroll, crosshair, col-resize, row-resize, etc., that reuse the native cursor under the hood. Each of these cursors look slightly different based on operating system.Syntaxnew fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object)Parameterselement − This parameter is the element itself which can be derived using document.getElementById() or the id of ... Read More

In this article, we are going to create a canvas with a progress cursor using FabricJS. A progress cursor indicates that a program is busy in the background but allows the user to interact with the interface. progress is one of the native cursor style available which can be used in the FabricJS canvas too.FabricJS provides various types of cursors like default, all-scroll, crosshair, col-resize, row-resize, etc., which are reusing the native cursor under the hood. Each of these cursors look slightly different based on operating system.Syntaxnew fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object)Parameterselement − This parameter is the ... Read More

In this article, we are going to create a canvas with a help cursor using FabricJS. The question mark in a help pointer indicates that useful information for the user is present. It is also often accompanied by useful links and can be seen while using a new application. help is one of the native cursor style available which can be used in the FabricJS canvas too.FabricJS provides various types of cursors like default, all-scroll, crosshair, col-resize, row-resize, etc., that reuse the native cursor under the hood. Each of these cursors look slightly different based on operating system.Syntaxnew fabric.Canvas(element: HTMLElement|String, ... Read More

In this article, we are going to create a canvas with a wait cursor using FabricJS. A wait cursor can be used to indicate a busy program in the background which also stops the user from interacting with the interface. wait is one of the native cursor style available which can be used in the FabricJS canvas too.FabricJS provides various types of cursors like default, all-scroll, crosshair, col-resize, row-resize, etc. that reuse the native cursor under the hood. Each of these cursors look slightly different based on operating system.Syntaxnew fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object)Parameterselement − This parameter is ... Read More