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
HTML5 Input type "number" in Firefox
The HTML5 input type "number" provides built-in validation and spinner controls for numeric input. However, browser support for certain attributes like min and max has varied across different versions of Firefox. Browser Support Overview Modern Firefox versions (52+) fully support the min and max attributes for number inputs. Earlier Firefox versions had limited support, but this is no longer an issue for current web development. Example Here's a complete example demonstrating the number input with validation attributes: HTML5 Number Input ...
Read MoreDrop target listens to which events in HTML5?
To accept a drop in HTML5, a drop target must listen to at least three essential events that handle the drag-and-drop sequence. Required Events for Drop Targets The dragenter event, which is used to determine whether the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled. The dragover event, which is used to determine what feedback is to be shown to the user. If the event is canceled, then the feedback (typically the cursor) is updated based on the dropEffect attribute's value. Finally, the drop ...
Read MoreUsage of CSS list-style-type property
The list-style-type CSS property allows you to control the shape or appearance of list item markers. This property works with both ordered () and unordered () lists. Syntax list-style-type: value; Common Values for Unordered Lists Here are the most commonly used values for unordered list markers: .circle-list { list-style-type: circle; } .square-list { list-style-type: square; } .disc-list { list-style-type: disc; ...
Read MoreIncrement a date in javascript without using any libraries?
To increment a date in JavaScript without external libraries, use the setDate() method. This approach automatically handles month and year rollovers. Using setDate() Method The setDate() method accepts day values beyond the current month's range. JavaScript automatically adjusts the month and year when necessary. let date = new Date('2024-01-31'); // January 31st date.setDate(date.getDate() + 1); // Add 1 day console.log(date.toDateString()); Thu Feb 01 2024 Creating a Reusable Function You can extend the Date prototype or create a standalone function to add days: Date.prototype.addDays = function(days) { ...
Read MoreHow to add, access, delete, JavaScript object properties?
JavaScript objects are collections of key-value pairs where you can dynamically add, access, and delete properties. This guide demonstrates the fundamental operations for managing object properties. Syntax // Adding properties obj.propertyName = value; obj['propertyName'] = value; // Accessing properties obj.propertyName; obj['propertyName']; // Deleting properties delete obj.propertyName; delete obj['propertyName']; Example: Adding Properties Object Properties Add, Access, Delete JavaScript Object Properties Manage Properties function manageProperties() { let obj = { firstName: ...
Read MoreJoining a JavaScript array with a condition?
Joining a JavaScript array with a condition involves filtering elements that meet specific criteria and then combining them into a string. This is achieved by chaining the filter() method with the join() method. Syntax array.filter(condition).join(separator) Parameters condition - A function that tests each element separator - String used to separate elements (default is comma) Example: Joining Even Numbers Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; ...
Read MoreHow to Replace null with "-" JavaScript
In JavaScript, you often need to replace null, undefined, empty strings, and other falsy values with a default placeholder like "-". This is common when displaying data in tables or forms where empty values should show a dash instead of being blank. Understanding Falsy Values JavaScript considers these values as falsy: null, undefined, '' (empty string), 0, NaN, and false. We can use this to our advantage when replacing them. Method 1: Using Object.keys() and forEach() This approach iterates through all object keys and replaces falsy values in place: const obj = { ...
Read MoreHow to transform object of objects to object of array of objects with JavaScript?
To transform an object of objects into an object of array of objects, you can use Object.fromEntries() along with Object.entries() and map(). This transformation wraps each nested object in an array while preserving the original keys. Syntax Object.fromEntries( Object.entries(originalObject).map(([key, value]) => [key, [value]]) ) Example const studentDetails = { 'details1': {Name: "John", CountryName: "US"}, 'details2': {Name: "David", CountryName: "AUS"}, 'details3': {Name: "Bob", CountryName: "UK"}, }; const transformedObject = Object.fromEntries( Object.entries(studentDetails).map(([key, value]) => ...
Read MorePassing mouse clicks through an overlaying HTML element
When you have an overlaying HTML element that blocks mouse clicks to elements beneath it, you can pass clicks through using CSS or JavaScript techniques. Method 1: Using CSS pointer-events The simplest approach is to use the CSS pointer-events property to make the overlay non-interactive: .overlay { pointer-events: none; } Example: CSS pointer-events .overlay { position: absolute; ...
Read MoreWhat are the DataTransfer object attributes?
The DataTransfer object holds data about the drag and drop operation. This data can be retrieved and set using various attributes and methods associated with the DataTransfer object. The DataTransfer object is automatically created by the browser during drag and drop operations and is available through the event object in drag event handlers. DataTransfer Attributes and Methods Property/Method ...
Read More