trongthanh/index.html

## index.html
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>MY PAGE TITLE HERE</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js"></script>
    <script>
        $(function() {
            var helloWorldTemplate = Handlebars.compile($('#hello-world-template').html());

            $('#fetch-data-btn').on('click', function() {
                fetchData();
            });

            function fetchData() {

                $.get('http://api.waqi.info/feed/@8767/?token=9a7b5159d27b748c6c24449560afa6d241bc6921', function(json) {
                    console.log(json);

                    $('#status').html(helloWorldTemplate({
                        'city': json.data.city.name,
                        'aqi': json.data.aqi
                    }));
                })
            }
        })


    </script>
    <script id="hello-world-template" type="text/x-handlebars-template">
        <div>City: {{city}}</div>
        <div>AQI: {{aqi}}</div>
    </script>
</head>

<body>
    <button id="fetch-data-btn" class="btn btn-default">Fetch me data</button>
    <div id="status"></div>
</body>

</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>MY PAGE TITLE HERE</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js"></script>
	<script>
	$(function() {
	var helloWorldTemplate = Handlebars.compile($('#hello-world-template').html());

	$('#fetch-data-btn').on('click', function() {
	fetchData();
	});

	function fetchData() {

	$.get('http://api.waqi.info/feed/@8767/?token=9a7b5159d27b748c6c24449560afa6d241bc6921', function(json) {
	console.log(json);

	$('#status').html(helloWorldTemplate({
	'city': json.data.city.name,
	'aqi': json.data.aqi
	}));
	})
	}
	})


	</script>
	<script id="hello-world-template" type="text/x-handlebars-template">
	<div>City: {{city}}</div>
	<div>AQI: {{aqi}}</div>
	</script>
	</head>

	<body>
	<button id="fetch-data-btn" class="btn btn-default">Fetch me data</button>
	<div id="status"></div>
	</body>

	</html>