If you didn’t see my numerous tweets about my awesome plugin, I wanted to write briefly about it here.

Why am I so excited about my plugin, Better Alert? Well it is the first plugin I’ve written. But also I really like the way it’s written. (I might be a little biased.)

It’s 15 short lines of JavaScript code, along with a little bit of CSS for styling. Let’s take a quick look to see what makes this so awesome.

exports.module = function betterAlert(text) {
  var alertDOM = document.createElement("div");
  document.body.appendChild(alertDOM);
  alertDOM.classList.add('alert');
  var contents = document.createElement("div");
  alertDOM.appendChild(contents);
  contents.classList.add('container');
  contents.innerHTML = "<h2 class=\"text\">" + text + "</h2>" +  "<button class=\"btn-primary ok-btn\" id=\"js-disableAlert\" type=\"submit\">OK</button>";
  var disable = document.getElementById('js-disableAlert');
  function removeAlert() {
    disable.removeEventListener('click', removeAlert, false);
    document.body.removeChild(alertDOM);
  }
  disable.addEventListener('click', removeAlert, false);
}

Firstly, I’ve written it in vanilla JavaScript – meaning you don’t need any specific libraries to run it. Just this code and the corresponding CSS.

I’ve attached everything to the body tag, so it doesn’t require any special syntax or corresponding tags. All of the required elements are generated from the module itself.

The module doesn’t add anything to your HTML unless you specifically call it, so it’s pretty lightweight. Also each of the elements have their own classes, so styling them to match your stuff is pretty easy.

Once your user clicks ‘OK’, all of the elements are destroyed, keeping your HTML from growing needlessly.

Now that my humble-bragging is all over, please let me know what you think!

You can see the repo here and a demo here.

Also I want to thank Devin Clark for his advice on this. Thank you, sir!

Questions? Tweet me!