xs

.gitignore

@@ -40,3 +40,4 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+src/environments/environment.ts

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

@@ -1,14 +1,14 @@
 <div class="main_container">
     <mat-card class="card">
         <mat-card-title-group>
-            <mat-card-title>Min - Max</mat-card-title>
+            <mat-card-title>Aktuell</mat-card-title>
             <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>
+            {{weatherData?.temperature?.toString()}} C°
+            
         </mat-card-content>
     </mat-card>
 </div>

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { WeatherData } from '../models/weather.model';
+import { Daypart, WeatherData } from '../models/weather.model';
 import { WeatherApiService } from '../weather-api.service';
 
 @Component({
@@ -12,15 +12,16 @@ export class CurrentWeatherComponent implements OnInit {
 
   constructor(public service: WeatherApiService) {
   }
-  weatherData?: WeatherData
+  weatherData?: Daypart
 
   ngOnInit(): void {
-    this.service.getData()
+    this.service.getDayPart()
       .subscribe({
         next: (response) => {
           this.weatherData = response;
         }
       });
+      alert(this.weatherData?.temperature?.toLocaleString)
   }
 
 }

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

@@ -49,6 +49,9 @@
 
 
     border-right: 2px solid white;
-    border-collapse: separate;
-    border-spacing: 15px 50px 50px 50px;
+    padding-right: 15px;
+    
+}
+mat-card-title{
+    margin-bottom: 30px;
 }

src/app/weather-api.service.ts

@@ -1,13 +1,14 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { WeatherData } from './models/weather.model';
+import { Daypart, WeatherData } from './models/weather.model';
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root'
 })
 export class WeatherApiService {
-url:string = "https://api.weather.com/v3/wx/forecast/daily/5day?geocode=49.9667,7.9046&format=json&units=m&language=de-DE&apiKey=bd2007c3853d41bba007c3853d21bbb1";
+url:string = environment.weatherApiBaseUrl;
 temp:any
 
 
@@ -17,6 +18,8 @@ constructor(private http:HttpClient) {}
 getData():Observable<WeatherData>{
   return this.http.get<WeatherData>(this.url)
 }
- 
+getDayPart(): Observable<Daypart>{
+  return this.http.get<Daypart>(this.url)
+}
 
 }