Skip to content

Instantly share code, notes, and snippets.

@timfulmer

timfulmer/beginner-spa

Last active August 29, 2015 14:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timfulmer/8bba7c1bcf4250443374 to your computer and use it in GitHub Desktop.
Save timfulmer/8bba7c1bcf4250443374 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
beginner-spa
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{name}}</h1>
<div class="body">
weather: {{weather.0.description}}
</div>
</div>
</script>
<script>
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
function getWeather(){
var city=$('#weather').val();
$.ajax({
url:'http://api.openweathermap.org/data/2.5/weather?q='+city,
success:function(data){
console.log(data);
var html = template(data);
$('#renderedContent').html(html);
},
error:function(err){
console.log(err);
}
});
}
$(document).ready(function(){
console.log('Hello World!');
});
</script>
<body>
<input type="text" id="weather"/><button onclick="getWeather()">Get Weather</button>
<div id="renderedContent">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment