Posts

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....

In this tutorial, we’re going to learn four ways in which we can remove a click event from an HTML element. There may be more ways than four, of which I am not aware of, so please do well to leave them in the comments below if I haven’t listed what you know. So for this tutorial, we are going to be using a button. Let’s get started. Removing pointer-events in CSS The first method on the list, is removing pointer-events in CSS....

In this tutorial, we’re going to be learning how to build out a flip card using html and CSS. Prerequisites This tutorial assumes basic knowledge of HTML and CSS: including topics such as flexbox, CSS pseudo selectors and how to properly layout elements using CSS. This tutorial is not for absolute beginners, and as such, will not explain every basic concept. Before we start, I will like to explain the step-by-step process we’re going to follow in order to build out this flip card....

In this tutorial, we’re going to be stretching our html and css skills by building out a figma logo clone. Why are we building a figma logo clone? Two reasons: It is very easy to build. Anybody can follow along. It is not a very common thing to build. Plus, it sounds like fun to be building out the logo of a really popular UI design tool, so that’s what we are going to be doing....

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....