3 <div class="card" :class="item.class">
4 <a :href="item.url" :target="item.target" rel="noreferrer">
5 <div class="card-content">
7 <div v-if="image" class="media-left" :class="item.background">
8 <figure class="image is-48x48">
10 :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
16 <div v-if="item.icon" class="media-left">
17 <figure class="image is-48x48">
18 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
21 <div class="media-content">
22 <p class="title is-4">{{ item.location }}</p>
23 <p class="subtitle is-6">
24 <template v-if="item.subtitle">
27 <template v-else-if="api">
29 <span v-if="this.item.units == 'metric'">°C</span>
30 <span v-else-if="this.item.units == 'imperial'">°F</span>
36 <div class="tag" :class="item.tagstyle" v-if="item.tag">
37 <strong class="tag-text">#{{ item.tag }}</strong>
70 return parseInt(this.api.main.temp).toFixed(1);
76 return this.api.weather[0].icon;
80 conditions: function () {
82 return this.api.weather[0].description;
91 fetchStatus: async function () {
92 const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
93 this.api = await fetch(url)
94 .then((response) => response.json())
95 .catch((e) => console.log(e));
101 <style scoped lang="scss">
105 background-color: #e4e4e4;
117 // Add a circular border around the weather image when in dark mode.
118 // Otherwise the image is not distinguishable.
123 background-color: #909090;