observable weatherdata

package-lock.json

@@ -9,10 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^14.0.0",
+        "@angular/cdk": "^14.2.2",
         "@angular/common": "^14.0.0",
         "@angular/compiler": "^14.0.0",
         "@angular/core": "^14.0.0",
         "@angular/forms": "^14.0.0",
+        "@angular/material": "^14.2.2",
         "@angular/platform-browser": "^14.0.0",
         "@angular/platform-browser-dynamic": "^14.0.0",
         "@angular/router": "^14.0.0",
@@ -25,6 +27,7 @@
         "@angular/cli": "~14.2.1",
         "@angular/compiler-cli": "^14.0.0",
         "@types/jasmine": "~4.0.0",
+        "@types/webpack-env": "^1.18.0",
         "jasmine-core": "~4.3.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.1.0",
@@ -343,6 +346,28 @@
         "@angular/core": "14.2.2"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "14.2.2",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-14.2.2.tgz",
+      "integrity": "sha512-PXEnhX+QDOsmHVVnqTuoGaK7Wn9hFd5kWAmHTTU7lZr3XVu/AtDcEU+LB19wOFU0fY+kSYHMgN+BYo1TiR8vbw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^14.0.0 || ^15.0.0",
+        "@angular/core": "^14.0.0 || ^15.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/cdk/node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "optional": true
+    },
     "node_modules/@angular/cli": {
       "version": "14.2.3",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.2.3.tgz",
@@ -475,6 +500,23 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "14.2.2",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.2.tgz",
+      "integrity": "sha512-jVCaESSTTkLjRvMzSQj294s0Lz1YMVFkl0svrMtWgkUMXHEfx2Vjw6FXdrVrBXlxEIrpfhkTEXVN2DC1kkAkQw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^14.0.0 || ^15.0.0",
+        "@angular/cdk": "14.2.2",
+        "@angular/common": "^14.0.0 || ^15.0.0",
+        "@angular/core": "^14.0.0 || ^15.0.0",
+        "@angular/forms": "^14.0.0 || ^15.0.0",
+        "@angular/platform-browser": "^14.0.0 || ^15.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "14.2.2",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.2.tgz",
@@ -3033,6 +3075,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/webpack-env": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.0.tgz",
+      "integrity": "sha512-56/MAlX5WMsPVbOg7tAxnYvNYMMWr/QJiIp6BxVSW3JJXUVzzOn64qW8TzQyMSqSUFM2+PVI4aUHcHOzIz/1tg==",
+      "dev": true
+    },
     "node_modules/@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -12101,6 +12149,23 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/cdk": {
+      "version": "14.2.2",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-14.2.2.tgz",
+      "integrity": "sha512-PXEnhX+QDOsmHVVnqTuoGaK7Wn9hFd5kWAmHTTU7lZr3XVu/AtDcEU+LB19wOFU0fY+kSYHMgN+BYo1TiR8vbw==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "14.2.3",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.2.3.tgz",
@@ -12179,6 +12244,14 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/material": {
+      "version": "14.2.2",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.2.tgz",
+      "integrity": "sha512-jVCaESSTTkLjRvMzSQj294s0Lz1YMVFkl0svrMtWgkUMXHEfx2Vjw6FXdrVrBXlxEIrpfhkTEXVN2DC1kkAkQw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "14.2.2",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.2.tgz",
@@ -13972,6 +14045,12 @@
         "@types/node": "*"
       }
     },
+    "@types/webpack-env": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.0.tgz",
+      "integrity": "sha512-56/MAlX5WMsPVbOg7tAxnYvNYMMWr/QJiIp6BxVSW3JJXUVzzOn64qW8TzQyMSqSUFM2+PVI4aUHcHOzIz/1tg==",
+      "dev": true
+    },
     "@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",

package.json

@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^14.0.0",
+    "@angular/cdk": "^14.2.2",
     "@angular/common": "^14.0.0",
     "@angular/compiler": "^14.0.0",
     "@angular/core": "^14.0.0",
     "@angular/forms": "^14.0.0",
+    "@angular/material": "^14.2.2",
     "@angular/platform-browser": "^14.0.0",
     "@angular/platform-browser-dynamic": "^14.0.0",
     "@angular/router": "^14.0.0",
@@ -27,6 +29,7 @@
     "@angular/cli": "~14.2.1",
     "@angular/compiler-cli": "^14.0.0",
     "@types/jasmine": "~4.0.0",
+    "@types/webpack-env": "^1.18.0",
     "jasmine-core": "~4.3.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",

src/app/app.module.ts

