3 <div class="card" :class="item.class">
5 :href="`https://openweathermap.org/city/${id}`"
9 <div class="card-content">
11 <div v-if="icon" class="media-left" :class="item.background">
12 <figure class="image is-48x48">
14 :src="`https://openweathermap.org/img/wn/${icon}@2x.png`"
20 <div class="media-content">
21 <p v-if="error" class="error">Data could not be retrieved</p>
23 <p class="title is-4">{{ name }}</p>
24 <p class="subtitle is-6">
30 <div class="tag" :class="item.tagstyle" v-if="item.tag">
31 <strong class="tag-text">#{{ item.tag }}</strong>
54 temperature: function () {
55 if (!this.temp) return "";
58 if (this.item.units === "metric") {
60 } else if (this.item.units === "imperial") {
63 return `${this.temp} ${unit}`;
70 fetchWeather: async function () {
73 // Use location ID if specified, otherwise retrieve value from location (name).
74 if (this.item.locationId) {
75 locationQuery = `id=${this.item.locationId}`;
77 locationQuery = `q=${this.item.location}`;
80 const apiKey = this.item.apikey || this.item.apiKey;
81 const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${apiKey}&units=${this.item.units}`;
85 throw Error(response.statusText);
87 return response.json();
91 this.name = weather.name;
92 this.temp = parseInt(weather.main.temp).toFixed(1);
93 this.icon = weather.weather[0].icon;
94 this.conditions = weather.weather[0].description;
105 <style scoped lang="scss">
106 // Add a border around the weather image.
107 // Otherwise the image is not always distinguishable.
111 background-color: #e4e4e4;
127 // Change background color in dark mode.
132 background-color: #909090;