Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Zipline: Show the Local Weather
<div class="container text-center">
<h3 class="text-primary">WeatherMe</h3>
<hr>
<div id="local-weather-wrapper"> Please enable your Location/GPS sensor and refresh this page. It is required to gather Weather information. Thanks!</div>
<hr>
<br>
<br>
<p>This is a front-end project from FreeCodeCamp built with Backbone.js, http://openweathermap.org, and HTML5 Geolocation</p>
</div>
<script type="text/template" id="local-weather-app">
<button class="btn btn-primary" id="toggleTemp" unit='metric'></button>
<button class="btn btn-primary" id="refreshData">Refresh</button>
<div id="local-weather-content-wrapper"></div>
</script>
<script type="text/template" id="btnToggleUnit">
View on <%= unitName %>
</script>
<script type="text/template" id="tempWrapperContent">
<h1><img src="http://openweathermap.org/img/w/<%= weatherIcon %>.png"/><%= mainTemp %> <%= unitIcon %></h1>
<b>Min:</b> <%= minTemp %> <%= unitIcon %> - <b>Max:</b> <%= maxTemp %> <%= unitIcon %>
</script>
<script type="text/template" id="local-weather-content">
<div id="tempWrapper"></div>
<br>
<%= weatherLocation %>, <%= country %> | <%= weatherTitle %> - <%= weatherDesc %>
<br>
<br>
<h3>Detail</h3>
<ul class="list-unstyled">
<li>
<b>Atmospheric Pressure:</b> <%= mainPressure %> hPa
</li>
<li>
<b>Humidity:</b> <%= humidity %>%
</li>
<li>
<b>Cloudiness:</b> <%= cloudiness %>%
</li>
<li>
<b>Wind Speed:</b> <%= windSpeed %> m/sec
</li>
<li>
<b>Wind Direction:</b> <%= windDirection %> &#176;
</li>
<li>
<b>Sunrise time:</b> <%= sunriseTime %>
</li>
<li>
<b>Sunset time:</b> <%= sunsetTime %>
</li>
</ul>
<br>
<br>
<i>Updated on <%= timeDataCalc %></i>
</script>
/*
NOTE:
seems like navigator.geolocation is loading last.
check out this article for initializing a backbone.js app
- http://rjzaworski.com/2012/12/initializing-backbone-applications
- https://cdnjs.com/libraries/backbone.js/tutorials/organizing-backbone-using-modules
- http://codebeerstartups.com/2012/12/11-namespacing-in-backbone-js-learning-backbonejs/
First issue i came across was how these objects where loaded,
thats when i figure how navigator.geolocation values arent being passed to url
Then, i came across with passing these values to url parameter via fetch/jquery ajax
*/
console.log('0 outside');
var vent = _.extend({}, Backbone.Events);
var currentWeather = Backbone.Model.extend({
url: function() {
console.log('3 model url req');
return 'http://api.openweathermap.org/data/2.5/weather?units=imperial&lat=&lon=';
}
});
var btnToggleUnit = Backbone.View.extend({
el: '#toggleTemp',
template: _.template( $('#btnToggleUnit').html() ),
initialize: function() {
// initial set values
this.unitName = 'Celsius';
this.$el.html( this.template({ unitName: this.unitName }) );
this.flagToggle = this.$el.attr('unit');
},
events: {
'click': 'toggleTemp'
},
updateView: function() {
this.$el.html( this.template({ unitName: this.unitName }) );
},
toggleTemp: function(e) {
e.preventDefault();
if (this.flagToggle === 'metric') {
this.flagToggle = 'imperial';
this.$el.attr('unit', this.flagToggle);
this.unitName = 'Farenheit';
this.cIcon = '&#8451;';
vent.trigger("convertTemp", { unitFlag: this.flagToggle, unitIcon: this.cIcon });
} else {
this.flagToggle = 'metric';
this.$el.attr('unit', this.flagToggle);
this.unitName = 'Celsius';
this.fIcon = '&#8457;';
vent.trigger("convertTemp", { unitFlag: this.flagToggle, unitIcon: this.fIcon });
}
this.updateView();
/*var defaultUnit = 'imperial',
metricUnit = 'metric',
url = this.model.url(),
tempMetric = url.match(/units=(.*)&lat/)[1];*/
}
});
var appCurrentWeather = Backbone.View.extend({
el: '#local-weather-wrapper',
template: _.template( $('#local-weather-app').html() ),
model: new currentWeather(),
initialize: function(options) {
/*
NOTE:
http://ianstormtaylor.com/break-apart-your-backbonejs-render-methods/
http://stackoverflow.com/questions/26046474/celsius-and-fahrenheit-converter-javascript
*/
// values
this.geoloc = options.geoloc;
//this.unitIcon = '&#8451;';
console.log('1 app wrapper');
this.render();
},
render: function() {
// render parent view template
this.$el.html( this.template );
this.loadToggleUnitBtn = new btnToggleUnit();
// load displayWeather view
this.displayWeather = new displayCurrentWeather({coords: this.geoloc, model: this.model });
},
events: {
'click #refreshData': 'refreshData'
},
refreshData: function() {
this.displayWeather.remove();
this.render();
}
});
/*
Note on triggering this view from another view
http://stackoverflow.com/questions/9984859/backbone-js-can-one-view-trigger-updates-in-other-views
*/
var mainTempView = Backbone.View.extend({
el: '#tempWrapper',
template: _.template( $('#tempWrapperContent').html() ),
initialize: function() {
this.$el.html( this.template(this.model) );
}
});
var displayCurrentWeather = Backbone.View.extend({
el: '#local-weather-content-wrapper',
template: _.template( $('#local-weather-content').html() ),
initialize: function(options) {
this.lat = options.coords.lat;
this.lon = options.coords.lon;
console.log('2 display view');
vent.bind('convertTemp', this.convertTemp, this);
/*
NOTE:
http://stackoverflow.com/questions/6659283/backbone-js-fetch-with-parameters
*/
this.model.fetch(
{ data: $.param({
lat: this.lat,
lon: this.lon
})
});
this.listenTo(this.model, 'sync', this.render);
},
render: function() {
console.log('4 render view');
// we'll end up breaking up this render function
var m = this.model.attributes,
data = {
weatherLocation: m.name,
weatherTitle: m.weather[0].main,
weatherDesc: m.weather[0].description,
mainPressure: m.main.pressure,
humidity: m.main.humidity,
windSpeed: m.wind.speed,
windDirection: m.wind.deg,
cloudiness: m.clouds.all,
country: m.sys.country,
timeDataCalc: this.formatDate(m.dt),
sunriseTime: this.formatDate(m.sys.sunrise),
sunsetTime: this.formatDate(m.sys.sunset)
},
tempData = {
weatherIcon: m.weather[0].icon,
unitIcon: '&#8457;',
mainTemp: m.main.temp,
minTemp: m.main.temp_min,
maxTemp: m.main.temp_max
}
this.$el.html( this.template( data ) );
this.renderMainTempTpl = new mainTempView({ model: tempData });
},
convertTemp: function(arg) {
var m = vent._events.convertTemp[0].context.model.toJSON(),
tempData = {
weatherIcon: m.weather[0].icon,
mainTemp: m.main.temp,
minTemp: m.main.temp_min,
maxTemp: m.main.temp_max
};
if (arg.unitFlag === 'imperial') {
console.log('cnvert to celsius');
// formula to convert f to c: Math.round((f.value - 32) * 5 / 9)
var tempCelsius = {
weatherIcon: m.weather[0].icon,
unitIcon: arg.unitIcon,
mainTemp: Math.round((m.main.temp - 32) * 5 / 9),
minTemp: Math.round((m.main.temp_min - 32) * 5 / 9),
maxTemp: Math.round((m.main.temp_max - 32) * 5 / 9)
}
var renderTempC = new mainTempView({ model: tempCelsius });
} else {
console.log('convert to farenheit');
// formula to convert f to c: Math.round(c.value * 9 / 5 + 32);
var tempF = {
weatherIcon: m.weather[0].icon,
unitIcon: arg.unitIcon,
mainTemp: Math.round((m.main.temp - 32) * 9 / 5 + 32),
minTemp: Math.round((m.main.temp_min - 32) * 9 / 5 + 32),
maxTemp: Math.round((m.main.temp_max - 32) * 9 / 5 + 32)
}
var renderMainTempTpls = new mainTempView({ model: tempF });
}
},
formatDate: function(ut) {
var unixTime = new Date(ut*1000);
var formatDateTime = (unixTime.getMonth() + 1) + '/' + unixTime.getDate() + '/' + unixTime.getFullYear() + ' - ' + unixTime.getHours() + ':' + unixTime.getMinutes();
return formatDateTime;
}
});
navigator.geolocation.getCurrentPosition(function(position){
var coords = {
lat: position.coords.latitude,
lon: position.coords.longitude
}
var ac = new appCurrentWeather({ geoloc: coords });
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
@import url(https://fonts.googleapis.com/css?family=Cantarell);
body {
font-family: 'Cantarell', sans-serif;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment