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

Bulker – Face recognition script

Imagine that we have thousands of images inside of a...

def get_ref_face(self, ref_image_path):
        try:

How to write middleware for Express.Js apps

Middleware functions are functions that have access to the request...

var logger = function (req, res, next) {
  console.log('logged')
  next()
}