fix

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "~13.1.0",
     "@angular/platform-browser-dynamic": "~13.1.0",
     "@angular/router": "~13.1.0",
+    "bootstrap": "^5.3.2",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -39,4 +40,4 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.5.2"
   }
-}
+}

src/app/app-routing.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SearchPage } from './weather/weather/pages/search/search.page';
+import { WeatherCurrentComponent } from './weather/weather/pages/weather-current/weather-current.component';
+import { WeatherDetailsComponent } from './weather/weather/pages/weather-details/weather-details.component';
 
 
 const routes: Routes = [
@@ -11,7 +13,7 @@ const routes: Routes = [
   {
     path: 'search/:locationKey', 
     component: SearchPage,
-  },
+  },  
   { path: '', redirectTo: 'search', pathMatch: 'full' },
 ];
 

src/app/app.component.html

@@ -1,21 +1,17 @@
 <div id="app-wrapper">
-  <div id="loader"><mat-progress-bar *ngIf="displayLoading" mode="indeterminate"></mat-progress-bar></div>
-
+  <div id="loader">
+    <mat-progress-bar *ngIf="displayLoading" mode="indeterminate"></mat-progress-bar>
+  </div>
   <div id="sidenav-container">
     <h1>WeatherMe</h1>
-
     <div class="link-wrapper">
       <mat-icon svgIcon="SEARCH"></mat-icon>
       <p routerLink="/search">Search</p>
     </div>
-
-    <mat-slide-toggle id="slide-toggle" (click)="changeTemperatureUnit()">
-      <label>
-        Temperature in Fahrenheit
-      </label>
+    <mat-slide-toggle id="slide-toggle" (change)="changeTemperatureUnit()">
+      {{ !TypeCurrentWeather ?'Temperature in Fahrenheit': 'Temperature in Celsius' }}
     </mat-slide-toggle>
   </div>
-
   <div id="content-wrapper">
     <router-outlet></router-outlet>
   </div>

src/app/app.component.ts

@@ -2,16 +2,15 @@ import { Component, OnInit } from '@angular/core';
 import { LoaderService } from './core/services/loader.service';
 import { WeatherService } from './core/services/weather.service';
 
-
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
   displayLoading = false;
-    
-  constructor(private loaderService: LoaderService, private weatherService: WeatherService) {}
+  TypeCurrentWeather: boolean=true;
+  constructor(private loaderService: LoaderService, private weatherService: WeatherService ) { }
 
   ngOnInit() {
     this.loaderService.stateChange.subscribe((loaderState) => {
@@ -21,9 +20,11 @@ export class AppComponent implements OnInit {
     });
   }
 
+
   changeTemperatureUnit() {
     this.weatherService.isMetric = !this.weatherService.isMetric;
-
+    this.TypeCurrentWeather = this.weatherService.isMetric
     this.weatherService.temperatureUnitChanged.next(null);
   }
+
 }

src/app/app.module.ts

@@ -7,7 +7,6 @@ import { AppComponent } from './app.component';
 import { SharedModule } from './shared/shared.module';
 import { WeatherModule } from './weather/weather/weather.module';
 
-
 @NgModule({
   declarations: [
     AppComponent
@@ -19,6 +18,7 @@ import { WeatherModule } from './weather/weather/weather.module';
     AppRoutingModule,
     BrowserAnimationsModule,
     HttpClientModule,
+
   ],
   bootstrap: [AppComponent]
 })

src/app/core/services/favorites.service.ts

@@ -19,4 +19,7 @@ export class FavoritesService {
   getFavorites(): Location[] {
     return this.favorites;
   }
+  isInFavorites(locationKey: string): boolean {
+    return this.favorites.some((favorite) => favorite.Key === locationKey);
+  }
 }

src/app/core/services/location.service.ts

