Build Your First Javascript Library (Like jQuery!)

What is a library?

📚Materials/References:

🌎 Find Me Here:

[DevSage]

Update: I see that I've made a mistake in the .on() function. Instead of document.addEventListener(), it should be

[aykutsarac]

Your diction and the way you explain things is impressive, I'd be happy to hear tutorial of binding at js from you!

[simetric]

Very interesting. I'm learning JS and before learning React or any other framework I thought it would be better to have an idea of how frameworks works or are made. This is gold

[aaf]

I have been looking for this lesson couple years ago finally I got it here. clean, concise, straight to the point, clear as crystal. Thank you very much DevSage 💚 👍🏽 please keep up such awesome tutorials you are one of the exceptional and greatest rarest tutor in youtube.

[KostasStorasK]

One thing is nice if you return self in methods you can chain functions like $('body').on("click", function (e) {
alert(e.target);
}).attr("class", "cool")

[ashtonbradley]

Thanks Man I was stumped a bit on how I was go this, added this technique to my arsenal

[geotale]

Thank you very much for this! I finally understand the basics of it, and can move onto more complicated stuff! I really needed this, and I couldn't find anywhere else for it, so I'm lucky you do :D

[taustinofficial]

You can also fix the issue with only selecting the first element by replacing querySelector with querySelectorAll, and in your varieties of functions, you can iterate through all results of the nodelist and perform the action to each using forEach

[marcelobenitezabc]

VERY USEFUL!!! 13 MINUTES WORTH DAYS OF RESEARCH!! TKU VERY MUCH!

[culturapoliticaycomputador]

Thank you for this video, good tricks all around how to make our little approach jquery library or whatever.

[oah]

can you do the same for react or vue (something with state-mgmt)

[SimPwear]

Dude your tutorials are mind blowing. Subbed!! Don't mind me sticking around the channel and collecting gems.

[mehdi-vlnn]

some librarys like react seems to have something like an infinite loop inside and also they can be extended actually I will call react a framework

[programmingholic]

That's Pretty Great, Do you have a Vanila Javascript course on this Channel? I am new to Programming and Eger to Learn javascript before learning any Framework or library.

[auspiciouscloud]

You are a fantastic teacher and your video is much appreciated!! ❤

[pavinash]

I've one issue though, while implementing the "on" method, we're targeting the whole document. Which will trigger the click event even when click any where else other than the element. How to solve that..?

[EdTheMobGuy]

Thank you for these tutorials! Very good explanations!

[lookupverazhou]

How do you include it in your project library and reference it in your project, though? In a separate new project, I mean, or any and all other projects, for that matter.

[blessdarah]

Great tutorial. Being able to build something as light and as easy as this makes your workflow lightning fast and still doesn't have anything to do with lots of unused functions in your code.

I humbly suggest removing anything that has to do with styling or better still only build functions that can add, remove and toggle css classes. Let styling be completely out of the picture. This makes your code more reusable in other project.

[TransformYourOrganization]

Thanks for this tutorial and I appreciate.
Could You please create a JavaScript Library for Drawing shapes, drawing, add/modify/delete, clone, drag clone - images adding, moving (an intermediate level) and also import / save to SVG. Thank you.