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 Rectangle with crosshair cursor on hover over objects using FabricJS?
In this tutorial, we are going to create a Rectangle with a crosshair cursor on hover over objects using FabricJS. Crosshair is one of the native cursor styles available which can be used on a FabricJS canvas too. FabricJS provides various types of cursors like default, all-scroll, crosshair, col-resize, row-resize, etc., which reuse the native cursor under the hood. The hoverCursor property sets the style of the cursor when hovered over a canvas object. Syntax new fabric.Rect({ hoverCursor: String }: Object) Parameters Options ...
Read MoreTaffyDB – A JavaScript Database for Your Browser
TaffyDB is a lightweight and powerful in-memory database that can be used in both browser and server-side applications. It is open-source and free to use. In this tutorial, we will take a couple of examples to show how you can use TaffyDB to store some data, execute some queries on the data, and also perform important operations on the data. Getting Started with TaffyDB The first step is to include TaffyDB in your project. You can use the CDN link or download the library directly from the official repository. Basic Example - Creating and Reading Data ...
Read MoreHow to lock the horizontal movement of Line using FabricJS?
In this tutorial, we are going to learn how to lock the horizontal movement of a Line using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. We can also specify whether we want the line object to move only in the Y-axis. This can be ...
Read MoreHow to create Hamburger Menu for mobile devices?
The hamburger menu icon has three horizontal bars that expand and collapse navigation menus on mobile and tablet devices. This tutorial teaches you to create responsive hamburger menus using HTML, CSS, JavaScript, and Bootstrap. We'll cover two approaches: a custom implementation from scratch and a Bootstrap-based solution for faster development. Creating a Custom Hamburger Menu Follow these steps to build a hamburger menu without external libraries: Step 1 − Create a container div with navbar and expandable menu sections. Step 2 − Add a header div containing the menu icon and logo/text elements. Step 3 ...
Read MoreHow do you display JavaScript datetime in 12hour AM/PM format?
The most practical way to display datetime for efficient time analysis is in a 12-hour AM/PM format. This method clarifies the distinction between morning and evening, making times like "2:30 PM" more intuitive than "14:30" in 24-hour format. This article will explain various methods for displaying JavaScript datetime in 12-hour AM/PM format. Using the toLocaleString() Method The toLocaleString() method returns a formatted date string according to the specified locale and options. It's the most straightforward approach for 12-hour format conversion. Syntax Date.toLocaleString(locales, options) Parameters locales − Language/region ...
Read MoreMerge arrays in column wise to another array in JavaScript
When working with multiple arrays, you often need to combine their elements column-wise to create structured data. This technique merges arrays by their corresponding indices to form an array of objects. Problem Statement Suppose we have three arrays of numbers like these: const code = [123, 456, 789]; const year = [2013, 2014, 2015]; const period = [3, 4, 5]; We need to merge these arrays column-wise to create an array of objects where each object contains the corresponding elements from all three arrays: const output = [ ...
Read MoreHow to merge two different array of objects using JavaScript?
Suppose, we have two different array of objects that contains information about the questions answered by some people: const arr1 = [ { PersonalID: '11', questionNumber: '1', value: 'Something' }, { PersonalID: '12', questionNumber: '2', value: 'whatever' }, { PersonalID: '13', questionNumber: '3', value: 'anything' }, { PersonalID: '14', questionNumber: '4', value: 'null' } ]; const arr2 = [ { questionNumber: '2', chID: '111', cValue: 'red' }, { questionNumber: '2', chID: '112', cValue: ...
Read MoreChecking for increasing triplet in JavaScript
In JavaScript, an increasing triplet refers to three numbers in an array where each number is greater than the previous one, appearing in sequence (not necessarily consecutive positions). Understanding Increasing Sequences A sequence of numbers in which each succeeding element is either greater or equal to the preceding element is an increasing sequence. For instance: 4, 6, 8, 9, 11, 14 is increasing sequence 3, 3, 3, 3, 3, 3, 3 is also an increasing sequence Problem Statement We need to write a JavaScript function that takes an array of numbers and ...
Read MoreFinding sum of remaining numbers to reach target average using JavaScript
Problem We are required to write a JavaScript function that takes in an array of numbers and a single number. Our function should find that very number which should be pushed to the array so that its average equals the number specified by the second argument. Understanding the Formula To find the number that makes the average equal to the target, we use this mathematical approach: Current sum of array elements New array length will be (current length + 1) Required total sum = target × new array length ...
Read MoreBreaking a string into chunks of defined length and removing spaces using JavaScript
We are required to write a JavaScript function that takes in a string sentence that might contain spaces as the first argument and a number as the second argument. Our function should first remove all the spaces from the string and then break the string into a number of chunks specified by the second argument. All the string chunks should have the same length with an exception of last chunk, which might, in some cases, have a different length. Solution Approach The solution involves two main steps: Remove all spaces using ...
Read More