shivasurya/HTML5 API - i-visionblog.markdown

## HTML5 API - i-visionblog.markdown

      
    Raw
  

              HTML5 API - i-visionblog.markdown
            
          
    HTML5 API - i-visionblog

Learning to use Rich HTML5 Javascript API for enhancing web apps - i-visionblog.com
A Pen by s.shivasurya on CodePen.
License.

  
## 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>

## 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"));
	}


## scripts
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

## style.css
	body {
	  margin: 40px;
	  background-color: #004040;
	  color: white;
	}

## 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"));
	}