### Include Polyfills via polyfill.io

Source: http://blissfuljs.com

Load the blissfuljs polyfill bundle from the CDN before including the main Bliss library.

```html
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=blissfuljs"></script>
<script src="bliss.js"></script>
```

--------------------------------

### Wrap headings with permalinks

Source: http://blissfuljs.com

Iterate through section headings and wrap them in anchor tags for permalinking.

```javascript
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);
}
```

```javascript
$$("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
	});
});
```

--------------------------------

### Fetch postcode data from API

Source: http://blissfuljs.com

Retrieve and display location data based on user input using an asynchronous request.

```javascript
var txt = document.querySelector("#postcode");
var out = document.querySelector("#uk-area");
(txt.oninput = function() {
	var url = "http://api.postcodes.io/postcodes/"+txt.value;
	var xhr = new XMLHttpRequest();
	xhr.open("GET", url);
	xhr.responseType = "json";

	document.body.setAttribute('data-loading', url);

	xhr.onload = function() {
		document.body.removeAttribute('data-loading');

		if (xhr.status === 0
		 || xhr.status >= 200 && xhr.status < 300
		 || xhr.status === 304) {
			var json = xhr.response.result;

			out.textContent = [
				json.parliamentary_constituency,
				json.admin_district,
				json.country].join(", ");
		}
		else {
			out.textContent = xhr.statusText;
		}

	};
	xhr.onerror = function() {
		out.textContent = xhr.statusText;
	};
	xhr.send(null);
})();
```

```javascript
var txt = $("#postcode");
var out = $("#uk-area");
(txt.oninput = function() {
	var url = "http://api.postcodes.io/postcodes/"+txt.value;

	$.fetch(url, {
		responseType: "json"
	}).then(function(xhr) {








		var json = xhr.response.result;

		out.textContent = [
			json.parliamentary_constituency,
			json.admin_district,
			json.country].join(", ");
	}).catch(function(error) {

		out.textContent = error;
	});
})();
```

--------------------------------

### Modify element content with Bliss

Source: http://blissfuljs.com

Select a button element and update its text content.

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

```javascript
$("button.continue").textContent = "Next Step...";
```

--------------------------------

### Toggle element visibility on click

Source: http://blissfuljs.com

Attach a click event listener to a button to change the display style of a target element.

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

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

--------------------------------

### Remove element with transition

Source: http://blissfuljs.com

Animate an element's removal from the DOM using CSS transitions and event listeners.

```javascript
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)";
```

```javascript
$("#transition-demo")._.transition({
	opacity: 0,
	transform: "scale(0)"
})
.then($.remove)
.then(function(element) {
	alert("Removed! Inspect the DOM to verify :)")
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.