Add route for closest and list

src/app/app-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TimezoneClosestComponent } from './timezone/components/timezone-closest/timezone-closest.component';
+import { TimezoneListComponent } from './timezone/components/timezone-list/timezone-list.component';
+
+const routes: Routes = [
+  { path: '', component: TimezoneListComponent },
+  { path: 'closest', component: TimezoneClosestComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1,4 +1 @@
-<div *ngIf="fiveOclock" class="single-container">
-  <h1 class="timezone">{{fiveOclock.name}}</h1>
-  <h2 class="time">{{fiveOclock.time?.toFormat('tt')}}</h2>
-</div>
+<router-outlet></router-outlet>

src/app/app.component.scss

@@ -1,52 +0,0 @@
-.container {
-    display:flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-}
-
-.single-container {
-    display:flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-}
-
-@media (max-width: 350px) { 
-    .timezone {
-        font-size: 1.0em;
-    }
-    
-    .time {
-        font-size: 0.5em
-    }
-}
-
-@media (min-width:350px) and (max-width: 500px) { 
-    .timezone {
-        font-size: 1.5em;
-    }
-    
-    .time {
-        font-size: 1.0em
-    }
-}
-
-.timezone {
-    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: whitesmoke;
-    margin-bottom: 0;
-}
-
-.time {
-    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: whitesmoke;
-    margin-top: 0;
-}

src/app/app.module.ts

@@ -3,13 +3,19 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 import { TimezoneService } from './timezone/services/timezone.service';
+import { AppRoutingModule } from './app-routing.module';
+import { TimezoneListComponent } from './timezone/components/timezone-list/timezone-list.component';
+import { TimezoneClosestComponent } from './timezone/components/timezone-closest/timezone-closest.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    TimezoneListComponent,
+    TimezoneClosestComponent
   ],
   imports: [
     BrowserModule,
+    AppRoutingModule,
   ],
   providers: [TimezoneService],
   bootstrap: [AppComponent]

src/app/timezone/components/timezone-closest/timezone-closest.component.html

@@ -0,0 +1,8 @@
+<div class="background">
+    <ng-container *ngIf="fiveOclock">
+        <div class="container">
+            <h1 class="timezone">{{fiveOclock.name}}</h1>
+            <h2 class="time">{{fiveOclock.time?.toFormat('tt')}}</h2>
+        </div>
+    </ng-container>
+</div>

src/app/timezone/components/timezone-closest/timezone-closest.component.scss

@@ -0,0 +1,46 @@
+.container {
+    display:flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+@media (max-width: 350px) { 
+    .timezone {
+        font-size: 1.0em;
+    }
+    
+    .time {
+        font-size: 0.5em
+    }
+}
+
+@media (min-width:350px) and (max-width: 500px) { 
+    .timezone {
+        font-size: 1.5em;
+    }
+    
+    .time {
+        font-size: 1.0em
+    }
+}
+
+.timezone {
+    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: whitesmoke;
+    margin-bottom: 0;
+}
+
+.time {
+    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: whitesmoke;
+    margin-top: 0;
+}
+
+.background {
+    height: 100%
+}

src/app/timezone/components/timezone-closest/timezone-closest.component.spec.ts

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

src/app/timezone/components/timezone-closest/timezone-closest.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { interval } from 'rxjs';
+import { GetClosestTimezoneFrom, Timezone } from '../../models/timezone.model';
+import { TimezoneService } from '../../services/timezone.service';
+
+@Component({
+  selector: 'app-timezone-closest',
+  templateUrl: './timezone-closest.component.html',
+  styleUrls: ['./timezone-closest.component.scss']
+})
+export class TimezoneClosestComponent implements OnInit {
+
+  fiveOclock: Timezone | undefined;
+
+  constructor(private timezoneService: TimezoneService){
+    var second = interval(1000)
+
+    second.subscribe(()=>{
+      var fiveOclocks: Timezone[] = [];
+      this.timezoneService.getCurrentTimeInTimezones(this.timezoneService.getTimezones()).forEach((timezoneObj)=>{
+        if(timezoneObj.time?.hour === 17){
+          fiveOclocks.push(timezoneObj);
+        }
+      })
+      this.fiveOclock = GetClosestTimezoneFrom(this.timezoneService.getCurrentTimezone(), fiveOclocks)
+    })
+
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/timezone/components/timezone-list/timezone-list.component.html

@@ -0,0 +1,8 @@
+<div class="background">
+    <ng-container *ngFor="let timezone of fiveOclocks">
+        <div class="container">
+            <h1 class="timezone">{{timezone.name}}</h1>
+            <h2 class="time">{{timezone.time?.toFormat('tt')}}</h2>
+        </div>
+    </ng-container>
+</div>

src/app/timezone/components/timezone-list/timezone-list.component.scss

@@ -0,0 +1,57 @@
+.container {
+    display:flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.single-container {
+    display:flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+@media (max-width: 350px) { 
+    .timezone {
+        font-size: 1.0em;
+    }
+    
+    .time {
+        font-size: 0.5em
+    }
+}
+
+@media (min-width:350px) and (max-width: 500px) { 
+    .timezone {
+        font-size: 1.5em;
+    }
+    
+    .time {
+        font-size: 1.0em
+    }
+}
+
+.timezone {
+    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: whitesmoke;
+    margin-bottom: 0;
+}
+
+.time {
+    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: whitesmoke;
+    margin-top: 0;
+}
+
+.background {
+    background: #2e2e2e;
+    height: 100%;
+}

src/app/timezone/components/timezone-list/timezone-list.component.spec.ts

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

src/app/timezone/components/timezone-list/timezone-list.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { interval, Observable } from 'rxjs';
+import { Timezone } from '../../models/timezone.model';
+import { TimezoneService } from '../../services/timezone.service';
+
+@Component({
+  selector: 'app-timezone-list',
+  templateUrl: './timezone-list.component.html',
+  styleUrls: ['./timezone-list.component.scss']
+})
+export class TimezoneListComponent implements OnInit {
+
+  fiveOclocks: Timezone[] = [];
+
+  constructor(private timezoneService: TimezoneService){
+    var second = interval(1000)
+
+    second.subscribe(()=>{
+      this.fiveOclocks = [];
+      this.timezoneService.getCurrentTimeInTimezones(this.timezoneService.getTimezones()).forEach((timezoneObj)=>{
+        if(timezoneObj.time?.hour === 17){
+          this.fiveOclocks.push(timezoneObj);
+        }
+      })
+    })
+
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/styles.scss

@@ -1,8 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
 body {
-    height: 100vh;
+    height: 100%;
     margin:0;
     padding:0;
     background: #2e2e2e;
-
+}
+html {
+    height: 100%;
 }