Want to use Vanilla JS but find native APIs a bit unwieldy? Bliss is for you.

A quick look

Get the <button> element with the class 'continue' and change its content to 'Next Step...' [example credit]

document.querySelector("button.continue") .textContent = "Next Step..."; $("button.continue").textContent = "Next Step...";

Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked [example credit]

var hiddenBox = document.querySelector("#banner-message"); document.querySelector("#button-container button") .addEventListener("click", function(event) { hiddenBox.style.display = "block"; }); var hiddenBox = $("#banner-message"); $("#button-container button") .addEventListener("click", function(event) { hiddenBox.style.display = "block"; });

Ok, these were easy even with plain Vanilla JS. Nobody needs a library for that! Shall we move on to more realistic examples?

Remove the following pink <pre> element from the DOM with a fade out and shrink transition, then display a message:

var demo = document.querySelector("#transition-demo"); demo.style.transitionProperty = "opacity, transform"; demo.style.transitionDuration = "400ms"; var callback = function() { demo.removeEventListener("transitionend", callback); clearTimeout(t); this.parentNode.removeChild(this); alert("Removed! Inspect the DOM to verify :)"); }; demo.addEventListener("transitionend", callback); // Failsafe var t = setTimeout(callback, 450); demo.style.opacity = "0"; demo.style.transform = "scale(0)"; $("#transition-demo")._.transition({ opacity: 0, transform: "scale(0)" }) .then($.remove) .then(function(element) { alert("Removed! Inspect the DOM to verify :)") });

Wrap all headings with links to their section (check this section’s heading after running):

var h1s = document.querySelectorAll("section[id] > h1"); for (var i=0; i<h1s.length; i++) { var h1 = h1s[i]; var a = document.createElement("a"); a.href = "#" + h1.parentNode.id; a.title = "Permalink"; a.className = "permalink"; a.addEventListener("click", function(evt) { // Use History API if available if (history.pushState) { evt.preventDefault(); history.pushState(null, "", this.href); } }); h1.parentNode.insertBefore(a, h1); a.appendChild(h1); } $$("section[id] > h1").forEach(function(h1) { $.create("a", { href: "#" + h1.parentNode.id, title: "Permalink", className: "permalink", events: { click: function(evt) { // Use History API if available if (history.pushState) { evt.preventDefault(); history.pushState(null, "", this.href); } } }, around: h1 }); });

Look up the UK postcode with postcodes.io and print the results here: