JavaScript has a convention for converting an image URL or a local PC image to a base64 string. This string can contain a variety of symbols and letters. In here it is explained how to make a canvas element, load an image into it, and use toDataURL to display the string representation. To obtain the base64 string representation, we will also use the file reader option. In this case, it is created as a canvas element and its dimensions will be specified. The dataURL where the string representation will be stored. We will add random images from online sources and ... Read More

JavaScript has a convention for converting an image URL or a local PC image to a base64 string. This string can contain a variety of symbols and letters. In here it is explained how to make a canvas element, load an image into it, and use toDataURL() to display the string representation. To obtain the base64 string representation, we will also use the file reader option. In this case, a canvas element will be created and its dimensions will be specified. The dataURL where the string representation will be stored. We will add random images from online sources and ensure ... Read More

The most efficient method to group by a key on an array of objects in js is to use the reduce function.The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.Exampleconst people = [    { name: 'Lee', age: 21 },    { name: 'Ajay', age: 20 },    { name: 'Jane', age: 20 } ]; function groupBy(objectArray, property) {    return objectArray.reduce((acc, obj) => {       const key = obj[property];       if (!acc[key]) {          acc[key] = [];     ... Read More

You can dispatch events on individual elements using the dispatchEvent method. Let's say you have an element test with an onChange event −Event handler −document.querySelector('#test').addEventListener('change', () => console.log("Changed!"))Triggering the event manually −const e = new Event("change"); const element = document.querySelector('#test') element.dispatchEvent(e);This will log the following −Changed!

To clear a localStorage data on browser close, you can use the window.onunload event to check for tab close.Let's say you have a local storage object called MyStorage as a global for the sake of this example. Then you can write an event handler −Examplewindow.onunload = () => {    // Clear the local storage    window.MyStorage.clear() }This will clear the local storage on the tab/window close.

MEAN is an acronym for MongoDB, Express, Angular, and Node.js.MEAN.js and MEAN.io are the same things essentially as they both are scaffolded applications or a basic set up to use the above 4 things. These libraries/tools have these set up for you already.These allow you to not spend time on setting up the basic infra, rather focus on building the application.

We can use the Node.contains method to do this check. The Node.contains() method returns a Boolean value indicating whether a node is a descendant of a given node, i.e. the node itself, one of its direct children (childNodes), one of the children's direct children, and so on.ExampleFor example, you are looking for an element with id test, you can use the following −const elem = document.querySelector('#test'); console.log(document.body.contains(elem));This will log true or false based on whether the element is present in the visible DOM.

To add one day to date in JS, the setDate function is the best way. You can create the following function on the Date prototype to add days to the date.ExampleDate.prototype.addDays = function(days) {    let d = new Date(this.valueOf());    d.setDate(d.getDate() + days);    return d; } let date = new Date(); console.log(date.addDays(1));This will log the next day.

We can set the value of a select box using Javascript using the following. Suppose we have the following select box −    Select    Apple    Strawberry    Cherry    Guava To set the value of this select element, we need to access it using querySelector. Then set the value. For example −Example// Search the select box const mySelectBox = document.querySelector('#my-select'); // Set the value to 3 or Strawberry mySelectBox.value = 3;

Object-oriented programming languages allow data hiding using private fields. They use these to hide the internals of classes. In JS there is no such in build support to hide/encapsulate the inner workings.We have Anonymous functions that can give you encapsulation in JS. Let us look at an example −Exampleconst HIDDEN_CONST = 100; function fnWeWantToHide(x, y) {    return (x + y) * HIDDEN_CONST } console.log(fnWeWantToHide(1, 2))If we write the above code out in the open this code will pollute the global namespace with these names. Instead what we can do is wrap this in an IIFE(immediately invoked functional expressions). For ... Read More