pretty25/Bikes_availability.html

## Bikes_availability.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
  	var str = $("#idOfBikePoint").val();
        var url ="https://api.tfl.gov.uk/Place/"+str;

    $.get(url, function(data, status){
      var list = data.additionalProperties;
          	var text ="";
      for (var item in list) {
    	item = list[ item ];
    	if(item.key==='NbBikes')
    	{
    		text = "Available Bikes: "+ item.value;
    	}
    	if(item.key==='NbEmptyDocks')
    	{
    		text = text + "\nEmpty Docks: "+ item.value;
    	}
       }
      alert(text);
     }
    );
  });
});
</script>
</head>
<body>

    Enter Dock Station Id  Here <input type="text" id="idOfBikePoint">
    <br/>

<button>Click Here To find Available Bikes for the bike point </button>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
	$("button").click(function(){
	var str = $("#idOfBikePoint").val();
	var url ="https://api.tfl.gov.uk/Place/"+str;

	$.get(url, function(data, status){
	var list = data.additionalProperties;
	var text ="";
	for (var item in list) {
	item = list[ item ];
	if(item.key==='NbBikes')
	{
	text = "Available Bikes: "+ item.value;
	}
	if(item.key==='NbEmptyDocks')
	{
	text = text + "\nEmpty Docks: "+ item.value;
	}
	}
	alert(text);
	}
	);
	});
	});
	</script>
	</head>
	<body>

	Enter Dock Station Id Here <input type="text" id="idOfBikePoint">
	<br/>

	<button>Click Here To find Available Bikes for the bike point </button>

	</body>
	</html>