Have you ever wondered how to make a JavaScript Library?

If you’ve ever used jQuery you’ll appreciate how simple it is to pick up and use, it’s full of easy to remember functions which are way more convenient than remembering the vanilla JavaScript version.

Before we start writing our own library, let’s first look at some vanilla JavaScript versions of what we use in jQuery

Show/Hide

// jQuery Show an element
$(element).show();
// JavaScript show an element
element.style.display = '';


// jQuery Hide an element
$(element).hide();
// JavaScript hide an element
element.style.display = 'none';

Add/Toggle/Remove Class

var myclass = 'chubbyninja';
// jQuery add classname
$(element).addClass(myclass);
// JavaScript show an element
element.classList.add(myclass);


// jQuery toggle classname
$(element).toggleClass(myclass);
// JavaScript toggle classname
element.classList.toggle(myclass);

// jQuery remove classname
$(element).removeClass(myclass);
// JavaScript remove classname
element.classList.remove(myclass);

Add HTML

var myhtml = '<p>This is my new HTML!</p>';
// jQuery replace html
$(element).html(myhtml);

// JavaScript replace html
element.innerHTML = myhtml;

Get/Set input value

// jQuery get value
$(element).val();
// JavaScript get value
element.value;

var myvalue = 'My New Value';
// jQuery get value
$(element).val(myvalue);
// JavaScript get value
element.value = myvalue;

As you can see from the snippets above, writing JavaScript is not that different to using jQuery.

What are the benefits of making your own JavaScript Library?

The main advantage is you can make your library lightweight – only write the functions you use, and add to it when you need to.

The Tutorial

This tutorial is going to become quite big, so I’ve split it down into steps, if you can navigate to any step here or at the bottom of each tutorial step:

  • Setting up the library – The Basics – Coming soon
  • Creating our element selector and loops – Coming soon
  • Creating our show/hide functions – Coming soon
  • Creating our attribute functions – Coming soon
  • Creating our AJAX functions – Coming soon