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
How to create a dropdown list using JavaScript?
We will learn to create a dropdown list using HTML and JavaScript below. Before starting with the article, let's understand the dropdown list and why we need to use it. The dropdown list gives multiple choices to users and allows them to select one value from all options. However, we can do the same thing using multiple radio buttons, but what if we have hundreds of choices? Then we can use the dropdown menu. When users click the dropdown button, it opens all the choices, and users can select anyone. Also, the dropdown provides a better user experience ...
Read MoreIntroduction to Anime.js
Anime.js is a lightweight JavaScript animation library with a simple yet powerful API. It works seamlessly with CSS properties, DOM elements, SVG attributes, and JavaScript objects, making it an excellent choice for creating smooth web animations without the complexity of traditional JavaScript animation methods. Traditional JavaScript animations require manually calculating property changes over time, which becomes complex even for simple effects. Anime.js simplifies this process by providing a unified interface for animating multiple properties simultaneously, handling timing calculations, and managing animation states automatically. Key Features Anime.js offers several advantages over vanilla JavaScript animations: Lightweight: Small ...
Read MoreSorting according to weights of numbers in JavaScript
In this problem, we need to sort an array of numbers according to their weights using JavaScript. The weight of a number is defined as the sum of its digits, and we'll create functions to calculate weights and perform the sorting. Understanding the Problem We have to sort numbers according to their weights, where a weight is the sum of a number's digits. For example, if we have an array [19, 11, 12, 15]: Weight of 19 = 1 + ...
Read MoreFinding two missing numbers that appears only once and twice respectively in JavaScript
We need to write a JavaScript function that finds two numbers in an array where all other numbers appear three times, except one number that appears twice and another that appears only once. Problem Statement Given an array where most numbers appear three times, find the two numbers that appear exactly twice and exactly once respectively. Example Let's solve this step by step: const arr = [1, 1, 1, 2, 2, 3]; const findMissing = (arr = []) => { let x = 0; // number appearing once ...
Read MoreMaking two sequences increasing in JavaScript
In JavaScript, making two sequences strictly increasing by swapping elements at the same indices is a dynamic programming problem. A sequence is strictly increasing if each element is greater than the previous one. Problem Statement Given two arrays arr1 and arr2, we can swap elements at any index i between the arrays. The goal is to find the minimum number of swaps needed to make both arrays strictly increasing. Understanding the Example Consider the input arrays: const arr1 = [1, 3, 5, 4]; const arr2 = [1, 2, 3, 7]; console.log("Original arrays:"); console.log("arr1:", ...
Read MoreHow to create a canvas with a class using FabricJS?
In this article, we will see how to create a canvas with a class on it using the containerClass property. In order to have access over the native HTML canvas element, we can add a wrapper class over it. This class allows us to have control over the element to add interactivity or styling as per requirement. Syntax new fabric.Canvas(element: HTMLElement|String, { containerClass: String}: Object) Parameters element − This parameter is the element itself which can be derived using document.getElementById() or the ...
Read MoreHow to add shadow to a Circle using FabricJS?
In this tutorial, we are going to learn how to add a shadow to a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will create an instance of fabric.Circle class and add it to the canvas. Our circle object can be customized in various ways like changing its dimensions, adding a background color or even adding a shadow to it. We can add a shadow to a Circle by using the shadow property. Syntax new fabric.Circle({ shadow : fabric.Shadow }: Object) Parameters ...
Read MoreHow to set the minimum allowed scale value of Circle using FabricJS?
In this tutorial, we are going to learn how to set the minimum allowed scale of Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will have to create an instance of fabric.Circle class and add it to the canvas. We can customize a circle object by adding a fill colour to it, eliminate its borders or even make changes in its dimensions. Similarly, we can also set its minimum allowed scale by using the minScaleLimit property. Syntax new fabric.Circle({ minScaleLimit : Number }: Object) ...
Read MoreHow to set the angle of rotation of a Triangle using FabricJS?
In this tutorial, we are going to set the angle of rotation of a Triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle class and add it to the canvas. The angle property in FabricJS defines the angle of 2D rotation of an object. We also have the centeredRotation property that allows us to use the center point of a triangle as the origin of transformation. Syntax new fabric.Triangle({ angle: Number, ...
Read MoreHow to set the vertical origin of transformation of IText using FabricJS?
In this tutorial, we are going to learn how to set the vertical origin of transformation of 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 for ...
Read More