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 control the shape or appearance of the marker with CSS?
The list-style-type CSS property allows you to control the shape or appearance of list markers in both ordered and unordered lists. This property provides various built-in marker styles to enhance your list presentations. Syntax list-style-type: value; Common Values for Unordered Lists List Style Types Circle Markers Apple Mango Grapes ...
Read MoreThe Priority Queue in Javascript
In this article, we are going to discuss the priority queue data structure in JavaScript. A priority queue is an abstract data type (ADT) which is like a regular queue or stack data structure, but where additionally each element has a "priority" associated with it. In a priority queue, an element with high priority is served before an element with low priority. If two elements have the same priority, they are served according to their order in the queue. How Priority Queue Works Priority queues maintain elements in sorted order based on their priority values. Lower priority ...
Read MoreHow to add a property, method to a JavaScript constructor?
In JavaScript, you can add properties and methods to constructor functions using the prototype property. This allows all instances of the constructor to share these additions. Syntax // Add a property ConstructorName.prototype.propertyName = value; // Add a method ConstructorName.prototype.methodName = function() { // method body }; Example: Adding Property and Method to Constructor Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } ...
Read MoreHow to change an object Key without changing the original array in JavaScript?
When working with arrays of objects in JavaScript, you often need to change object keys while preserving the original data structure. This tutorial shows how to rename object keys without mutating the original array. The Problem Directly modifying object properties changes the original array, which can cause issues in applications that rely on immutable data patterns. Method 1: Using map() with Object Destructuring The most elegant approach uses destructuring to extract the old key and create a new object: Change Object Key Change Object Key Without Mutating ...
Read MoreConverting Odd and Even-indexed characters in a string to uppercase/lowercase in JavaScript?
We need to write a function that reads a string and converts the odd indexed characters in the string to upperCase and the even ones to lowerCase and returns a new string. Understanding Index-Based Case Conversion In JavaScript, string indices start at 0. Even indices (0, 2, 4...) will be converted to lowercase, while odd indices (1, 3, 5...) will be converted to uppercase. Example const text = 'Hello world, it is so nice to be alive.'; const changeCase = (str) => { const newStr = str ...
Read MoreGenerate colors between #CCCCCC and #3B5998 for a color meter with JavaScript?
We have to write a function that generates a random color between two given colors. Let's tackle this problem in parts − First → We write a function that generates a random number between two given numbers. Second → Instead of using the hex scale for random color generation, we will map the hex to 0 to 15 decimal scale and use that instead. ...
Read MoreIs an empty iframe src valid in JavaScript?
An empty iframe src can be handled in JavaScript using about:blank or by leaving the src attribute empty. The about:blank approach is more reliable and creates a valid, blank document. Valid Approaches for Empty iframe src There are several ways to create an empty iframe: Using about:blank (Recommended) The about:blank value creates a valid empty document that can be safely manipulated with JavaScript: Empty iframe Example ...
Read MoreHow to set the direction of the flexible items with JavaScript?
In this tutorial, we will learn how to set the direction of the flexible items with JavaScript. The direction of the flexible items can be set using the flex-direction property of CSS. It defines how the flexible items will be placed in the flex container. Its default value is set to 'row', but it can have other values like 'column', 'row-reverse' etc. To set the direction of the flexible items with JavaScript, we have multiple ways, and in this tutorial, we will discuss two of them − Using the style.flexDirection Property ...
Read MoreTranslating HTML5 canvas
Use the translate() method to move the HTML5 canvas coordinate system. The translate(x, y) method shifts the canvas origin to a different point in the grid. The x parameter moves the canvas left (negative) or right (positive), and y moves it up (negative) or down (positive). Syntax context.translate(x, y); Parameters Parameter Description x Horizontal distance to ...
Read MoreResize image before submitting the form HTML5
To resize an image before submitting a form in HTML5, you can use the HTML5 Canvas API with the drawImage() method. This allows you to scale images on the client-side before sending them to the server. Basic Approach The process involves loading the image into a canvas, scaling it using drawImage(), and then converting the canvas back to an image format for form submission. Syntax context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); Parameters img - The image element to draw sx, sy - Source x and y coordinates (usually ...
Read More