Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance
Separating objects based on properties in JavaScript means rearranging a group of objects into a new structure where objects that share the same value for a specific property are placed together. Objects are collections of key-value pairs that store large data as a key with associated information as its value. In JavaScript, you often need to group objects inside a larger object based on certain properties. Separating objects based on properties in JavaScript can be done by writing a simple function using the reduce method. In this article, we will understand how to do this effectively. Understanding the ... Read More
JavaScript provides built-in methods to join array elements into strings. The join() method converts a single array to string, while concat() combined with join() handles multiple arrays. Input-Output Scenarios Converting a single array to string: Input = [32, 45, 65, 12, 07, 55]; Output = "32, 45, 65, 12, 7, 55" // String Joining multiple arrays into a single string: Array1 = [123, 453, 656, 654, 125, 757]; Array2 = ["Hello", "honey", "bunny"]; Output = "123, 453, 656, 654, 125, 757, Hello, honey, bunny" // String Using Array.join() Method ... Read More
When sorting JavaScript object arrays with inconsistent properties, you need a custom comparator function. This scenario commonly occurs when some objects have date values while others have null or undefined dates. The requirement is to display objects without dates at the top (sorted alphabetically by name), followed by objects with dates (sorted chronologically). Problem Overview Consider an array where some objects have date properties and others don't: const items = [ { name: "Charlie", date: "2024-03-15" }, { name: "Alice", date: null }, ... Read More
We are required to write a JavaScript function that takes in two strings as the first and the second argument. Let's call these strings str1 and str2. The function should check whether there exists a substring combination in str2, that when combined yields str2. By substring combination, we mean that we can skip characters but we have to maintain the order of the characters selected from str1. For example, if the input strings are: const str1 = 'desxooajmepwele'; const str2 = 'example'; Then the output should be true because the string 'example' can be ... Read More
We need to write a JavaScript function that checks if a string can be constructed by repeating a substring multiple times. This is useful for pattern detection in strings. Problem Statement Given a string, determine if it consists of a repeated pattern. For example, "abcabcabc" is made by repeating "abc" three times, while "abcdef" has no repeating pattern. Example Input and Output For the string: const str = 'thisthisthisthis'; The expected output is: const output = true; Because the string is constructed by repeating 'this' four times. ... Read More
We are required to write a JavaScript function that takes in an array of unique words. Our function should return an array of all such index pairs, the words at which, when combined yield a palindrome word. Problem Given an array of unique words, find all pairs of indices where concatenating the words at those indices creates a palindrome. A palindrome reads the same forwards and backwards, like "racecar" or "abccba". Example Following is the code: const arr = ["abcd", "dcba", "lls", "s", "sssll"]; const findPairs = (arr = []) => { ... 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. The text cursor is one of the native cursor styles available which can be used in the FabricJS canvas. 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. Syntax new fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object) Parameters ... Read More
In this tutorial, we are going to learn how to hide the controlling borders of 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. We can customize our controlling borders in many ways such as adding a specific colour to it, a dash pattern etc. However, we can also eliminate the borders completely by using the hasBorders property. Syntax new fabric.Circle({ hasBorders: Boolean }: Object) Parameters ... Read More
In this tutorial, we are going to set the colour of the controlling corners of Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. We can also customize the text itself by using properties like fontSize, fontFamily, fontStyle, fontWeight etc. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. The cornerColor property allows us to manipulate the colour of the controlling corners when the object is active. Syntax new fabric.Textbox(text: String, { cornerColor: String }: Object) ... Read More
In this tutorial, we are going to learn about how to check if an IText object has a particular style property 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 ... Read More