@@ -8,16 +8,15 @@ import { environment } from 'src/environments/environment';
   providedIn: 'root'
 })
 export class LocationService {
-  constructor(private httpClient: HttpClient) {}
+  constructor(private httpClient: HttpClient) { }
 
   getAutocompleteLocation(searchText: string): Observable<Location[]> {
     let params: HttpParams = new HttpParams();
     params = params.append('apikey', environment.apiKey);
     params = params.append('q', searchText);
-
-    return this.httpClient.get<Location[]>('http://dataservice.accuweather.com/locations/v1/cities/autocomplete', { params });
-  }
 
+    return this.httpClient.get<Location[]>('http://dataservice.accuweather.com/locations/v1/cities/autocomplete', { params })
+  }
   getLocationByKey(locationKey: string): Observable<Location> {
     let params: HttpParams = new HttpParams();
     params = params.append('apikey', environment.apiKey);

src/app/core/services/weather.service.ts

@@ -2,35 +2,31 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { CurrentWeather } from 'src/app/shared/models/currentWeather.model';
-import { Forecast } from 'src/app/shared/models/forecast.model';
+import { DailyForecast, Forecast } from 'src/app/shared/models/forecast.model';
 import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root'
 })
 export class WeatherService {
-  isMetric = true;
-
+  isMetric :boolean= true;
   temperatureUnitChanged = new Subject<null>();
-
-  constructor(private httpClient: HttpClient) {}
+  constructor(private httpClient: HttpClient) { }
 
   getForecast(locationKey: string): Observable<Forecast> {
     const isMetric = this.isMetric ? 'true' : 'false';
-
     let params: HttpParams = new HttpParams();
     params = params.append('apikey', environment.apiKey);
     params = params.append('metric', isMetric);
-
     return this.httpClient.get<Forecast>(`http://dataservice.accuweather.com/forecasts/v1/daily/5day/${locationKey}`, { params });
   }
 
   getCurrentWeather(locationKey: string): Observable<CurrentWeather> {
     let params: HttpParams = new HttpParams();
     params = params.append('apikey', environment.apiKey);
-
     return this.httpClient.get<CurrentWeather>(`http://dataservice.accuweather.com/currentconditions/v1/${locationKey}`, { params });
   }
+
 
 
 }

src/app/weather/weather/pages/search/search.page.html

@@ -0,0 +1,36 @@
+<form #searchForm="ngForm">
+    <div class="search-container">
+        <label for="cityInput">Search for a city:</label>
+        <input id="cityInput"
+               type="text"
+               [(ngModel)]="searchQuery"
+               name="searchQuery"
+               #searchQueryInput="ngModel"
+               required
+               pattern="[a-zA-Z,\s']+"
+               [matAutocomplete]="auto"
+               (input)="searchQueryInput.valid && searchLocations()"
+               class="mat-input">
+        <div *ngIf="searchQueryInput.invalid && (searchQueryInput.dirty || searchQueryInput.touched)" class="error-container">
+            <div *ngIf="searchQueryInput.errors && searchQueryInput.errors.required" class="error-message">
+                City name is required.
+            </div>
+            <div *ngIf="searchQueryInput.errors && searchQueryInput.errors.pattern" class="error-message">
+                Please enter English letters only.
+            </div>
+        </div>
+    </div>
+</form>
+
+<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onOptionSelected($event)">
+    <mat-option *ngFor="let location of autocompleteResults" [value]="location">
+        {{ location.LocalizedName }}, {{ location.Country.LocalizedName }}
+    </mat-option>
+</mat-autocomplete>
+
+<mat-slide-toggle  [checked]="isInFavorites" (change)="onSlideToggleChange()">
+    {{ !isInFavorites ? 'Add to Favorites' : 'Remove from Favorites' }}
+</mat-slide-toggle>
+
+<app-weather-current></app-weather-current>
+<app-weather-details></app-weather-details>

src/app/weather/weather/pages/search/search.page.scss

