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 by AmitDiwan
Page 490 of 840
How to merge an array with an object where values are arrays - JavaScript
In JavaScript, you can merge an array with an object containing array values by mapping array elements to object keys sequentially. This creates a new structure where each group contains key-value pairs. Problem Statement Given an array of values and an object with arrays as values, we want to distribute the array values across the object's arrays as keys: const arr = [1, 2, 3, 4, 5]; const obj = { group1: ["Ram", "Mohan", "Shyam"], group2: ["Jai", "Dinesh"], }; // Expected output: const expected = { ...
Read MoreWhat is onclick not working for two or more links for same function in JavaScript?
When onclick events don't work for multiple elements with the same function, it's usually because you're only attaching the event to one element or using incorrect selectors. The solution is to use document.querySelectorAll() to select all matching elements and attach event listeners to each one. The Problem A common mistake is trying to attach a click event to multiple elements using document.querySelector(), which only selects the first matching element, or using incorrect event binding methods. Solution: Using querySelectorAll() with Event Listeners Here's how to properly attach click events to multiple elements: ...
Read MoreFind all prime factors of a number - JavaScript
We are required to write a JavaScript function that takes in a number and returns an array of all the prime numbers that exactly divide the input number. For example, if the input number is 18, the prime factors are 2 and 3 because 18 = 2 × 3². Then the output should be − [2, 3] Understanding Prime Factorization Prime factorization breaks down a number into its prime components. A prime factor is a prime number that divides the original number exactly. Method 1: Using Helper Function to Check Primes ...
Read MoreHow to apply two CSS classes to a single element?
We can apply multiple CSS classes to a single element by using the class attribute and separating each class with a space. This allows us to combine different styles and create more flexible, reusable CSS designs. Syntax /* Multiple classes in HTML */ ... /* CSS styles for each class */ .class1 { property: value; } .class2 { property: value; } .class3 { property: value; } Method 1: Using the Class Attribute The most common way to apply multiple classes is by listing them in the class attribute, separated by spaces − ...
Read MoreHow to Auto-Resize an Image to Fit a div Container using CSS?
To auto-resize an image to fit a div container, it ensures that the image is scaled properly without affecting its original aspect ratio. It helps in preventing the distortion of image and ensures that image fills the container without stretching or cropping. In this article we are having a div container and an image. Our task is to auto-resize image to fit the div container using CSS. Syntax /* Basic image resizing */ img { width: 100%; height: 100%; object-fit: cover | contain; } ...
Read MoreDifference Between HTML and CSS
In this post, we will understand the difference between HTML and CSS. HTML provides the structure and content of web pages, while CSS handles the visual styling and presentation. HTML HTML refers to Hyper Text Markup Language. It helps create web pages and applications − It helps define structure of web page. It is a markup language. It helps create static pages as well. It helps display data. HyperText helps define link between multiple web pages. Markup Language helps define text document using tags, which gives a structure to the web page. It has less backup ...
Read MoreRevealing Hidden Elements by CSS Animations
CSS animations allow us to reveal hidden elements with smooth transitions and effects. Elements can be hidden using the opacity: 0 property and revealed through hover interactions, creating engaging user experiences. Syntax selector { opacity: 0; /* Hide element */ transition: opacity duration; } selector:hover { opacity: 1; /* Reveal element */ animation: keyframe-name duration timing-function; } @keyframes keyframe-name { 0% { /* starting state */ } 100% { /* ending ...
Read MoreHow to Add CSS Rules to a Stylesheet with JavaScript?
The insertRule() method helps us add CSS rules to a stylesheet dynamically using JavaScript, while deleteRule() removes existing rules. These methods allow you to modify styles programmatically without editing the original CSS code. Syntax // Insert a rule stylesheet.insertRule(rule, index); // Delete a rule stylesheet.deleteRule(index); Method 1: Insert a CSS Rule To insert a rule at a defined position, use the insertRule() method. First, get the stylesheet using getElementById() and access its sheet property − body { ...
Read MoreAuto Grow a Textarea with JavaScript in CSS
Auto-growing textareas improve user experience by dynamically adjusting their height based on content length. This eliminates the need for scrollbars and provides a seamless typing experience. We can achieve this functionality using JavaScript to monitor content changes and CSS to control the visual appearance. Syntax textarea { resize: none; overflow: hidden; min-height: initial-height; } Method 1: Basic Auto-Growing Textarea This example demonstrates a simple auto-growing textarea that expands vertically as content is added − ...
Read MoreCreating a Page with Sidebar and Main Content Area using HTML & CSS
A webpage with a sidebar and main content area can be created using various CSS techniques. The most common approach is to create a layout where the sidebar takes up a fixed percentage of the width while the main content area fills the remaining space. Syntax .container { display: table; width: 100%; height: 100vh; } .sidebar { display: table-cell; width: percentage; } .main-content { display: table-cell; width: ...
Read More