"use strict"; // For some reasons I don't know, geolocation api didn't work sometimes // location can't be retrieved mostly // so I made it manually, you key in your zipcode/city name/latitude/longitude // then you are good to go! // ==================================== // code by: Ben Bright // date: August, 2017 // ===================================== window.onload = function () { // weatherApp component Vue.component("weather-app", { template: `

{{ city }}, {{ location }}

{{ day }}, {{ hours }}:{{ mins }} {{ hours < 12 ? "AM" : "PM" }}

cloud

^oC | ^oF

Wind: {{ temps === true ? wind : windmph }} {{ temps === true ? "kph" : "mph"}}

Precip: {{ precip }} mm

Humidity: {{ humidity }}%

`, // props to recieve data from parent vue instance object props: [ "city", "temp", "tempc", "tempf", "cloudtxt", "cloudicon", "humidity", "location", "wind", "precip", "hours", "day", "windmph", "mins" ], // component data properties data() { return { tempcelsius: this.tempc, tempfahrt: this.tempf, temps: this.temp }; } }); // Vue instance object new Vue({ el: "#app", data: { city: "Accra", location: "Ghana", hours: 0, mins: 0, day: "", temp: true, tempC: "", tempF: "", conditionText: "", conditionIcon: "https:", humidity: "", precip: "", wind: 0, windmph: 0, validResponse: "" }, created() { this.fetchData(); }, methods: { fetchData() { let self = this; // prompt for location zipCode / city name / latitude / ip address let location = prompt("Enter City Name / Zipcode / Latitude / Ip Address", "Accra"); if (location === null) { console.log("Cancelled request...try again!"); return; } else { axios.get("https://api.apixu.com/v1/current.json?key=dbe71ad46a95447ea1a151913170108&q=" + location) .then(function (response) { if (response.statusText !== "OK") { self.validResponse = false; } else { self.validResponse = true; // obtain city name, country, temperature, cloud icon, // cloud info, humidity, wind, precipitation from api self.city = response.data.location.name; self.tempC = Math.floor(response.data.current.temp_c); self.tempF = Math.floor(response.data.current.temp_f); self.conditionText = response.data.current.condition.text; self.conditionIcon += response.data.current.condition.icon; self.humidity = response.data.current.humidity; self.location = response.data.location.country; self.wind = Math.floor(response.data.current.wind_kph); self.windmph = Math.floor(response.data.current.wind_mph); self.precip = response.data.current.precip_mm; // get hours from api let date = new Date(response.data.location.localtime); self.hours = date.getHours(); // format time minutes if (date.getMinutes() < 10) { self.mins = "0" + date.getMinutes(); } else { self.mins = date.getMinutes(); } // format day of week let days = ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"]; for (let i = 0; i < days.length; i++) { if (date.getDay() === i) { self.day = days[i]; } } } }) .catch(function (error) { console.log(`Bad Request: ${error}`); }); } } } }); };

[VueJs] Weather App