@@ -0,0 +1,21 @@
+
+.search-container {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 16px;
+}
+
+.mat-input {
+    max-width: 100%;
+    padding: 8px;
+    margin-top: 4px;
+}
+
+.error-container {
+    margin-top: 4px;
+}
+
+.error-message {
+    color: #d9534f; /* Set your desired color */
+    font-size: 12px;
+}

src/app/weather/weather/pages/search/search.page.ts

@@ -1,11 +1,69 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { LocationService } from 'src/app/core/services/location.service';
+import { Location } from 'src/app/shared/models/location.model';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { FavoritesService } from 'src/app/core/services/favorites.service';
 
 @Component({
   selector: 'app-search',
   templateUrl: './search.page.html',
   styleUrls: ['./search.page.scss']
 })
 export class SearchPage {
-
-}
 
+  constructor(private router: Router, private locationService: LocationService, private favoritesService: FavoritesService) { }
+  searchQuery: string
+  autocompleteResults: Location[];
+  locationKey: string;
+  isInFavorites: boolean = false;
+  selectedLocation: Location;
+
+  onOptionSelected(event: MatAutocompleteSelectedEvent): void {
+    this.selectedLocation = event.option.value;
+    this.locationKey = this.selectedLocation.Key;
+    this.isInFavorites = this.favoritesService.isInFavorites(this.locationKey);
+    this.router.navigate(['/search', this.locationKey]);
+  }
+  displayFn(location: Location): string {
+    return location ? `${location.LocalizedName}, ${location.Country.LocalizedName}` : '';
+  }
+  isInFavorites1(Key: string): boolean {
+    console.log("Checking isInFavorites1 for Key:", Key);
+    var inFavorites = this.favoritesService.isInFavorites(Key);
+    return inFavorites;
+  }
+  searchLocations(): void {
+    if (this.searchQuery) {
+      console.log("this.searchQuery", this.searchQuery);
+      this.locationService.getAutocompleteLocation(this.searchQuery)
+        .subscribe(
+          locations => {
+            this.autocompleteResults = locations;
+            console.log(this.autocompleteResults[0].Key);
+          },
+          error => {
+            console.error(error);
+          }
+        );
+    }
+  }
+  onSlideToggleChange(): void {
+    if (this.selectedLocation) {
+      if (this.isInFavorites) {
+        this.removeFromFavorites();
+      } else {
+        this.addToFavorites();
+      }
+    }
+  }
+  addToFavorites(): void {
+    this.favoritesService.addToFavorites(this.selectedLocation);
+    this.isInFavorites = true;
+  }
+  removeFromFavorites(): void {
+    this.favoritesService.removeFromFavorites(this.locationKey);
+    this.isInFavorites = false;
+  }
+
+}

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

@@ -0,0 +1,28 @@
+<br>
+<div class="weather-card">
+    <mat-card>
+        <mat-card-header>
+            <p>CurrentWeather</p>
+            <mat-card-title>
+                {{getWeather[0].LocalObservationDateTime | date:'MM/dd' }}
+            </mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <mat-card-title style="font-weight: bold">
+                Temperature:
+                {{ TypeCurrentWeather
+                ? getWeather[0].Temperature?.Metric?.Value
+                : getWeather[0].Temperature?.Imperial?.Value }}
+                {{ TypeCurrentWeather
+                ? getWeather[0].Temperature?.Metric?.Unit
+                : getWeather[0].Temperature?.Imperial?.Unit }}
+            </mat-card-title>
+            <p>{{ getWeather[0].WeatherText }}</p>
+            <p>Has Precipitation: {{ getWeather[0].HasPrecipitation ? 'yes' : 'no' }}</p>
+            <p *ngIf="getWeather.PrecipitationIntensity">
+                Precipitation Intensity: {{ getWeather[0].PrecipitationIntensity }}
+            </p>
+        </mat-card-content>
+    </mat-card>
+</div>
+<br>

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

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