Weather app with Vuejs

In this app I’m going to build a weather app that displays the weather of a location in VueJS. It’s very simple but it shows the power of Vuejs. I’m using api from fcc-weather.glicth.me.

The final app is below and you are free to use it. 🙂

HTML

<div id="app" class="box is-radiusless" style="">
<div class="media">
<div class="media-left">
<figure class="image is-64x64">
<img v-bind:src="icon" alt="icon"/>
</figure>
<p style="text-align: center">{{main}}</p>
</div>
<div class="media-content">
<div class="content">
<p>
<span class="title">{{city ? city : "City"}}</span><span class="subtitle"> {{country}}</span>

<div class="columns">
<div class="column">
<table class="table  is-narrow">
<tr>
<th> Min </th>
<th class=""> Now </th>
<th> Max </th>
</tr>
<tr>
<td v-for="temp in temps"> {{temp}} {{type}}</td>
</tr>
</table>
<p class="control" style="position: absolute; right: 5%">
<button class="button is-primary subtitle" @click="changeTempType">{{type}}</button>
</p>
</div>

<div class="column">
<p class="control is-marginless">
<p class="">{{desc}}</p>
</p>
</div>
</div>
</p>
</div>
</div>
</div>
</div>

VueJS code

var vm = new Vue({
el: "#app",
data: {
temps: {
min: 0.0,
now: 0.0,
max: 0.0
},
type: 'C',
long: 0.0,
lat: 0.0,
city: "",
errMsg: "",
country: "",
weather:  {},
icon: "",
desc: "",
main: "",
url: ""
},
methods: {
getLocation: function(){
if(navigator.geolocation){
var options = {timeout: 10000};
navigator.geolocation.getCurrentPosition(this.success, this.error, options);
} else {
// Could not get the location
}
},
success: function(pos){
this.lat = pos.coords.latitude;
this.long = pos.coords.longitude;
this.getWeather()
},
error: function(err){
this.errMsg = "Could not get your location";
this.city = this.errMsg;
},
getWeather: function(){
var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
if( this.readyState == 4 ){
var obj = JSON.parse(this.response);
console.log(obj)
vm.diviOut(obj);
}
}
xhr.open('GET', "https://fcc-weather-api.glitch.me/api/current?lat=" + this.lat + "&lon=" + this.long, true);
xhr.send();
},
logSomething: function(){
console.log("Hi")
},
diviOut: function(obj){
this.resetTemp(obj);
this.city = obj.name;
this.weather = obj;
this.country = obj.sys.country;
this.icon = obj.weather[0].icon;
this.desc = this.toCamelCase(obj.weather[0].description);
this.main = obj.weather[0].main;
},
toCamelCase: function(str){
str = str.split(" ");
var arr = []
for(var i = 0; i < str.length; i++){
str[i][0].toUpperCase();
arr.push(str[i]);
}
arr[0][0].toUpperCase();
return arr.toString().replace(',', ' ').toUpperCase();
},
resetTemp: function(obj){
this.temps = {
min: Math.floor(obj.main.temp_min),
now: Math.floor(obj.main.temp),
high: Math.floor(obj.main.temp_max)
}
},
changeTempType: function(){
if(this.type == 'C'){
this.type = 'F';
for(t in this.temps){
this.temps[t] = Math.floor(this.temps[t] * 9 /5 + 32);
}
} else {
this.type = 'C';
this.resetTemp(this.weather);
}
}
},
computed: {

},
beforeCreate: function(){

},
created: function(){

},
beforeMounte: function(){

},
mounted: function(){
console.log("App Ready");
this.getLocation();
}
})

You can also read this

How to apply single quotes around every value using VS code?

I often work with large documents and very often I...

'Nick',
'Ivan'

Routing in Node.js with Express.Js

In this post I will try to explain how routing...

app.get('/', function (req, res) {
  res.send('hello from me')
})