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 rotate an image with the canvas HTML5 element from the bottom center angle?
Rotating an image from the bottom center in HTML5 Canvas requires translating the canvas origin to the rotation point, applying the rotation, then drawing the image at an offset position. Understanding Canvas Rotation Canvas rotation always occurs around the origin (0, 0). To rotate from a specific point like bottom center, we must: Translate the canvas to the rotation point Apply the rotation Draw the image at an adjusted position Complete Example const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); // Create an image const img = new ...
Read MoreMaking an image scale mouse over on HTM5
To make an image scale on mouse over in HTML5, you can use CSS transforms or Canvas API. Here we'll show both approaches for creating smooth scaling effects. Method 1: Using CSS Transform (Recommended) The simplest approach uses CSS transform: scale() with :hover pseudo-class: .scalable-image { width: 200px; height: 200px; ...
Read MoreHow to set the bottom margin of an element?
The margin-bottom property sets the bottom margin of an element, creating space between the element and content below it. It accepts values in pixels, percentages, or auto. Syntax element.style.marginBottom = "value"; Parameters The margin-bottom property accepts the following values: Length: Pixels (px), em, rem, etc. Percentage: Relative to parent element's width auto: Browser calculates the margin automatically Example: Setting Bottom Margin with CSS .large-margin { ...
Read MorePeeking elements from a Queue in Javascript
Peeking a Queue means getting the value at the head of the Queue without removing it. This allows you to inspect the next element that would be dequeued without modifying the queue structure. Syntax peek() { if (this.isEmpty()) { console.log("Queue Underflow!"); return; } return this.container[0]; } Complete Queue Implementation with Peek class Queue { constructor(maxSize) { ...
Read MoreJavaScript Encapsulation using Anonymous Functions
Object-oriented programming languages allow data hiding using private fields. They use these to hide the internals of classes. In JavaScript there is no built-in support to hide/encapsulate the inner workings, but we can achieve encapsulation using anonymous functions. Anonymous functions, particularly when used as Immediately Invoked Function Expressions (IIFEs), can create private scopes that prevent global namespace pollution and provide encapsulation. The Problem: Global Namespace Pollution When we declare variables and functions in the global scope, they become accessible everywhere and can cause naming conflicts: const HIDDEN_CONST = 100; function fnWeWantToHide(x, y) { ...
Read MoreRange Overflow and Range Underflow properties in JavaScript.
In JavaScript, the rangeOverflow and rangeUnderflow properties are part of the ValidityState object, used to check if form input values exceed their specified ranges. Range Underflow The rangeUnderflow property returns true if the element's value is less than the value specified in the min attribute. Range Overflow The rangeOverflow property returns true if the element's value is greater than the value specified in the max attribute. Syntax element.validity.rangeOverflow // true if value > max element.validity.rangeUnderflow // true if value < min Example ...
Read MoreHow to merge two JavaScript objects?
Merging two JavaScript objects combines their properties into a single object. There are several methods to achieve this, with the spread operator being the most modern and widely used approach. Using the Spread Operator (Recommended) The spread operator (...) is the cleanest and most readable way to merge objects: Merge JavaScript Objects Merge Two JavaScript Objects MERGE OBJECTS ...
Read MoreSort Array of numeric & alphabetical elements (Natural Sort) JavaScript
We have an array that contains some numbers and some strings. We are required to sort the array such that the numbers get sorted and placed before every string, and then the strings should be placed sorted alphabetically. For example, this array: const arr = [1, 'fdf', 'afv', 6, 47, 7, 'svd', 'bdf', 9]; console.log("Original array:", arr); Original array: [ 1, 'fdf', 'afv', 6, 47, 7, 'svd', 'bdf', 9 ] Should look like this after sorting: [1, 6, 7, 9, 47, 'afv', 'bdf', 'fdf', 'svd'] Implementation ...
Read MoreSort a JavaScript array so the NaN values always end up at the bottom.
We have an array that contains String and number mixed data types, we have to write a sorting function that sorts the array so that the NaN values always end up at the bottom. The array should contain all the normal numbers first followed by string literals and then followed by NaN numbers. We know that the data type of NaN is "number", so we can't check for NaN like !number && !string. Moreover, if we simply check the tautology and falsity of elements then empty strings will also satisfy the same condition which NaN or undefined satisfies. ...
Read MoreHow to create or reset counters with JavaScript?
CSS counters provide a way to automatically number elements on a webpage. In JavaScript, you can create or reset counters using the counterReset property to control counter initialization and reset points. How CSS Counters Work CSS counters use three main properties: counter-reset - Creates or resets a counter counter-increment - Increments the counter value counter() - Displays the counter value in content Basic Counter Example body { ...
Read More