geolocation.html

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>
<button onclick="showError()">Show Error</button>

<p id="demo"></p>
<div id="mapholder"></div>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

// function showPosition(position) {
//     x.innerHTML = "Latitude: " + position.coords.latitude + 
//     "<br>Longitude: " + position.coords.longitude;
// }

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}


function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

indexeddb.html

var idbSupported = false;
	var db;

		document.addEventListener('DOMContentLoaded', function(){
			if("indexedDB" in window) {
				idbSupported = true;
				// console.log("YES! Your browser support Indexed DB!");
			} else {
				console.log("Your browser DON'T support Indexed DB!");
			}

			if (idbSupported) {
				var openRequest = indexedDB.open("auto_people", 3);

				openRequest.onupgradeneeded = function(e){
					console.log("Running onupgradeeded...");

					var thisDB = e.target.result;

					if(!thisDB.objectStoreNames.contains("people")){
						thisDB.createObjectStore("people", {autoIncrement:true});
					}
				}

				openRequest.onsuccess = function(e){
					console.log("success!");
					db = e.target.result;

					//Listen for add clicks
					document.querySelector('#addButton').addEventListener("click",addPerson, false);

					document.querySelector('#getButton').addEventListener("click", getPerson, false);
				}

				openRequest.onerror = function(e){
					console.log("error!");
					console.dir(e);
				}
			}

		}, false);

		function addPerson(e){
			var name = document.querySelector('#name').value;
			var email = document.querySelector('#email').value;

			var transaction = db.transaction(['people'], "readwrite");
			var store = transaction.objectStore("people");

			var person = {
				name: name,
				email: email,
				created: new Date()
			}

			var request = store.add(person);

			request.onerror = function(e){
				alert('error!');
				console.dir(e);
			}

			request.onsuccess = function(e){
				console.log('Did it!');
			}
		}

		function getPerson(e){
			var key = document.querySelector('#key').value;
			if (key === '' || isNaN(key)) {return;}

			var transaction = db.transaction(['people'], "readonly");
			var store = transaction.objectStore("people");

			var request = store.get(Number(key));

			request.onsuccess = function(e){
				var result = e.target.result;
				console.dir(result);

				if(result){
					var s = "<h2>Key "+key+"</h2><p>";
			            for(var field in result) {
			                s+= field+"="+result[field]+"<br/>";
			            }
			            document.querySelector("#status").innerHTML = s;
		        } else {
		            document.querySelector("#status").innerHTML = "<h2>No match</h2>";
		        }   
			}
		}

schema.org-movie.html

<div itemscope itemtype="http://schema.org/Movie">
	 <h1 itemprop="name">Avatar</h1>
	 <div itemscope itemtype="http://schema.org/Person"><span itemprop="name">Director: <span itemprop="director">James Cameron</span> (born <span itemprop="birthData">August 16, 1954</span>)</span></div>
	 <span itemprop="genre">Science fiction</span>
	 <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

schema.org-offer.html

<div itemscope itemtype="http://schema.org/Offer">
	  <span itemprop="name">Blend-O-Matic</span>
	  <span itemprop="price">$19.95</span>
	  <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
	    <img src="four-stars.jpg" />
	    <meta itemprop="ratingValue" content="4" />
	    <meta itemprop="bestRating" content="5" />
	    Based on <span itemprop="ratingCount">25</span> user ratings
	  </div>
</div>