How do I programmatically create a DragEvent for Angular app and HTML?

Lakshmi Srinivas
Updated on 15-Mar-2026 23:18:59

280 Views

Creating a DragEvent programmatically in JavaScript allows you to simulate drag-and-drop operations for testing or automation purposes. There are different approaches depending on whether you're using browser APIs directly or testing frameworks like Protractor. Creating DragEvent with JavaScript API The most direct approach uses the native DragEvent constructor: // Create a new drag event let dragStartEvent = new DragEvent('dragstart', { bubbles: true, cancelable: true, dataTransfer: new DataTransfer() }); // Get target element let element = document.getElementById('draggable-item'); // Dispatch the event element.dispatchEvent(dragStartEvent); ... Read More

Usage of border property with CSS

karthikeya Boyini
Updated on 15-Mar-2026 23:18:59

99 Views

The border property in CSS is used to create visible borders around HTML elements. It's a shorthand property that combines border width, style, and color in a single declaration. Syntax border: width style color; Where: width - thickness in pixels, ems, or other units style - solid, dashed, dotted, double, etc. color - any valid CSS color value Example: Basic Border Usage Here's how to apply different border styles to images: ... Read More

Jasmine JavaScript Testing - toBe vs toEqual

Ayush Gupta
Updated on 15-Mar-2026 23:18:59

925 Views

In Jasmine JavaScript testing, toBe and toEqual are two different matchers for comparing values. Understanding their difference is crucial for writing effective tests. toBe vs toEqual Overview Arrays and objects can be compared in two ways: Reference equality: They refer to the same object in memory Value equality: They may refer to different objects but their contents are identical Using toBe (Reference Equality) The toBe matcher checks if two variables reference the exact same object in memory. It uses JavaScript's === operator internally. ... Read More

How to create a collapsible sidebar menu with CSS and JavaScript?

Aman Kumar
Updated on 15-Mar-2026 23:18:59

8K+ Views

A collapsible sidebar menu is a navigation component that can be toggled to show or hide menu items. When collapsed, it saves screen space while maintaining easy access to navigation links. This tutorial demonstrates how to create a responsive collapsible sidebar using HTML, CSS, and JavaScript. The sidebar starts hidden and slides in from the left when activated. When opened, it pushes the main content to the right, creating a smooth transition effect. This pattern is commonly used in responsive web design to optimize navigation on both desktop and mobile devices. HTML Structure First, create the basic ... Read More

JavaScript Program to Check if a Given Year is Leap Year

Shriansh Kumar
Updated on 15-Mar-2026 23:18:59

2K+ Views

To check if a given year is leap year, we have used two approaches in this article. A leap year has 366 days. In every 4th year, an additional day is added to the month of February to synchronize it with the astronomical year. In this article, we are given with two years to check. Our task is to write a JavaScript program to check if a given year is leap year. Leap Year Rules A year is considered a leap year if it follows these rules: Divisible by 4 AND not divisible ... Read More

Clearing localStorage in JavaScript?

AmitDiwan
Updated on 15-Mar-2026 23:18:59

594 Views

localStorage is a web storage API that persists data in the browser until explicitly cleared. Here are two effective methods to clear localStorage in JavaScript. Method 1: Using clear() Method The clear() method removes all key-value pairs from localStorage at once. This is the most efficient approach. // Store some data first localStorage.setItem("name", "John"); localStorage.setItem("age", "25"); localStorage.setItem("city", "New York"); console.log("Before clearing:", localStorage.length); // Clear all localStorage localStorage.clear(); console.log("After clearing:", localStorage.length); Before clearing: 3 After clearing: 0 Method 2: ... Read More

Sleep in JavaScript delay between actions?

AmitDiwan
Updated on 15-Mar-2026 23:18:59

544 Views

To create a sleep or delay in JavaScript, use setTimeout() for simple delays or async/await with Promises for more control. JavaScript doesn't have a built-in sleep function like other languages. 1000 milliseconds = 1 second 2000 milliseconds = 2 seconds, etc. Using setTimeout() for Delays setTimeout() executes a function after a specified delay. Here's an example with a 3-second delay: console.log("Starting calculation..."); setTimeout(function() { var firstValue = 10; var secondValue = 20; var result = firstValue + secondValue; ... Read More

Count number of factors of a number - JavaScript

AmitDiwan
Updated on 15-Mar-2026 23:18:59

536 Views

We are required to write a JavaScript function that takes in a number and returns the count of numbers that exactly divides the input number. For example − If the number is 12, then its factors are − 1, 2, 3, 4, 6, 12 Therefore, the output should be 6. Method 1: Basic Approach This method checks every number from 1 to the given number to see if it divides evenly: function countFactorsBasic(num) { let count = 0; for (let i = 1; i { let count = 0; let flag = 2; while (flag

How to subtract elements of two arrays and store the result as a positive array in JavaScript?

AmitDiwan
Updated on 15-Mar-2026 23:18:59

3K+ Views

Suppose, we have two arrays like these − const arr1 = [1, 2, 3, 4, 5, 6]; const arr2 = [9, 8, 7, 5, 8, 3]; We are required to write a JavaScript function that takes in two such arrays and returns an array of absolute difference between the corresponding elements of the array. Therefore, for these arrays, the output should look like − const output = [8, 6, 4, 1, 3, 3]; We will use a for loop and keep pushing the absolute difference iteratively into a new array and ... Read More

How do I compare String and Boolean in JavaScript?

Shubham Vora
Updated on 15-Mar-2026 23:18:59

5K+ Views

In JavaScript, comparing strings and booleans can produce unexpected results due to type coercion. This tutorial explains how equality operators handle these comparisons. JavaScript provides two equality operators: the equality operator (==) performs type coercion before comparison, while the strict equality operator (===) compares both value and type without coercion. Boolean Type Coercion When using the equality operator (==), JavaScript converts booleans to numbers before comparison: Boolean to Number Conversion: ... Read More

Advertisements