first commit

angular.json

@@ -25,7 +25,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
             "scripts": []
           },
@@ -94,5 +95,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "355851bd-d3f3-42f2-8b79-dfa59b01917e"
   }
 }

package-lock.json

@@ -16,6 +16,7 @@
         "@angular/platform-browser": "^15.2.0",
         "@angular/platform-browser-dynamic": "^15.2.0",
         "@angular/router": "^15.2.0",
+        "bootstrap": "^5.2.3",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.12.0"
@@ -2967,6 +2968,16 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@schematics/angular": {
       "version": "15.2.6",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-15.2.6.tgz",
@@ -3906,6 +3917,24 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -13483,6 +13512,12 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "peer": true
+    },
     "@schematics/angular": {
       "version": "15.2.6",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-15.2.6.tgz",
@@ -14271,6 +14306,12 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",

package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
+    "bootstrap": "^5.2.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"

src/app/anothercity/anothercity.component.html

+<h2>Weather in {{weather.name}}, {{weather.sys.country}}</h2>
+<div class="col-sm-12 text-center">
+<span class="temp">{{weather.main.temp|number:'1.0-0'}}&#176;F</span>
+<p class="text-uppercase font-italic font-weight-bold" >{{weather.weather[0].description}}</p>
+</div>
+<table class="table table-light table-striped table-bordered table-sm text-center" style="width: 70%; margin-left: 13%;">
+<tbody>
+    <tr>
+        <td>Humidity</td><td>{{weather.main.humidity}}%</td>
+    </tr>
+    <tr>
+        <td>Pressure</td><td>{{weather.main.pressure}} hPa</td>
+    </tr>
+    <tr>
+        <td>Sunrise</td><td>{{weather.sys.sunrise*1000 | date: 'H:mm'}}</td>
+    </tr>
+    <tr>
+        <td>Sunset</td><td>{{weather.sys.sunset*1000|date: 'H:mm'}}</td>
+    </tr>
+</tbody>
+</table>

src/app/anothercity/anothercity.component.spec.ts

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

src/app/anothercity/anothercity.component.ts

+import { Component, OnChanges, OnInit } from '@angular/core';
+import { WeatherService } from '../weather.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-anothercity',
+  templateUrl: './anothercity.component.html',
+  styleUrls: ['./anothercity.component.css']
+})
+export class AnothercityComponent implements OnInit {
+  lat;
+  lon;
+  weather;
+  constructor(private weatherService: WeatherService,private _route: ActivatedRoute){}
+  ngOnInit(): void {
+    let slug = this._route.snapshot.paramMap.get('slug');
+    this.weatherService.getWeatherDataByCityName(slug).subscribe(
+      data=>{
+        this.weather= data;
+        console.log(this.weather);
+      }
+    )
+  }
+
+}

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AnothercityComponent } from './anothercity/anothercity.component';
+import { TodayComponent } from './today/today.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+ 
+  {
+    path: ':slug',
+    component: AnothercityComponent ,
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.ts

 import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,5 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'weatherAPI';
+  constructor(private _route: ActivatedRoute){}
 }

src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
+import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { TodayComponent } from './today/today.component';
+import { AnothercityComponent } from './anothercity/anothercity.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    TodayComponent,
+    AnothercityComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/today/today.component.html

+<div class="row">
+    <div class="col-md-6 offset-md-3 ">
+        <div class="col-sm-12 text-center">
+            <div class="input-group mt-5">
+                <input type="text" class="form-control" #userInput placeholder="city name" (keyup.enter)="getCity(userInput.value)">
+                <div class="input-group-append">
+                    <button class="input-group-text btn btn-outline-primary" (click)="getCity(userInput.value)" >Search</button>
+                </div>
+            </div>
+            
+            <h2>Weather in {{weather.name}}, {{weather.sys.country}}</h2>
+        </div>
+    </div>
+    <div class="col-sm-12 text-center">
+        <span class="temp">{{weather.main.temp|number:'1.0-0'}}&#176;F</span>
+        <p class="text-uppercase font-italic font-weight-bold" >{{weather.weather[0].description}}</p>
+    </div>
+    <table class="table table-light table-striped table-bordered table-sm text-center" style="width: 70%; margin-left: 13%;">
+        <tbody>
+            <tr>
+                <td>Humidity</td><td>{{weather.main.humidity}}%</td>
+            </tr>
+            <tr>
+                <td>Pressure</td><td>{{weather.main.pressure}} hPa</td>
+            </tr>
+            <tr>
+                <td>Sunrise</td><td>{{weather.sys.sunrise*1000 | date: 'H:mm'}}</td>
+            </tr>
+            <tr>
+                <td>Sunset</td><td>{{weather.sys.sunset*1000|date: 'H:mm'}}</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
\ No newline at end of file

src/app/today/today.component.spec.ts

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

src/app/today/today.component.ts

+import { Component, OnInit } from '@angular/core';
+import { WeatherService } from '../weather.service';
+
+@Component({
+  selector: 'app-today',
+  templateUrl: './today.component.html',
+  styleUrls: ['./today.component.css']
+})
+export class TodayComponent implements OnInit {
+  lat;
+  lon;
+  weather;
+  constructor(private weatherService: WeatherService){}
+ ngOnInit(): void {
+     this.getLocation();
+ }
+ getLocation(){
+  if("geolocation" in navigator)
+  {
+    navigator.geolocation.watchPosition((success)=>{
+      this.lat = success.coords.latitude;
+      this.lon= success.coords.longitude;
+      this.weatherService.getWeatherDataByCoords(this.lat,this.lon).subscribe(
+        data=>{
+          this.weather= data;
+          console.log(this.weather);
+        }
+      )
+    }
+    )
+  }
+ }
+ getCity(city)
+ {
+  this.weatherService.getWeatherDataByCityName(city).subscribe(
+    data=>{
+      this.weather= data;
+      console.log(this.weather);
+    }
+  )
+ }
+}

src/app/weather.service.spec.ts

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

src/app/weather.service.ts

+import { HttpClient, HttpClientModule, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WeatherService {
+url= 'https://api.openweathermap.org/data/2.5/weather';
+apikey='e1cb0c66fe1454ee0d3abd6e2eff5776';
+  constructor( private http:HttpClient) { }
+  getWeatherDataByCoords(lat,lon)
+  {
+    let params= new HttpParams()
+    .set('lat',lat)
+    .set('lon',lon)
+    .set('units','imperial')
+    .set('appid',this.apikey);
+    return this.http.get(this.url, {params});
+  }
+  getWeatherDataByCityName(city: string)
+  {
+    let params= new HttpParams()
+    .set('q',city)
+    .set('units','imperial')
+    .set('appid',this.apikey);
+    return this.http.get(this.url, {params});
+  }
+}

tsconfig.json

@@ -5,7 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "strict": false,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,