vorhersage

src/app/app.component.html

@@ -1,3 +1,4 @@
 <div class="base">
     <app-current-weather></app-current-weather>
+    <app-forcast-weather></app-forcast-weather>
 </div>

src/app/app.module.ts

@@ -9,6 +9,9 @@ import { ForcastWeatherComponent } from './forcast-weather/forcast-weather.compo
 import { MatIconModule } from '@angular/material/icon';
 import { CurrentWeatherStateComponent } from './current-weather-state/current-weather-state.component';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatCardModule } from '@angular/material/card';
+
+
 import { HttpClientModule } from '@angular/common/http';
 
 
@@ -25,7 +28,8 @@ import { HttpClientModule } from '@angular/common/http';
     BrowserAnimationsModule,
     MatIconModule,
     MatGridListModule,
-    HttpClientModule
+    HttpClientModule,
+    MatCardModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/current-weather-state/current-weather-state.component.html

@@ -1 +0,0 @@
-<p>current-weather-state works!</p>

src/app/current-weather/current-weather.component.html

@@ -1,6 +1,14 @@
 <div class="main_container">
-    <h3 class="font">Aktuell</h3>
+    <mat-card class="card">
-    <p></p>
+        <mat-card-title-group>
-    <mat-icon class="icon" aria-hidden="false" font-size="30px" aria-label="Example home icon" fontIcon="sunny"></mat-icon>
+            <mat-card-title>Min - Max</mat-card-title>
-    <label class="font">{{weatherData?.calendarDayTemperatureMax?.at(0)}} C°</label>
+            <mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="sunny">
+            </mat-icon>
+
+        </mat-card-title-group>
+        <mat-card-content>
+            Max {{weatherData?.calendarDayTemperatureMax?.at(0)}} C°
+            <p>Min {{weatherData?.calendarDayTemperatureMin?.at(0)}} C°</p>
+        </mat-card-content>
+    </mat-card>
 </div>

src/app/current-weather/current-weather.component.scss

@@ -6,7 +6,7 @@
     height: max-content;
     display: flex;
     flex-direction: column;
-    padding: 30px;
+    padding: 10px;
     justify-content: center;
     align-items: center;
 }
@@ -22,3 +22,17 @@
     margin-bottom: 50px;
     color: white;
 }
+
+.card {
+    color: white;
+    font-size: 32px;
+
+    mat-card-title {}
+}
+
+mat-card-title-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+}

src/app/current-weather/current-weather.component.ts

@@ -7,6 +7,7 @@ import { WeatherApiService } from '../weather-api.service';
   templateUrl: './current-weather.component.html',
   styleUrls: ['./current-weather.component.scss']
 })
+
 export class CurrentWeatherComponent implements OnInit {
 
   constructor(public service: WeatherApiService) {
@@ -15,9 +16,11 @@ export class CurrentWeatherComponent implements OnInit {
 
   ngOnInit(): void {
     this.service.getData()
-    .subscribe({next: (response) => {
+      .subscribe({
+        next: (response) => {
           this.weatherData = response;
-    }});
+        }
+      });
   }
 
 }

src/app/forcast-weather/forcast-weather.component.html

@@ -1 +1,48 @@
-<p>forcast-weather works!</p>
+<div class="main_container">
+    <mat-card class="card">
+        <mat-card-title-group>
+            <mat-card-title>Vorhersage</mat-card-title>
+        </mat-card-title-group>
+        <mat-card-content>
+            <div class="flex">
+                <div class="container">
+                    {{weatherData?.dayOfWeek?.at(0)?.slice(0,2)}}
+                    <p>{{weatherData?.calendarDayTemperatureMax?.at(0)}}</p>
+                    <mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="sunny">
+                    </mat-icon>
+                </div>
+                <div class="container">
+                    {{weatherData?.dayOfWeek?.at(1)?.slice(0,2)}}
+                    <p>{{weatherData?.calendarDayTemperatureMax?.at(1)}}</p>
+                    <mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="ac_unit">
+                    </mat-icon>
+                </div>
+                <div class="container">
+                    {{weatherData?.dayOfWeek?.at(2)?.slice(0,2)}}
+                    <p>{{weatherData?.calendarDayTemperatureMax?.at(2)}}</p>
+                    <mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="thunderstorm">
+                    </mat-icon>
+                </div>
+                <div class="container">
+                    {{weatherData?.dayOfWeek?.at(3)?.slice(0,2)}}
+                    <p>{{weatherData?.calendarDayTemperatureMax?.at(3)}}</p>
+                    <mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="cloudy_snowing">
+                    </mat-icon>
+                </div>
+                <div class="container">
+                    {{weatherData?.dayOfWeek?.at(4)?.slice(0,2)}}
+                    <p>{{weatherData?.calendarDayTemperatureMax?.at(4)}}</p>
+                    <mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="air">
+                    </mat-icon>
+                </div>
+                <div class="container">
+                    {{weatherData?.dayOfWeek?.at(5)?.slice(0,2)}}
+                    <p>{{weatherData?.calendarDayTemperatureMax?.at(5)}}</p>
+                    <mat-icon class="icon" aria-hidden="false" aria-label="Example home icon" fontIcon="cloudy">
+                    </mat-icon>
+                </div>
+            </div>
+
+        </mat-card-content>
+    </mat-card>
+</div>

src/app/forcast-weather/forcast-weather.component.scss

@@ -0,0 +1,54 @@
+.main_container {
+    margin-top: 20px;
+    background-color: rgb(0, 0, 0);
+    border: 1px solid rgb(0, 0, 0);
+    border-radius: 10px;
+    width: max-content;
+    height: max-content;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    justify-content: center;
+    align-items: center;
+}
+
+.card {
+    font-size: 40px;
+    color: white;
+
+    .content_container_up {
+        color: white;
+        font-size: 30px;
+        display: flex;
+        flex-direction: row;
+        margin-top: 20px;
+    }
+
+    .content_container_mid {
+        color: white;
+        font-size: 30px;
+        display: flex;
+        flex-direction: row;
+        text-align: center;
+    }
+}
+
+.icon {
+    margin-left: 10px;
+}
+
+.flex {
+    display: flex;
+    flex-direction: row;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    margin-right: 10px;
+
+
+    border-right: 2px solid white;
+    border-collapse: separate;
+    border-spacing: 15px 50px 50px 50px;
+}

src/app/forcast-weather/forcast-weather.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { WeatherData } from '../models/weather.model';
+import { WeatherApiService } from '../weather-api.service';
 
 @Component({
   selector: 'app-forcast-weather',
@@ -7,9 +9,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ForcastWeatherComponent implements OnInit {
 
-  constructor() { }
+  constructor(public service: WeatherApiService) { }
+
+  weatherData?: WeatherData
 
   ngOnInit(): void {
+    this.service.getData()
+      .subscribe({
+        next: (response) => {
+          this.weatherData = response;
+        }
+      })
   }
 
 }