M css/style.css => css/style.css +43 -18
@@ 8,8 8,20 @@ body {
color: #212121;
}
+.temp {
+ color: #cf0000;
+}
+
+.rain {
+ color: #0077d6;
+}
+
+.wind {
+ color: #4d4d4d;
+}
+
header {
- height: 280px;
+ height: 150px;
text-align: center;
background: #fff;
}
@@ 22,37 34,37 @@ header h1 {
padding-top: 20px;
margin: 0 auto;
max-width: 900px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ /* display: flex;
+ justify-content: center;
+ align-items: center;*/
}
.wrapper .nowcast {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -ms-flex-line-pack: center;
+ align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
padding: 20px;
- max-width: 750px;
+ max-width: 100%;
border: 1px solid #c3c3c3;
border-radius: 10px;
background: #fff;
+ margin-bottom: 20px;
}
.wrapper .nowcast .from-to {
position: absolute;
padding: 10px;
top: 0;
- left: 0;
+ /* left: 0; */
}
.wrapper .nowcast .from-to,
@@ 84,15 96,28 @@ header h1 {
margin-right: 20px;
}
-.wrapper .nowcast .type .temp {
- color: #cf0000;
+.wrapper .forecast-table {
+ padding: 10px;
+ border: 1px solid #c3c3c3;
+ border-radius: 10px;
+ background: #fff;
+ width: 100%;
+ margin-bottom: 20px;
}
-.wrapper .nowcast .type .rain {
- color: #0077d6;
+.wrapper .forecast-table .time {
+ width: 150px;
}
-.wrapper .nowcast .type .wind {
- color: #4d4d4d;
+.wrapper .forecast-table tbody th, .wrapper .forecast-table tbody td {
+ border-bottom: 1px solid #ddd;
+}
+
+.wrapper .forecast-table tbody td {
+ text-align: center;
+}
+
+.wrapper .forecast-table tbody .weathertype {
+ max-width: 50px;
}
/*# sourceMappingURL=style.css.map */=
\ No newline at end of file
M css/style.scss => css/style.scss +43 -14
@@ 17,8 17,20 @@ body {
}
}
+.temp {
+ color: #cf0000;
+ }
+
+ .rain {
+ color: #0077d6;
+ }
+
+ .wind {
+ color: #4d4d4d;
+ }
+
header {
- height: 280px;
+ height: 150px;
text-align: center;
background: #fff;
@@ 32,26 44,30 @@ header {
margin: 0 auto;
max-width: 900px;
- display: flex;
+ /* display: flex;
justify-content: center;
- align-items: center;
+ align-items: center;*/
.nowcast {
display: flex;
+ justify-content: center;
+ align-content: center;
align-items: center;
position: relative;
padding: 20px;
- max-width: 750px;
+ max-width: 100%;
border: 1px solid #c3c3c3;
border-radius: 10px;
background: #fff;
+ margin-bottom: 20px;
+
.from-to {
position: absolute;
padding: 10px;
top: 0;
- left: 0;
+ /* left: 0; */
&,
i {
font-size: 16px;
@@ 76,18 92,31 @@ header {
&:not(:last-child) {
margin-right: 20px;
}
+ }
+ }
- .temp {
- color: #cf0000;
- }
+ .forecast-table {
+ padding: 10px;
+ border: 1px solid #c3c3c3;
+ border-radius: 10px;
+ background: #fff;
+ width: 100%;
+ margin-bottom: 20px;
- .rain {
- color: #0077d6;
- }
+ .time {
+ width: 150px;
+ }
- .wind {
- color: #4d4d4d;
- }
+ tbody {
+ th, td {
+ border-bottom: 1px solid #ddd;
+ }
+ td {
+ text-align: center;
+ }
+ .weathertype {
+ max-width: 50px;
+ }
}
}
}
M index.html => index.html +33 -15
@@ 24,29 24,47 @@
<img :src="nowcast.weatherImg" alt="" />
<div class="type">
<i aria-hidden="true" class="fas fa-thermometer-three-quarters"></i>
- <span class="temp"
- >{{ nowcast.temperature.toLocaleString('no-NB') }}<span class="unit"
- >°C</span
- ></span
- >
+ <span class="temp">{{ nowcast.temperature.toLocaleString('no-NB') }}<span class="unit">°C</span></span>
</div>
<div class="type">
<i aria-hidden="true" class="fas fa-umbrella"></i>
- <span class="rain"
- >{{ nowcast.rain.toLocaleString('no-NB') }}<span class="unit"
- >mm</span
- ></span
- >
+ <span class="rain">{{ nowcast.rain.toLocaleString('no-NB') }}<span class="unit">mm</span></span>
</div>
<div class="type">
<i class="fas fa-wind"></i>
- <span class="wind"
- >{{ nowcast.wind.toLocaleString('no-NB') }}<span class="unit"
- >m/s</span
- ></span
- >
+ <span class="wind">{{ nowcast.wind.toLocaleString('no-NB') }}<span class="unit">m/s</span></span>
</div>
</div>
+ <h1>I dag 01. januar</h1>
+ <table class="forecast-table">
+ <thead>
+ <tr>
+ <th class="time"><i class="far fa-clock"></i> Klokkeslett</th>
+ <th>Vær</th>
+ <th><i aria-hidden="true" class="fas fa-thermometer-three-quarters"></i> Temp.</th>
+ <th><i aria-hidden="true" class="fas fa-umbrella"></i> Nedbør</th>
+ <th><i aria-hidden="true" class="fas fa-wind"></i> Vind</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="forecast in todayForecast">
+ <td class="time">
+ {{ forecast.from }}
+ </td>
+ <td><img :src="forecast.weatherImg" alt="" class="weathertype"></td>
+ <td class="temp">
+ {{ forecast.temperature.toLocaleString('no-NB') }} °C
+ </td>
+ <td class="rain" v-if="forecast.rain > 0">
+ {{ forecast.rain.toLocaleString('no-NB') }} mm
+ </td>
+ <td class="rain" v-else></td>
+ <td class="wind">
+ {{ forecast.wind.toLocaleString('no-NB') }} m/s
+ </td>
+ </tr>
+ </tbody>
+ </table>
</div>
<script src="src/index.js"></script>
</body>
M src/index.js => src/index.js +1 -3
@@ 36,8 36,6 @@ var app = new Vue({
var retrivedData = localStorage.getItem("localData");
this.setWeather(JSON.parse(retrivedData).properties);
-
- console.log(this.todayForecast[0].weatherType);
},
setWeather: function (weatherData) {
this.setNowCast(weatherData);
@@ 81,7 79,7 @@ var app = new Vue({
} else {
forecastTo = forecastFrom + 1;
}
- console.log(forecastFrom);
+
this.todayForecast.push({
id: index,
from: forecastFrom,