@@ -9,7 +9,7 @@ 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 { HttpClientModule } from '@angular/common/http';
 
 
 @NgModule({
@@ -24,7 +24,8 @@ import { MatGridListModule } from '@angular/material/grid-list';
     AppRoutingModule,
     BrowserAnimationsModule,
     MatIconModule,
-    MatGridListModule
+    MatGridListModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

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

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CurrentWeatherStateComponent } from './current-weather-state.component';
+
+describe('CurrentWeatherStateComponent', () => {
+  let component: CurrentWeatherStateComponent;
+  let fixture: ComponentFixture<CurrentWeatherStateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CurrentWeatherStateComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CurrentWeatherStateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-current-weather-state',
+  templateUrl: './current-weather-state.component.html',
+  styleUrls: ['./current-weather-state.component.scss']
+})
+export class CurrentWeatherStateComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

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

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

@@ -0,0 +1,24 @@
+.main_container{
+    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: 30px;
+    justify-content: center;
+    align-items: center;
+}
+
+.font{
+    font-size: 40px;
+    color: white;
+}
+
+.icon{
+    transform:scale(2);
+    margin-top: 10px;
+    margin-bottom: 50px;
+    color: white;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CurrentWeatherComponent } from './current-weather.component';
+
+describe('CurrentWeatherComponent', () => {
+  let component: CurrentWeatherComponent;
+  let fixture: ComponentFixture<CurrentWeatherComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CurrentWeatherComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CurrentWeatherComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { WeatherData } from '../models/weather.model';
+import { WeatherApiService } from '../weather-api.service';
+
+@Component({
+  selector: 'app-current-weather',
+  templateUrl: './current-weather.component.html',
+  styleUrls: ['./current-weather.component.scss']
+})
+export class CurrentWeatherComponent implements OnInit {
+
+  constructor(public service: WeatherApiService) { 
+  }
+  weatherData?: WeatherData
+
+  ngOnInit(): void {
+    this.service.getData()
+    .subscribe({next: (response) => {
+      this.weatherData = response;
+    }});
+  }
+
+}

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

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

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForcastWeatherComponent } from './forcast-weather.component';
+
+describe('ForcastWeatherComponent', () => {
+  let component: ForcastWeatherComponent;
+  let fixture: ComponentFixture<ForcastWeatherComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ForcastWeatherComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ForcastWeatherComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-forcast-weather',
+  templateUrl: './forcast-weather.component.html',
+  styleUrls: ['./forcast-weather.component.scss']
+})
+export class ForcastWeatherComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/models/weather.model.ts

@@ -0,0 +1,56 @@
+export interface WeatherData {
+    calendarDayTemperatureMax: number[]
+    calendarDayTemperatureMin: number[]
+    dayOfWeek: string[]
+    expirationTimeUtc: number[]
+    moonPhase: string[]
+    moonPhaseCode: string[]
+    moonPhaseDay: number[]
+    moonriseTimeLocal: string[]
+    moonriseTimeUtc: number[]
+    moonsetTimeLocal: string[]
+    moonsetTimeUtc: number[]
+    narrative: string[]
+    qpf: number[]
+    qpfSnow: number[]
+    sunriseTimeLocal: string[]
+    sunriseTimeUtc: number[]
+    sunsetTimeLocal: string[]
+    sunsetTimeUtc: number[]
+    temperatureMax: number | undefined[]
+    temperatureMin: number[]
+    validTimeLocal: string[]
+    validTimeUtc: number[]
+    daypart: Daypart[]
+  }
+  
+  export interface Daypart {
+    cloudCover: number | undefined[]
+    dayOrNight: string | undefined[]
+    daypartName: string | undefined[]
+    iconCode: number | undefined[]
+    iconCodeExtend: number | undefined[]
+    narrative: string | undefined[]
+    precipChance: number | undefined[]
+    precipType: string | undefined[]
+    qpf: number | undefined[]
+    qpfSnow: number | undefined[]
+    qualifierCode: any[]
+    qualifierPhrase: any[]
+    relativeHumidity: number | undefined[]
+    snowRange: string | undefined[]
+    temperature: number | undefined[]
+    temperatureHeatIndex: number | undefined[]
+    temperatureWindChill: number | undefined[]
+    thunderCategory: any[]
+    thunderIndex: number | undefined[]
+    uvDescription: string | undefined[]
+    uvIndex: number | undefined[]
+    windDirection: number | undefined[]
+    windDirectionCardinal: string | undefined[]
+    windPhrase: string | undefined[]
+    windSpeed: number | undefined[]
+    wxPhraseLong: string | undefined[]
+    wxPhraseShort: string | undefined[]
+  }
+  

src/app/weather-api.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { WeatherApiService } from './weather-api.service';
+
+describe('WeatherApiService', () => {
+  let service: WeatherApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(WeatherApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/weather-api.service.ts

@@ -0,0 +1,22 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { WeatherData } from './models/weather.model';
+
+@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";
+temp:any
+
+
+constructor(private http:HttpClient) {}
+ 
+ 
+getData():Observable<WeatherData>{
+  return this.http.get<WeatherData>(this.url)
+}
+ 
+
+} 

src/index.html

@@ -6,8 +6,11 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

src/styles.scss

@@ -1 +1,3 @@
-/* You can add global styles to this file, and also import other style files */
+body{
+background-color: rgb(23 23 23);
+  }

tsconfig.app.json

@@ -3,7 +3,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": ["node"]
   },
   "files": [
     "src/main.ts",