Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance
jQuery provides an efficient way to get values of selected checkboxes using the :checked selector combined with checkbox input elements. This is useful for forms where users can select multiple options. Syntax $('input[type="checkbox"]:checked') // or $('input[name="checkboxName"]:checked') Basic Example Here's a complete example that demonstrates getting values of selected checkboxes: jQuery Checkbox Values Select your hobbies: ... Read More
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 More
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 More
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 More
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 More
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 More
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 More
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 More
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 More
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 More