When we need to fill a circle with 1x1 pixels, all with different colors in a browser, we can use HTML5 Canvas with a layered approach. Approach Drawing all pixels with random colors in a 200x200 grid on a canvas Changing composite mode to clip content Drawing circle on top to mask the random pixels Example Here's how to create a circle filled with colorful random squares: Random Color Circle ... Read More
The test() method is a regular expression method that searches a string for a pattern and returns true or false, depending on whether the pattern is found. It is case sensitive and provides a simple way to check if a string matches a regular expression pattern. Syntax regexPattern.test(string) Parameters string - The string to be tested against the regular expression pattern Return Value Returns true if the pattern is found in the string, false otherwise. Example 1: Pattern Found (Case Match) In this example, ... Read More
The innerHTML and innerText properties are two different ways to access and manipulate the content of HTML elements in JavaScript. innerHTML - Returns or sets the HTML markup inside an element, including all tags, formatting, and spacing. It preserves the complete HTML structure. innerText - Returns or sets only the visible text content, stripping out all HTML tags and normalizing whitespace. Key Differences Property HTML Tags Whitespace Hidden Elements innerHTML Preserved Preserved Included innerText Removed Normalized Excluded Example ... Read More
To filter an array of strings with case-insensitive matching, use JavaScript's filter() method combined with toLowerCase() and indexOf(). Setting Up the Data Let's start with an array of student objects containing names with different cases: let studentDetails = [ {studentName: "John Smith"}, {studentName: "john smith"}, {studentName: "Carol Taylor"}, {studentName: "JOHN TAYLOR"}, {studentName: "alice johnson"} ]; console.log("Original array:", studentDetails); Original array: [ { studentName: 'John Smith' }, { studentName: ... Read More
If you want to allow a user to upload an external file to your website, you need to use a file upload box, also known as a file select box. This is created using the element with the type attribute set to file. HTML File Upload Form Choose file... Browse No file chosen Basic File Upload Example Here's a simple HTML form with a file upload input: File ... Read More
The pageX property of mouse events returns the horizontal coordinate (X-axis) of the mouse pointer relative to the entire document, including any scrolled content. Unlike clientX, which is relative to the viewport, pageX gives the absolute position within the document. Syntax event.pageX Return Value Returns a number representing the horizontal pixel coordinate relative to the left edge of the entire document. Example Click anywhere on the paragraph to see the mouse coordinates: Click here ... Read More
Safari has limited support for folder detection compared to other browsers. When users drag and drop folders, Safari treats them differently than individual files, which can cause errors during file reading operations. The Problem with Folders in Safari When a folder is dropped onto a web page, Safari includes it in the files collection but cannot read its contents using FileReader. This causes the onerror event to trigger, which we can use to detect folder drops. Folder Detection Method The following code attempts to read each dropped item as a file. If it's a folder, the ... Read More
FastClick is a library that eliminates the 300ms delay on mobile browsers for touch events. However, jQuery Mobile provides a built-in solution with the vclick event that handles this automatically. The Problem with Mobile Touch Delays Mobile browsers introduce a 300ms delay between a touch event and the click event to detect double-taps. This creates a sluggish user experience on mobile web applications. jQuery Mobile's Built-in Solution jQuery Mobile includes virtual events like vclick that provide immediate response without the 300ms delay. This eliminates the need for external libraries like FastClick. Using vclick Event ... Read More
AVL tree checks the height of the left and the right sub-trees and assures that the difference is not more than 1. This difference is called the Balance Factor. For example, in the following trees, the first tree is balanced and the next two trees are not balanced: Balanced (BF ≤ 1) B A C Unbalanced (BF = 2) ... Read More
In this article, we will learn how to read cookies in JavaScript and use them for features like user tracking, user preferences, and personalized experiences. Cookies are small pieces of data stored in a user's web browser. In JavaScript, we can read cookies using the document's cookie property and extract specific values using string manipulation techniques. Understanding document.cookie The document.cookie property returns all cookies as a single semicolon-separated string. Each cookie appears as name=value pairs. Example 1: Reading All Cookies This example demonstrates how to access all cookies stored for the current domain: ... Read More
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance