Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance
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 More
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 More
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 More
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 More
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 More
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 More
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 More
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 More
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 More
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