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
Update HTML5 canvas rectangle on hover
To update HTML5 canvas rectangle on hover, you need to handle mouse events and redraw the canvas. Here's how to create a rectangle that changes color when you hover over it. Basic Setup First, create a canvas element and get its context: var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // Draw initial rectangle function drawRectangle(fillColor) { context.clearRect(0, 0, canvas.width, canvas.height); context.rect(20, 20, 150, 100); context.strokeStyle = "black"; context.stroke(); ...
Read MoreWhat are the differences between lodash and underscore?
Lodash and Underscore are both utility libraries that make JavaScript easier by providing utils that make working with arrays, numbers, objects, strings, etc. much easier. These libraries are great for: Iterating arrays, objects, & strings Manipulating & testing values Creating composite functions They are both functional libraries. Lodash is a fork of Underscore, and still follows Underscore's API enough to allow it to serve as a drop-in replacement. But under the hood, it's been completely rewritten, and it's also added a number of features and functions that ...
Read MoreHow to preview an image before it is uploaded in JavaScript?
In JavaScript, you can preview an image before uploading using the FileReader API. This allows users to see their selected image immediately without needing to upload it to a server first. How FileReader Works The FileReader API reads file contents asynchronously. For image preview, we use readAsDataURL() which converts the image file into a base64 data URL that can be displayed in an element. Example Image Preview Example ...
Read MoreHow to duplicate elements of an array in the same array with JavaScript?
Duplicating array elements means creating copies of each element within the same array. JavaScript provides several methods to achieve this, with concat() being the most straightforward approach. Using concat() Method The concat() method merges arrays and returns a new array. When you concatenate an array with itself, you effectively duplicate all elements. Duplicate Array Elements body { ...
Read MoreConvert JavaScript array iteration result into a single line text string
Let's say we have a string and an array of keywords to search for: const textString = 'Convert javascript array iteration result into a single line text string. Happy searching!'; const keywords = ['integer', 'javascript', 'dry', 'Happy', 'exam']; We need to write a function that maps the array to a string containing only true and false values, depending on whether each array element is present in the string or not. Solution Using reduce() and join() The most efficient approach uses reduce() to build an array of boolean values, then join() to convert it into ...
Read MoreCan array form consecutive sequence - JavaScript
We are required to write a JavaScript function that takes in an array of numbers and checks if the elements of the array can be rearranged to form a sequence of consecutive numbers or not. For example, if we have an array [3, 1, 4, 2, 5], these numbers can be rearranged as [1, 2, 3, 4, 5] to form a consecutive sequence. Problem Understanding A consecutive sequence means each number is exactly 1 more than the previous number. To check this, we need to: Sort the array in ascending order ...
Read MoreIs it a good practice to place all declarations at the top in JavaScript?
Yes, it is generally a good practice to place all JavaScript declarations at the top of their scope. This improves code readability, organization, and helps prevent common issues related to variable hoisting. Example Variable Declaration Best Practice // All variables declared at the top var str, re, found; ...
Read MoreHow to set the style of the rule between columns with JavaScript?
Use the columnRuleStyle property to set the style of the rule between columns in JavaScript. This property controls the visual appearance of the line that separates columns in multi-column layouts. Syntax element.style.columnRuleStyle = "value"; Available Values The columnRuleStyle property accepts the following values: none - No rule (default) solid - A single solid line dotted - A series of dots dashed - A series of dashes double - Two solid lines ...
Read MoreHow not to validate HTML5 input with required attribute
To avoid validation on specific form elements in HTML5, use the formnovalidate attribute on submit buttons or the novalidate attribute on the form itself. This allows you to bypass HTML5's built-in validation for required fields when needed. Using formnovalidate Attribute The formnovalidate attribute can be added to submit buttons to skip validation for that specific submission: HTML formnovalidate attribute Rank: ...
Read MoreHow to adopt a flex div's width to content in HTML?
By default, flex containers with display: flex take up the full width of their parent. To make a flex container shrink to fit its content, use display: inline-flex. The Problem with display: flex Regular flex containers expand to fill their parent's width, even when content is smaller: .flex-container { display: flex; padding: 10px; background-color: lightblue; border: 2px solid blue; margin: 10px 0; } ...
Read More