shivasurya · September 12, 2015 15:02
diff --git a/HTML5 API - i-visionblog.markdown b/HTML5 API - i-visionblog.markdown
diff --git a/index.html b/index.html
 <body>
  <div class="page-header">
    <h1>HTML5 Javascript API <small> for enhanced Web App development - i-visionblog</small></h1>
  </div>
  <h4>Notification API - Notifies when new info arrives
 </h4>
  <span class="label label-danger">Permission Required</span>
  <hr>
  <span>Click the button and provide permission</span>
  <br />
  <button onclick="notify()" class="btn btn-sm btn-danger">Notify Me</button>
  <hr>
  <h4>Location API - Gets Device Location INFO
 </h4>
  <span class="label label-danger">Permission Required</span>
  <hr>
  <span>This API shares the location of the Device to the Site</span>
  <br />
  <button onclick="shareLocation()" class="btn btn-sm btn-warning">Share location info</button>
  <div id="out"></div>
  <hr>
  <h4>Offline access API - LocalStorage - JSON Strings</h4>
  <span class="label label-success">No Permission Required</span>
  <hr>
  <span>This allows you to store values as String and can be easily created and retrieved since it uses key,pair values to process.</span>
  <br /> name : Shivasurya
  <br /> company : i-visionblog
  <br />
  <button onclick="localstore()" class="btn btn-sm btn-success">Store the Values</button>
  <button onclick="retrieveStore()" class="btn btn-sm btn-info">Retrieve the value</button>
  <hr>
  <h4>Offline access API - Indexed Database</h4>
  <span class="label label-success">No Permission Required</span><span class="label label-danger">Check for compatability</span>
  <hr>
 Read the Github Gist - <a href="https://github.com/SuyashMShepHertz/indexedDB_sample/blob/master/index.html">link</a>
  <hr>
  
 </body>

 </html>
diff --git a/script.js b/script.js
 function notify() {
 	  if (!("Notification" in window)) {
 	    alert("This browser does not support desktop notification");
 	  } else if (Notification.permission === "granted") {
 	    var notification = new Notification("Hi there!");
 	  } else if (Notification.permission !== 'denied') {
 	    Notification.requestPermission(function(permission) {
 	      if (permission === "granted") {
 	        var notification = new Notification("Shiva has Messaged You!");
 	      }
 	    });
 	  }

 	}

 	function shareLocation() {
 	  var output = document.getElementById("out");
 	  if (!navigator.geolocation) {
 	    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
 	    return;
 	  }

 	  function success(position) {
 	    var latitude = position.coords.latitude;
 	    var longitude = position.coords.longitude;

 	    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

 	    var img = new Image();
 	    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=700x250&sensor=false";

 	    output.appendChild(img);
 	  };

 	  function error() {
 	    output.innerHTML = "Unable to retrieve your location";
 	  };

 	  output.innerHTML = "<p>Locating…</p>";

 	  navigator.geolocation.getCurrentPosition(success, error);
 	}

 	function localstore() {
 	  if (typeof(Storage) !== "undefined") {
 	    // Code for localStorage/sessionStorage.
 	    localStorage.setItem("name", "Shivasurya");
 	    localStorage.setItem("company", "i-visionblog");
 	    alert("saved the values");
 	  } else {
 	    // Sorry! No Web Storage support..
 	    alert("Your Browser Doesnt Support Storage Feature");
 	  }
 	}

 	function retrieveStore() {
 	  alert(localStorage.getItem("company"));
 	}

diff --git a/scripts b/scripts
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
diff --git a/style.css b/style.css
 	body {
 	  margin: 40px;
 	  background-color: #004040;
 	  color: white;
 	}
diff --git a/styles b/styles
 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	<body>
	<div class="page-header">
	<h1>HTML5 Javascript API <small> for enhanced Web App development - i-visionblog</small></h1>
	</div>
	<h4>Notification API - Notifies when new info arrives
	</h4>
	<span class="label label-danger">Permission Required</span>
	<hr>
	<span>Click the button and provide permission</span>
	<br />
	<button onclick="notify()" class="btn btn-sm btn-danger">Notify Me</button>
	<hr>
	<h4>Location API - Gets Device Location INFO
	</h4>
	<span class="label label-danger">Permission Required</span>
	<hr>
	<span>This API shares the location of the Device to the Site</span>
	<br />
	<button onclick="shareLocation()" class="btn btn-sm btn-warning">Share location info</button>
	<div id="out"></div>
	<hr>
	<h4>Offline access API - LocalStorage - JSON Strings</h4>
	<span class="label label-success">No Permission Required</span>
	<hr>
	<span>This allows you to store values as String and can be easily created and retrieved since it uses key,pair values to process.</span>
	<br /> name : Shivasurya
	<br /> company : i-visionblog
	<br />
	<button onclick="localstore()" class="btn btn-sm btn-success">Store the Values</button>
	<button onclick="retrieveStore()" class="btn btn-sm btn-info">Retrieve the value</button>
	<hr>
	<h4>Offline access API - Indexed Database</h4>
	<span class="label label-success">No Permission Required</span><span class="label label-danger">Check for compatability</span>
	<hr>
	Read the Github Gist - <a href="https://github.com/SuyashMShepHertz/indexedDB_sample/blob/master/index.html">link</a>
	<hr>

	</body>

	</html>
	function notify() {
	if (!("Notification" in window)) {
	alert("This browser does not support desktop notification");
	} else if (Notification.permission === "granted") {
	var notification = new Notification("Hi there!");
	} else if (Notification.permission !== 'denied') {
	Notification.requestPermission(function(permission) {
	if (permission === "granted") {
	var notification = new Notification("Shiva has Messaged You!");
	}
	});
	}

	}

	function shareLocation() {
	var output = document.getElementById("out");
	if (!navigator.geolocation) {
	output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
	return;
	}

	function success(position) {
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;

	output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

	var img = new Image();
	img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=700x250&sensor=false";

	output.appendChild(img);
	};

	function error() {
	output.innerHTML = "Unable to retrieve your location";
	};

	output.innerHTML = "<p>Locating…</p>";

	navigator.geolocation.getCurrentPosition(success, error);
	}

	function localstore() {
	if (typeof(Storage) !== "undefined") {
	// Code for localStorage/sessionStorage.
	localStorage.setItem("name", "Shivasurya");
	localStorage.setItem("company", "i-visionblog");
	alert("saved the values");
	} else {
	// Sorry! No Web Storage support..
	alert("Your Browser Doesnt Support Storage Feature");
	}
	}

	function retrieveStore() {
	alert(localStorage.getItem("company"));
	}