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
-
Economics & Finance
Articles on Trending Technologies
Technical articles with clear explanations and examples
Validating a password using JavaScript
Password validation is a critical security feature in web applications. JavaScript provides powerful tools to implement client-side password validation that checks for complexity requirements like length, character types, and special symbols. This helps ensure users create strong passwords that protect their accounts from unauthorized access. Problem Statement We need to create a JavaScript function that validates passwords based on these criteria: Password length must be between 6 and 20 characters Must contain at least one digit (0-9) Must contain at least one lowercase letter (a-z) Must contain at ...
Read MoreMaximum subarray sum in circular array using JavaScript
We need to write a JavaScript function that finds the maximum possible sum of a subarray in a circular array. In a circular array, the last element connects to the first element, creating additional subarray possibilities. Problem Statement Given an array of integers, find the maximum sum of any non-empty subarray. The array is considered circular, meaning we can wrap around from the end to the beginning. Example: Input: [2, -2, 3, -1] Output: 4 Explanation: Maximum subarray is [3, -1, 2] (wrapping around) Algorithm Approach The solution uses two key insights: ...
Read MoreHow to create a canvas with progress cursor using FabricJS?
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. Syntax new fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: ...
Read MoreHow to set the horizontal and vertical radius of an Ellipse using FabricJS?
In this tutorial, we are going to learn how to set the horizontal and vertical radius of an Ellipse using FabricJS. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we will have to create an instance of fabric.Ellipse class and add it to the canvas. We can customize an ellipse object by specifying its position, color, opacity and dimension. However, the most important properties are rx and ry which allow us to assign the horizontal and vertical radius of Ellipse. Syntax new fabric.Ellipse({ rx : Number, ry: Number }: ...
Read MoreHow to create a Triangle with crosshair cursor on moving objects using FabricJS?
In this tutorial, we are going to create a Triangle with a crosshair cursor on moving objects using FabricJS. The crosshair is one of the native cursor styles 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. The moveCursor property sets the style of the cursor when the object is moved around in the canvas. This property is useful for providing visual feedback to users about the current ...
Read MoreHow to set the border scale factor of Textbox using FabricJS?
In this article, we are going to set the border scale factor of Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. We can use the borderScaleFactor property which specifies the scale factor of the object's controlling borders. Syntax new fabric.Textbox(text: String, { borderScaleFactor: Number }: Object) Parameters text − This parameter accepts a String which is the text string ...
Read MoreHow to change the selection color of text in IText using FabricJS?
In this tutorial, we are going to learn about how to change the selection color of text in IText using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text. Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not true ...
Read MoreHow to get the object scale factor of Image using FabricJS?
In this tutorial, we are going to learn how to get the object scale factor of Image using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to get the object scale factor of Image, we use the getObjectScaling method. Syntax getObjectScaling(): Object Parameters The getObjectScaling method does not take any parameters. Return Value This method returns an object containing the scale factors: ...
Read MoreBuild a Site Bookmark App with JavaScript by using Local Storage
In this tutorial, we'll build a Site Bookmark app using JavaScript, HTML, and CSS. The app will use Local Storage to save bookmarks permanently without requiring a database. Local Storage is a web storage API that allows client-side data storage. Data is stored as strings and persists even after closing the browser session. Storage capacity ranges from 2MB to 10MB depending on the browser. Features Our bookmark app will include: Add new bookmarks with site name and URL Visit saved websites Delete unwanted bookmarks Persistent storage using Local Storage File Structure ...
Read MoreHow to Convert JSON String to Array of JSON Objects Using JavaScript?
To convert JSON string to array of JSON objects using JavaScript is necessary because JSON strings cannot be directly modified or manipulated, so we need this conversion which allows us to access, modify and iterate over each item. We will be discussing three different approaches for this conversion from JSON strings to array of JSON objects. In this article we are having JSON string, our task is to convert JSON string to array of JSON objects using JavaScript. Approaches to convert JSON string to objects Here is a list of approaches to convert JSON string to array ...
Read More