EJS is a templating language that allows us to generate HTML markup using plain JavaScript. It provides a simple and intuitive way to generate dynamic content in our web applications, making it easier to manage and organize our code. EJS is easy to use and can be integrated into any JavaScript project with just a few steps. In this tutorial, we will learn the basics of how to use EJS in JavaScript, including how to set up our project, create an EJS template, and render the template to generate dynamic HTML output Steps to use EJS in a JavaScript ... Read More

Overview To check for an image whether it is loaded or not in order to perform some actions can be done by using JavaScript. In many cases our browser fails to load the image due to large size of image, or poor network connectivity. So our image may sometimes show some errors. So to know whether our image is loaded or not we have certain methods such as onload(), onerror() and complete property. Syntax The syntax to solve the problem are − onload="function()" − This function is called when the image is loaded successfully. In this any callback function ... Read More

Overview To perform a certain task first we need to access that particular element by its class or by id so before accessing the element we check whether that class is present in that particular element or not. The classList object contains the built-in method classList.contains() in JavScript. This method determines whether the given element belongs to the specified class. This whole process will take place, as first we have to access that element by getElementById(), getElementsByClassName(), or any other method. After accessing it, we have to check for the class with the classList.contains() method. Syntax The syntax used in ... Read More

Sharing code between the backend and front end of a full-stack application can be a challenging task. However, it's essential for building maintainable and scalable applications. By sharing code, we can avoid code duplication, reduce development time, and maintain consistency across our applications. In this tutorial, we'll explore different techniques for sharing code between Node.js and the browser and learn how to choose the best approach for our project. Techniques for Sharing Code Between Node.js and the Browser Users can follow the approaches below to share code between node.js and the browser − CommonJS Modules CommonJS modules are ... Read More

Overview In today's world there are various browsers available on the system. So sometimes there are certain Cascading Style Sheets (C.S.S.) property that does not run on that browser. So to check which CSS properties are supported for that specific browser, JavaScript has the in-built method CSS.supports(), which checks whether that specific property is supported by the browser or not. The supports() method is supported by all the browsers: Opera, Edge, Chrome, and Firefox. Syntax The CSS.supports() method takes a key-value pair as input, which is in String format. The basic syntax used is − CSS.supports(“propertyName:value”); supports() − ... Read More

The setInteral() method allows us to continuously trigger a callback function after every particular time period. We can pass the callback function as the first parameter to trigger after every time period, and the time period in the milliseconds as a second parameter. The setInterval() method invokes the callback function after a particular number of milliseconds for the first time. Now, the problem is we need to invoke the callback function instantly for the first time at 0 milliseconds, and after that, we need to invoke it continuously in the given time period. Example In the example below, we created ... Read More

The range input allows a selection of any value between the particular range of values. Using JavaScript, we can get the input value that users have entered in the range input. The onchage event triggers only when the user releases the mouse key. So, it will not update the value while dragging the range slider. You can face this problem in all browsers, such as chrome, safari, but not only in Firefox. Users can follow the example below to check whether the input value is updated while dragging the range input. Example 1 (Input values will not update while dragging ... Read More

Generally, developers add the submit button to submit the input field's text. However, if they allow users to submit the input value by pressing enter, it improves the UX of the application. Here, we will learn the general way to detect the key press using the key listener event. Afterwards, we can perform any operation whenever the user presses the enter key button. Syntax Users can follow the syntax below to detect whenever the user presses the enter key. input.addEventListener("keypress", function (event) { if (event.keyCode == 13) { // enter pressed ... Read More

To trigger a file download when clicking an HTML button or JavaScript, is a very common and important part of web page where users can directly download the file they want by clicking a button or link. We will be understanding four different approaches to achieve this. In this article, we are having a button in our HTML document and our task is to trigger a file download when clicking an HTML button or JavaScript. Approaches to trigger file download Here is a list of approaches to trigger a file download when clicking an HTML button or JavaScript which we ... Read More

In JavaScript, we can use the splice() method to splice an array. The splice() method inserts or deletes single or multiple elements from the array. We can pass the starting index as the first parameter of the splice() method, from which we can insert or delete the elements. It takes the number of elements to delete from the array as a second parameter and array values as the third parameter to insert into the array. This tutorial will teach us to splice an array without mutating the original array. Mutating the original array means making changes to the array. Whenever ... Read More