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 count the number of times a button is clicked using JavaScript?
Tracking button clicks is a common task in JavaScript and can be achieved by using the addEventListener() method. By adding an event handler to the button element and incrementing a variable each time the button is pressed, we can keep track of button clicks. We can display the count to users and even persist clicks using localStorage so they remain after browser closure. This technique is essential for interactive web applications like calculators, games, or analytics tracking. Let's explore different methods to count button clicks effectively. Creating a Basic Button First, we need a button element on ...
Read MoreCombine two different arrays in JavaScript
Suppose we have two arrays, the first array contains the scheduled date for some events and the second array contains the names of those events, like this − const dates = [ { id: "1", date: "2017-11-07" }, { id: "1", date: "2017-11-08" }, { ...
Read MoreMasking a string JavaScript
Masking a string means replacing certain characters with asterisks (*) or other symbols to hide sensitive information like passwords, credit card numbers, or personal data. In JavaScript, we can create a function to mask specific portions of a string while keeping the rest visible. Understanding String Masking String masking is commonly used in applications to protect sensitive data while still showing partial information for verification purposes. For example, displaying a credit card number as "1234-****-****-5678" or an email as "j***@example.com". Basic Masking Function Here's a function that masks characters between specified start and end positions: ...
Read MoreAwkward behaviour of delete operator on arrays in JavaScript
The delete operator in JavaScript is actually an object operator (used with objects). But since arrays are also indexed objects in JavaScript, we can use the delete operator with arrays as well. However, this leads to some awkward behavior that can confuse developers. Consider the following array of literals: const arr = ['a', 'b', 'c', 'd', 'e']; Example Let us now execute the following program and observe the unexpected output: const arr = ['a', 'b', 'c', 'd', 'e']; delete arr[4]; console.log(arr); console.log(arr.length); Output [ 'a', 'b', 'c', ...
Read MoreSwapping even and odd index pairs internally in JavaScript
We are required to write a JavaScript function that takes in an array of literals as the first and the only argument. Our function should swap each consecutive even index with each other, and swap each consecutive odd indexes with each other. The function should do these swappings in place. For example, if the input array is: const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; Then the array should become: const output = [2, 3, 0, 1, 6, 7, 4, 5, 8]; Because 0 and 2 ...
Read MoreConstructing a string of alternating 1s and 0s of desired length using JavaScript
Problem We are required to write a JavaScript function that takes in a number n. Starting with '1' our function should construct a string of length n that contains '1' and '0' alternatingly. Example Following is the code − const num = 12; const buildString = (num = 1) => { let res = ''; for(let i = 0; i < num; i++){ if(i % 2 === 0){ ...
Read MoreHow to lock the horizontal scaling of a Circle using FabricJS?
In this tutorial, we are going to learn how to lock the horizontal scaling 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 to stop scaling an object horizontally. This can be done by using the lockScalingX property. Syntax new fabric.Circle({ lockScalingX : Boolean }: Object) Parameters options (optional) − This parameter is an Object which provides additional customizations to our circle. ...
Read MoreHow to hide the controlling corners of a Triangle using FabricJS?
In this tutorial, we are going to learn how to hide the controlling corners of a Triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle class and add it to the canvas. The controlling corners of an object allow us to increase or decrease its scale, stretch or change its position. We can customize our controlling corners in many ways such as adding a specific colour to it, changing its size, etc. We can also hide them using the hasControls ...
Read MoreHow to get the current colour of the character at cursor in IText using FabricJS?
In this tutorial, we are going to learn about how to get the current colour of the character at cursor 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 MoreDesign a Digital Clock in Neumorphism Style using JavaScript
In this tutorial, we will be discussing how to design a digital clock in neumorphism style using JavaScript. Neumorphism is a design trend characterized by soft, raised elements with subtle shadows that create an embossed or pressed effect on the interface. HTML Structure Let's start by creating the basic HTML structure for our neumorphic digital clock. We need a container for the clock and display elements. Neumorphic Digital Clock ...
Read More