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 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 MoreInternet Explorer unable to render any kind of background color for the element.
Internet Explorer has limitations with HTML5 semantic elements and CSS styling. Here are solutions to common rendering issues in IE. Problem: IE11 Doesn't Support Element Internet Explorer 11 does not recognize the HTML5 element by default. This causes styling and layout issues. Solution: Create the Element with JavaScript Use JavaScript to register the element with IE's DOM: // Create main element for IE compatibility document.createElement('main'); Add CSS Display Property After creating the element, define its display behavior with CSS: main { ...
Read MoreDataTransfer object in HTML5
The DataTransfer object is a key component of HTML5 drag and drop functionality. It provides methods to store and retrieve data during drag operations and control the visual feedback shown to users. Accessing the DataTransfer Object All drag and drop event handlers receive an Event object with a readonly dataTransfer property that returns the DataTransfer object associated with the event: function dragStartHandler(event) { let dataTransfer = event.dataTransfer; // Use dataTransfer methods here } Key DataTransfer Methods The DataTransfer object provides several important methods: ...
Read More