In this tutorial, we will learn if it is possible to write data to files using only JavaScript. JavaScript has a library named fs (short form of File-System) that manages all writing operations. It is a JavaScript program (fs.js) with functions for writing operations. Utilize functions to write text to system files by importing the fs module into the program. For example, the writeFile() function will erase all old data from a file and create a new one with the specified name if there isn’t already one. It is mainly used for writing operations. The File-System module is a handy ... Read More

In this tutorial, we will discuss how to store objects in HTML5 localStorage. We can access the Storage object and store data in it thanks to the interface window's localStorage property. There is no time limit on it. As a result, the data that is stored in it will remain until it is explicitly deleted. The localStorage data can't be removed by closing the browser. To store JavaScript objects in localStorage, we will investigate how to stringify and parse them into JSON strings and then how to store them in localStorage. Using the setItem() Method This setItem() method is used ... Read More

In this tutorial, we will learn How to send FormData objects with Ajax requests in jQuery. The FormData object stores value in the form of key-value pair. It mainly sends form data to the server with HTTP requests. If the form’s encoding type had been set to multipart/form-data, the submitted data would have been sent similarly via the submit() function. The FormData object contains multiple operations methods such as append, delete, set, etc. Syntax const formData = new FormData() formData.append('key', 'value') Users can follow the above syntax to create a FormData object. Asynchronous JavaScript And XML are referred to ... Read More

In this tutorial, we will learn about how to Access the Correct “this” inside a callback. “this” keyword Each function contains a keyword called this, also known as “the context, ” whose value is determined by how the function was called and not by how, when, or where it was defined. Unlike other variables, it is unaffected by lexical scopes. Compared to other languages, JavaScript acts a little differently when a function’s “this” keyword is used. Between strict mode and non-strict mode, there are several further changes. How a function is called most often determines the value of “this” (runtime ... Read More

In this tutorial, we will learn how we can add HTML and CSS to PDF. The HTML and CSS construct the webpages with styles and designs. We can save that webpage as a PDF file. Creating a PDF from scratch using vanilla JavaScript makes it very difficult, and the code will be lengthy. There are many libraries created upon JavaScript that will helps us to execute our task. The libraries like html2pdf, jsPDF, etc. are well-known libraries that convert webpages into pdf. These libraries can be implemented in the project using the script we are adding to the program. So, ... Read More

In this tutorial, we will learn why using onClick() in HTML is a bad practice. There are events and methods in JavaScript to handle the actions like clicking, hovering, etc. The onClick() is the most used method that executes a function on clicking an element. This method is applied to the element as its attribute. It may contain the name of the function or the script itself. JavaScript also contains the addEventListener method used to execute a function on the occurrence of an event. There are many ways to execute events, and every way has advantages and disadvantages. ... Read More

To make the Flexbox work on all the web browsers, use the min-width and max-width equivalents of flex. For example, for this − min-width: 40%; max-width: 40%; Use the CSS Shorthand Property. It states flex-grow | flex-shrink | flex-basis as shown in the below syntax − flex: flex-grow flex-shrink flex-basis|auto; For the above, we can set the Flex as − flex: 0 0 40%; Let us now see a Flexbox example that works on all the web browsers. We have two divs inside our parent div parentBox − ... Read More

Yes, it is possible to append to innerHTML without destroying descendants event listeners. Let us see an example. First, we will create two functions with JavaScript. Here’s the demoFunc() − function demoFunc() { alert("Hello"); } The function demoFunc() above will display an alert box and a message. With that, the start() function loads when you load the web page and displays “Two” with “One” in the div. Here’s the start() function. We have appended the text “One” from the div with the text “Two” using the innerHTML property − function start() { mydiv.innerHTML ... Read More

We can Use the canvas.toDataURL() to capture HTML canvas as different file formats, such as gif, png, jpg, webp, etc. Capture HTML Canvas as png Example Herein, after using canvas.DataURL(), set the type to image/png to allow saving the image as PNG − window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle ... Read More

To add images in the select list, set the img text for the image in the tag, which is enclosed in a div − Python In the above div dropText, all the other select items is placed with the individual images. The dropText div is styled as. This also sets the background color of the select items i.e. skyblue − .dropText { display: none; position: absolute; background-color: skyblue; ... Read More