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 turn a JSON object into a JavaScript array in JavaScript ?
Converting a JSON object with numeric string keys into a JavaScript array is a common operation. This is particularly useful when dealing with API responses or data structures that use indexed properties. The Problem Consider this JSON object where index keys are mapped to string values: const obj = { "0": "Rakesh", "1": "Dinesh", "2": "Mohit", "3": "Rajan", "4": "Ashish" }; console.log(typeof obj); // "object" object Method 1: Using Object.keys() and forEach() This approach iterates through object keys and maps ...
Read MoreCalculate the difference between the first and second element of each subarray separately and return the sum of their differences in JavaScript
In JavaScript, we often need to process arrays of subarrays and perform calculations on their elements. This article demonstrates how to calculate the difference between the first and second element of each subarray and return the sum of all differences. What is an Array of Subarrays? An array of subarrays (or nested array) is an array that contains other arrays as its elements. Each inner array is called a subarray. const array = [[1, 2], [4, 5], [7, 8]]; console.log(array[0]); // First subarray console.log(array[1][0]); // First element of second subarray ...
Read MoreFinding even length numbers from an array in JavaScript
We are required to write a JavaScript function that takes in an array of integers as the first and the only argument. The function should then construct and return a new array that contains only those elements from the original array that have an even number of digits. For example, if we have an array with numbers of different digit lengths, we need to filter out only those numbers whose digit count is even (2, 4, 6, etc.). Problem Example If the input array is: const arr = [12, 6, 123, 3457, 234, 2]; ...
Read MoreFinding two closest elements to a specific number in an array using JavaScript
Finding the two closest elements to a specific number in an array is a common algorithmic problem. This article demonstrates how to solve it efficiently using JavaScript's array methods and mathematical calculations. Problem We are required to write a JavaScript function that takes in an array of sorted integers, arr, as the first argument and a target number, as the second argument. Our function should return an array of exactly two numbers that exists in the array arr and are closest to target. The output array should also be sorted in increasing order. For example, if ...
Read MoreHow to add HTML elements dynamically using JavaScript?
Adding HTML elements dynamically with JavaScript allows you to modify page content in real-time based on user interactions. This technique is essential for creating interactive web applications and dynamic user interfaces. Approach Create a simple HTML page with a container element where new content will be added Define the HTML structure you want to add dynamically Use JavaScript to listen for user events (like button clicks) Dynamically insert new HTML elements using DOM manipulation methods Style the elements with CSS to maintain ...
Read MoreHow to set the position of a Circle from left using FabricJS?
In this tutorial, we are going to learn how to set the position of a Circle from left using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we have to create an instance of fabric.Circle class and add it to the canvas. We can manipulate a circle object by changing its position, opacity, stroke and also its dimension. The position from left can be changed by using the left property. Syntax new fabric.Circle({ left: Number }) Parameters ...
Read MoreHow to set a dash pattern for the controlling corners of a Rectangle using FabricJS?
In this tutorial, we are going to learn how we can implement the dash pattern of controlling corners of Rectangle using FabricJS. The controlling corners of an object allow us to scale, stretch or change its position. We can customize our controlling corners in many ways such as adding a specific colour to it, changing its size, etc. We can also specify a dash pattern for the controlling corners by using the cornerDashArray property. Syntax new fabric.Rect({ cornerDashArray: Array }: Object) Parameters ...
Read MoreHow to design a video slide animation effect using HTML CSS JavaScript?
In this tutorial, we will learn how to create a captivating video slide animation effect using HTML, CSS, and JavaScript. This animation makes a video element slide smoothly across the screen, creating an engaging visual effect for web applications. Understanding CSS Keyframes The foundation of our animation is CSS keyframes. A keyframe rule defines how CSS properties change over time during an animation. For our sliding video, we'll use the transform property with translateX() to move the video horizontally. @keyframes slide { from { transform: translateX(-100%); ...
Read MoreHow to disable the centered rotation of Text using FabricJS?
In this tutorial, we are going to learn how to disable the centered rotation of Text using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. By default all objects in FabricJS use their center as the point of rotation. However, we can change this behaviour by using the centeredRotation property. Syntax ...
Read MoreHow to add a property to a JavaScript object using a variable as the name?
In JavaScript, you can add properties to objects using either dot notation or bracket notation. However, when you need to use a variable as the property name, bracket notation is the only viable approach. The Problem with Dot Notation Dot notation treats everything after the dot as a literal property name, not a variable: let obj = {a: "value1"}; let propertyName = "dynamicProp"; // This creates a property literally named "propertyName" obj.propertyName = "value2"; console.log(obj); console.log("Property 'dynamicProp' exists:", obj.dynamicProp); // undefined { a: 'value1', propertyName: 'value2' } Property 'dynamicProp' exists: undefined ...
Read More