In this article, we will be exploring how to add HTML elements dynamically so that they could change the view component. Also not just an HTML element, we can also add CSS properties to HTML elements with the help of JavaScript. In this article, we will be using a button to facilitate the addition of an HTML element in the already built template.ApproachWe will create a Simple HTML page with some components defined.Once the page is created we will be writing some outer HTML and adding a button to it so that we could add this HTML when a user ... Read More

In this article, we will be exploring Google Maps and how to add or embed google maps into our HTML template/website. Once the Google Maps are embedded into the website we can pin a location in it to display the user the current position of the store or a company.StepsBelow are the steps that need to be followed to embed Google Maps into your HTML pages −We need to generate an API key to be able to use Google maps privately.Creating the HTML container to place Google Maps.Adding the external script provided by Google inside the HTML document.Write the JavaScript ... Read More

JavaScript is a relatively new language with lots of new features and enhancements over the traditional HTML & CSS pipelines. With the new age era, JavaScript has captured most of the frontend market in a relatively lower period of time. It has gained tremendous popularity and is the go to language for any frontend needs.In this article, we are going to explore how does the traditional JavaScript works behind the frontend templates. How it processes the elements and how it executes them?JavaScript is a synchronous, single threaded language with specific order of execution.Everything inside a JavaScript function executes inside the ... Read More

In this article, we will be exploring how async code actually works in JavaScript, how it is initialized, and how it is executed and called. But before moving on let’s look at what is synchronous code and how it is different from asynchronous codeSynchronous Code − This implies that the user is having the data that is synchronously called and accessed as available in the order. In this user calls the method and only after the method is called it is executed and checked.In Asynchronous code, the trigger is hit by a user or system. It is not necessary who ... Read More

In HTML, sometimes the user needs to access the HTML elements to display the user different changes. We can support this by using modern-day JavaScript. To facilitate this, we can move ahead and change the HTML element by using the following techniques −Get HTML element by IdGet HTML element by classNameGet HTML element by NameGet HTML element by tagNameGet HTML element by CSS SelectorBelow we have added the demonstration for the above methods.Get HTML element by IdThis method gets the element from a unique ID and lets the user access that element. Users can use the getElementById() method to access ... Read More

Static variables can be defined as a class property that is used in a class and not on the class instance. This type of variable is stored in the data segment area of the memory. The value assigned to these types of variables is shared among every instance that is created in the class.We need to use the static keyword for creating any static entity like a static variable, static function, operators, properties, etc. The value of a static variable is set at the runtime of the application and serves as a global value for the whole application.Example 1In the ... Read More

The addEventListener and the on-click event both listen for an event. Both these event methods record an event and execute a function based on that event whenever a button is clicked. Though there is a difference between both these events work.In this article, we are going to explore the differences between the addEventListener and the on-click function in JavaScript.1. addEventListenerThe addEventListener method uses an event handler to attach it to the specified elementSyntaxelement.addEventListener(event, listener, useCapture);Parametersevent − Event can be defined as any valid JavaScript event. The events are generally used without the on prefix (as used in the onclick method).Listener ... Read More

JavaScript has become an inevitable part of modern-day websites. Each and every website requires the latest JavaScript support and works flawlessly once allowed. We have a toggle inside every browser to switch on and off the JavaScript on our websites. If JavaScript is not enabled in our browsers, they react abnormally and prevent the user from using most of the functions and events.Therefore, to use the websites efficiently we need to enable JavaScript. Following are the most popularly used browsers. We will be looking to enable JavaScript in these −Google ChromeMozilla FirefoxSafariGoogle ChromePlease follow the below steps to enable JavaScript on ... Read More

We can easily create a simple color picker on a palette in Javascript. The primary colors on a color picker are RGB i.e. Red, Green, and Blue. With the help of mixing these colors, we can form any color we want.In this article, we will be learning about how to get the RGB value from the user and form different colors with the help of CSS using the RGB color properties. The color intensity of RGB ranges from 0 to 255 where 0 is the least intensity and 255 is the highest intensity.When the intensity of all the 3 coolers ... Read More

In this article, we are going to create a calculator using JavaScript We will be using the basic math formulas to calculate the profit and loss. We will be returning the result in percentage along with the actual values.To calculate the Profit and Loss we need two things that are: CP (Cost Price) and SP (Selling Price).Formulas to Calculate Profit and Loss −Profit: SP – CPProfit Percentage: Profit/CP * 100Loss: SP – CPLoss Percentage: Loss/CP * 100Example 1In the example below, we have created a calculator that will calculate the profit and loss percentage as per the cost price and ... Read More