JavaScript Basics — Part 1

Learnings from MDN — how to use querySelector

Photo by Jackson So on Unsplash

I personally learnt React before learning JavaScript and I found that there’s many things I don’t know about JavaScript. In an attempt to properly learn JavaScript, I will be writing a collection of articles as learnings based on what I read from Mozilla Web Docs. I’ll try to create some TLDR code samples based on what I read from the articles (seriously though, why are they so long).

In today’s article, we’ll learn what querySelector is by creating a button that plays confetti when clicked:

gif by Author

Here’s the final html, css and js codes for reference — link.

JS

Let’s start by focusing on line 20. I access the confettiButton class using querySelector and I attach an onClick event listener to it (line 22). Whenever there’s a click on the confettiBtn, the createConfetti function executes. In the function, we query the confettiBtn…