JavaScript

Event listeners in JavaScript are mostly added than they are removed. Most times when event listeners are removed, they are done for the purpose of adding extra functionality to an application. Other times, they are removed to improve the performance of an application. In a situation where elements are dynamically added or removed from the DOM, to prevent memory leaks, It is important to remove event listeners from elements that are no longer in the DOM....

Event listeners are a very important part of web development. From mouse clicks to keyboard presses and event touch events. These event listeners help make our applications interactive. And while it may be easy to add them in javascript, it isn’t exactly straightforward when it comes to removing them. Especially when parameters are involved. In this tutorial, I am going to be showing you how you can add and remove Event Listeners with Parameters in javascript....

Have you ever tried to add an event listener to a group of html elements all at once? if you had, you may had probably done something like this: const buttons = document.getElementsByTagName("button"); buttons.forEach((item) => { item.addEventListener("click", function () { console.log("click"); }); }); The problem with the above code is that, when you finally check your browser console, you are going to encounter an error. Why? This is because we are treating our list of buttons as an array while it is not....

We’re going to be adding dark mode to a simple website using javascript and the localStorage property of the window object. The localStorage property will be used in order to maintain dark mode even after the page is refreshed. Note: Before we start, I’d like to say that the best way to gain a lot from this tutorial is by following along, especially if you are a beginner.. (though it’s not necessary, it’s better if you could)....

In this tutorial, I am going to show you how to build a toggle switch with three states. Normally, a toggle switch has just two states: ON and OFF. That’s why it’s called a toggle switch. However, the other day, while I was browsing the Frontend Mentor website, searching for some frontend development challenges to work on, I came across the calculator challenge on their website. Working on this challenge required building a toggle switch with three states....