Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance
Showing and hiding elements dynamically is a fundamental technique in JavaScript web development. One common scenario is revealing a hidden div when a specific select option is chosen, creating interactive forms and user interfaces. Methods for Showing/Hiding Elements There are two main CSS properties for controlling element visibility: display: Removes element from document flow when hidden visibility: Keeps element's space but makes it invisible Method 1: Using visibility Property The visibility property hides the element while preserving its layout space: ... Read More
Yes, the !! (not not) operator is the reverse process of the ! (not) operator. The single ! converts a value to its opposite boolean, while !! converts any value to its boolean equivalent. How the Not Operator Works The single ! operator converts truthy values to false and falsy values to true: var flag = true; console.log("Original value:", flag); console.log("Single ! result:", !flag); Original value: true Single ! result: false How the Not Not Operator Works The !! operator applies ! twice, effectively converting any value to its boolean ... Read More
When dividing a floating-point number, you often need to round the result to a specific number of decimal places and handle any remainder. This is useful for financial calculations, splitting costs, or distributing values evenly. Problem Suppose we have a floating-point number: 2.74 If we divide this number by 4, the result is 0.685. We want to divide this number by 4 but the result should be rounded to 2 decimals. Therefore, the result should be: 3 times 0.69 and a remainder of 0.67 Solution Using toFixed() The ... Read More
In JavaScript, we often encounter arrays that contain nested subarrays and need to sort all elements together. This involves flattening the nested structure and then applying sorting algorithms. Understanding the Required Methods Before diving into solutions, let's understand the key JavaScript methods we'll use: sort() method: Sorts array elements in place. By default, it converts elements to strings and sorts alphabetically. For numeric sorting, we provide a comparison function: let numbers = [3, 1, 4, 1, 5, 9, 2, 6]; numbers.sort((a, b) => a - b); // ascending order console.log(numbers); [ 1, ... Read More
We are required to write a JavaScript function that takes in a binary array (an array that consists of 0 or 1 only) as the only argument. The function should find the length of that consecutive subarray of the array that consists of only 1 and return it. For example − If the input array is − const arr = [1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1]; Then the output should be − 4 We will use the sliding window algorithm to ... Read More
An increasing sequence in JavaScript is an array where each element is less than or equal to the next element. This article shows how to determine if an array can be converted to an increasing sequence by modifying at most one element. Problem Definition We define an array as increasing if arr[i] { const isIncreasing = (array) => { for (let i = 1; i < array.length; i++) { if (array[i] < array[i ... Read More
In this article, we are going to create a canvas with a wait cursor on hover using FabricJS. The wait cursor is one of the native cursor styles available which can be used in FabricJS canvas. FabricJS provides various types of cursors such as default, all-scroll, crosshair, col-resize, row-resize, etc. that 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.Canvas(element: HTMLElement|String, { hoverCursor: String }: Object) Parameters ... Read More
JavaScript is a powerful language that has revolutionized frontend development. Understanding how JavaScript works behind the scenes is crucial for writing efficient code and debugging effectively. JavaScript is a synchronous, single-threaded language that executes code in a specific order. Everything in JavaScript runs inside an Execution Context, which is the environment where code is executed. What is an Execution Context? The Execution Context consists of two main components: Memory Component ... Read More
In this tutorial, we are going to learn how to set the size of the controlling corners of a Triangle 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 change the size by using the cornerSize property. Syntax new fabric.Triangle({ cornerSize: Number }: Object) Parameters Options (optional) − This ... Read More
In this tutorial, we will create a calculator using JavaScript with a neumorphic effect, also known as soft UI. Neumorphism is a modern design trend characterized by soft, rounded edges and subtle inset/outset shadows that create a tactile, embossed appearance. What is Neumorphism? Neumorphism combines elements of skeuomorphism and flat design. It creates depth through subtle shadows and highlights, making UI elements appear to be extruded from or pressed into the background surface. Planning the Calculator Layout Our calculator will include: Two input fields for entering numbers One output field to display results Operation ... Read More