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
Convert string with separator to array of objects in JavaScript
In this article, we'll learn how to convert a string with separators into an array of objects using JavaScript's built-in methods. This is a common data transformation task when working with CSV-like data or user input. Understanding the Problem We need to transform a string like "name1, name2, name3" with separator ", " into an array of objects: [{value: "name1"}, {value: "name2"}, {value: "name3"}] Each substring becomes an object with a value property containing the original string segment. Algorithm Step 1: Split the input string using the separator to create an array ...
Read MoreConverting object to 2-D array in JavaScript
In JavaScript, we often need to convert objects into 2D arrays where each sub-array contains a key-value pair. This is useful for data processing, iteration, or when working with APIs that expect array formats. Suppose we have an object that contains information about the weather of a city: const obj = { city: "New Delhi", maxTemp: 32, minTemp: 21, humidity: 78, aqi: 456, day: 'Tuesday', }; We need to convert this object into a 2D array where ...
Read MoreFinding the immediate next character to a letter in string using JavaScript
We are required to write a JavaScript function that takes in a string of characters, str, and a single character, char. Our function should construct a new string that contains the immediate next character present in str after each instance of char (if any). Problem Given a string and a target letter, we need to find all characters that immediately follow each occurrence of the target letter and combine them into a new string. Solution We'll iterate through the string and check each character. When we find a match with our target letter, we'll add ...
Read MoreHow to lock the vertical movement of a Circle using FabricJS?
In this tutorial, we are going to learn how to lock the vertical movement of a Circle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also specify whether we want it to move only in the X-axis. This can be done by using the lockMovementY property. Syntax new fabric.Circle({ lockMovementY: Boolean }: Object) Parameters options (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, ...
Read MoreHow to lock the horizontal scaling of Triangle using FabricJS?
In this tutorial, we are going to learn how to lock the horizontal scaling of a Triangle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a triangle object in the canvas, we can also specify whether we want to stop scaling an object horizontally. This can be done by using the lockScalingX property. Syntax new fabric.Triangle({ lockScalingX : Boolean }: Object) Parameters Options (optional) − This parameter is an Object which provides additional customizations to our triangle. ...
Read MoreHow to indicate whether text is in editing mode or not in IText using FabricJS?
In this tutorial, we are going to learn about how to indicate whether text is in editing mode or not in IText using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text. Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This ...
Read MoreDifference between location.host and location.hostname in JavaScript
JavaScript's Location object provides access to the current URL's components. One can think of this object as a read-only window into the current location. There are two properties of the Location object that are often confused: location.host and location.hostname. Let's explore their differences with practical examples. location.host The host property returns the hostname and port number (if specified) of the current URL. Location Host Example Current URL Host Information ...
Read MoreHow to change the color of error message in jquery validation in JavaScript?
jQuery validation allows developers to create user-friendly forms with real-time feedback. One common requirement is customizing the appearance of error messages, particularly their color. This tutorial demonstrates how to modify error message colors in jQuery validation using CSS and JavaScript. Basic Setup To customize error message colors, you need a form with input fields and corresponding error message containers. The key is using CSS or jQuery's .css() method to apply styling dynamically. Method 1: Using Inline CSS Styles The simplest approach is setting the color directly in HTML or through jQuery: ...
Read MoreHow to Create Dark/Light Mode for a Website using JavaScript/jQuery?
Dark mode has become essential for modern websites, as it reduces eye strain and saves battery life on mobile devices. Studies show that 70-80% of users prefer dark mode, making it a crucial feature for user experience. In this tutorial, we'll learn to create a toggle between dark and light themes using JavaScript and jQuery. We'll use CSS classes and DOM manipulation to switch themes dynamically. Syntax The core method for toggling themes uses the classList.toggle() method: document.body.classList.toggle("dark-theme"); This adds the "dark-theme" class if it doesn't exist, or removes it if it does, ...
Read MoreHow to create a button that submits a form and downloads a pdf simultaneously?
By using HTML, JavaScript and jsPDF, we can create a button that can submit the form and download a PDF simultaneously. We will use HTML to create a form, JavaScript to handle the submission process and jsPDF to generate the PDF document. This is a common requirement in web applications where users need to submit data and receive a PDF receipt or confirmation document. Setting Up the Form First, let's create a basic HTML form with input fields to collect user information: Contact Form Enter your Name: ...
Read More