Browser events: Parrots and Space Candies

A web browser in action: Behind the scenes footage

Imagine that one of your friends has a parrot. This is no ordinary parrot! You might ask what’s so special about it? Well, first of all, it's a bird so it can fly… and you can’t… duh… But more importantly, it's a candy seeking missile. You throw candy anywhere near this guy and I assure you, it’s not gonna see the land. Not only that, the parrot can identify each every flavor there is on the planet. That’s right! So,

• You throw candy at it with the speed of a bullet
• It just uses instant transmission and gulps it up
• It shout-outs the flavor

Now that’s some parrot your friend’s got…

When you are visiting a page, Browsers are parrots which somehow capture whatever you throw at them, scrutinize it into a specific data structure “the flavor” and pass on the information, “the shout-out”.

As a developer, all you gotta do is write the code which can process the event (“shoutout”).

We all know parrots are amazing learners. They can learn to shout almost anything you want them to. If you want them to say “Amazing” instead of “Strawberry”, they’ll probably do that. Really? The hell I know, I’ve never had a parrot as my pet. Drop comments below if you feel the need to correct me on this.

Well, you can also teach the browser to give personalized shoutouts (custom events).

While developing, here is the list of events at your disposal: https://developer.mozilla.org/en-US/docs/Web/Events

You just get a reference of the DOM object responsible for firing the event and attach a listener to it. The listener takes two arguments.

• type of the event
• function which will be executed when the event is fired

The function also takes an object(containing event data) as an argument. Let’s get going…

This section is for dummies. I mean no disrespect. If you’ve already are comfortable with the basics of interfaces, classes, objects, and functions, I suggest you head over to the MDN version: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

If you are not, this section might just give an insight into how things work in the browser, especially what happens when an event is fired.

Here is a hello-world:

We are going to add a button and listen for click events on it. So what we need is basically a console.log which prints something whenever we click the button. This will help you get an idea about what the browser is doing with your interactions.

The HTML

Now,

• Create a new folder,
• Put these two files (h.js and the HTML file, you can name the HTML file whatever you want, just end the name with .html, thanks…) in that folder,
• open the HTML file in a browser (double click on it, dum dum).

You will have this in the browser.

Do not click the button, if you have already, refresh the page and press F12. You will be treated with something like this:

I am using google chrome.

This is where you can print logs and stuff…

Now I want you to click, the button.

Notice anything different in this image?

If you focus on the console tab at the bottom, you can see that it’s showing the log message as expected. If you click on the arrow pointing towards “MouseEvent”, you’d see all the data that is contained in the event. This is all the information that the browser collected when you clicked the button.

After doing that the browser just clubbed everything into an object which your handler received as an argument.

That’s how we teach the parrot to dance when you throw a strawberry flavored candy at it.

You get the analogy, right?

Moving on, now we know how to teach the parrot to do something specific when we throw a specific candy at it. The parrot knows all the flavors on the planet, that yet exist.

Imagine that you have, in your possession, a space candy. Not just one, but a bunch of them. The Candies come with a warning on the wrapper:

“Not for Parrots! Do not try to feed this to a parrot.”

You’ve tried every one of them and you are, to everyone’s surprise, in good health. You’ve noticed that one of them tastes like a mixture of mango and grape. I am just going with the flow here…

So basically you have candy with two flavors. That means if you create a candy with the same flavors using earthly ingredients, your friend’s parrot will be alright and can also identify the candy type.

That means you can create a space-like candy and teach the parrot the “Space-like Candy” shoutout! Yay!

This is where the custom events come in.

Again if you trust your skills, here’s MDN’s take on the custom event: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Alright dummies, here we go again!

We’ll put 2 buttons and a hidden message on the page. The text will only be revealed if the 2 buttons are clicked in a specific order and for a specified amount of time. We will also have a reset button to restart the whole pattern matching process.

The order’s gonna be: 1–2–1–2

Here’s the code:

The HTML

s.js: this is where the magic happens

• Add these files to the same folder.
• Open the HTML file in the browser
• Press F12

Here’s what you have now:

Now let's have some fun, clicking on button 1 we can see some logs in the console. They are just to show the order of execution of things happening inside the browser.

The log shows the order in which the events occur:

• Click event occurs and the “buttonClicksListener.handleEvent” function is called
• We figure out the id of the button and modify “clicksSoFar” if needed
• Then we dispatch the appropriate custom event to “theSecret”

You can see that we are tracking the pattern in which the buttons are being clicked upon. One more click on “Button 1” and we’ll know THE SECRET!

And there it is. I know, I know, it's not the secret you were expecting but life is full of disappointments, get used to it… Or learn to look at the bright side. We just created 2 custom events for our <p> tag! We dispatched the custom events conditionally!!

I guess we got something from this after all…

Clicking on the buttons just updates the current pattern. And since we are sending the “close-seseme” event on each button click if the “clicksSoFar” is not equal to the pattern we defined “1212”, the secret disappears again

Clicking on the reset button just resets the “clickSoFar” value to “”. And the “close-seseme” event gets dispatched again, making sure the secret is still invisible.

So what we basically did is we simulated a behavior (functionality of a vault essentially) with 2 button clicks and custom events.

In case of parrots, it would have been that if the parrot named <input> got a string containing the words “mango” and “grape”, the parrot shoutouts container, <p>, would just print “Amazing Mango-Grape Space Candy!”.

That’s your job now.

Make a GitHub repository and share the link at fun@sdiot.io, or in the description below.

And I know that its “sesame” not “seseme”. Grammarly told me that… But I am too lazy to retake the screenshots…

Claps! Claps! Please!!!! 🙏

Alright then! Hopefully, you got something out of this article. As always any constructive feedback is appreciated. Please leave it either at fun@sdiot.io or in the comments section below. This is Akshay Kumar, signing off…

Until next time!