Hook up the API, and add all the necessary elements

src/app/app.component.ts

@@ -1,10 +1,11 @@
+import { HttpClientModule } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'cnjg-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, HttpClientModule],
   template: '<router-outlet />',
 })
 export class AppComponent {}

src/app/app.config.ts

@@ -3,7 +3,12 @@ import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideAnimationsAsync()],
+  providers: [
+    provideRouter(routes),
+    provideAnimationsAsync(),
+    provideHttpClient(),
+  ],
 };

src/app/app.routes.ts

@@ -1,7 +1,8 @@
 import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
+import { FavouritesComponent } from './favourites/favourites.component';
 
 export const routes: Routes = [
   { path: '', component: HomeComponent },
-  // Add more routes here if needed
+  { path: 'favourites', component: FavouritesComponent },
 ];

src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.constant.ts

@@ -0,0 +1 @@
+export const chuckNorrisApi = 'https://api.chucknorris.io/jokes/random';

src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.model.ts

@@ -0,0 +1,6 @@
+export interface ChuckNorrisJoke {
+  icon_url: string;
+  id: string;
+  url: string;
+  value: string;
+}

src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.service.spec.ts

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

src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.service.ts

@@ -0,0 +1,19 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { ChuckNorrisJoke } from './chuck-norris-joke-generator.model';
+import { Observable, forkJoin, map, switchMap, tap } from 'rxjs';
+import { chuckNorrisApi } from './chuck-norris-joke-generator.constant';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ChuckNorrisJokeGeneratorService {
+  constructor(private httpClient: HttpClient) {}
+
+  public getJoke(): Observable<string> {
+    return this.httpClient.get<ChuckNorrisJoke>(chuckNorrisApi).pipe(
+      tap((joke) => console.log(joke)),
+      map((joke) => joke.value)
+    );
+  }
+}

src/app/favourites/favourites.component.html

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

src/app/favourites/favourites.component.spec.ts

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

src/app/favourites/favourites.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'cnjg-favourites',
+  standalone: true,
+  imports: [],
+  templateUrl: './favourites.component.html',
+  styleUrl: './favourites.component.scss',
+  // changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FavouritesComponent {}

src/app/home/home.component.scss

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 25px;
+}

src/app/home/home.component.ts

@@ -7,6 +7,6 @@ import { JokesComponent } from '../jokes/jokes.component';
   imports: [JokesComponent],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  // changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomeComponent {}

src/app/joke-store/joke-store.service.spec.ts

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

src/app/joke-store/joke-store.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { ChuckNorrisJokeGeneratorService } from '../chuck-norris-joke-generator/chuck-norris-joke-generator.service';
+import { Observable, forkJoin } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class JokeStoreService {
+  constructor(
+    private chuckNorrisJokeGeneratorService: ChuckNorrisJokeGeneratorService
+  ) {}
+
+  /**
+   * @returns a list of 10 jokes
+   */
+  public getJokes(): Observable<string[]> {
+    // TODO: Look into a more efficient way to do 10 concurrent requests (showing them as they return in the view):
+    return forkJoin(
+      Array(10).fill(this.chuckNorrisJokeGeneratorService.getJoke())
+    );
+  }
+}

src/app/jokes/jokes.component.scss

@@ -0,0 +1,25 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  ul {
+    width: 80%;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    li {
+      list-style: none;
+      margin-bottom: 20px;
+    }
+    li:nth-child(even) {
+      color: orange;
+    }
+
+    li:nth-child(odd) {
+      color: lightblue;
+    }
+  }
+}

src/app/jokes/jokes.component.ts

@@ -1,47 +1,22 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component } from '@angular/core';
+import { JokeStoreService } from '../joke-store/joke-store.service';
 
 @Component({
   selector: 'cnjg-jokes',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './jokes.component.html',
   styleUrl: './jokes.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  // changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class JokesComponent {
-  public jokes = [
-    'Joke 1',
-    'Joke 2',
-    'Joke 3',
-    'Joke 4',
-    'Joke 5',
-    'Joke 6',
-    'Joke 7',
-    'Joke 8',
-    'Joke 9',
-    'Joke 10',
-    'Joke 11',
-    'Joke 12',
-    'Joke 13',
-    'Joke 14',
-    'Joke 15',
-    'Joke 16',
-    'Joke 17',
-    'Joke 18',
-    'Joke 19',
-    'Joke 20',
-    'Joke 21',
-    'Joke 22',
-    'Joke 23',
-    'Joke 24',
-    'Joke 25',
-    'Joke 26',
-    'Joke 27',
-    'Joke 28',
-    'Joke 29',
-    'Joke 30',
-    'Joke 31',
-    'Joke 32',
-  ];
+  public jokes: string[] = [];
+
+  constructor(private jokeStoreService: JokeStoreService) {
+    // TODO: Look into using async pipe?
+    this.jokeStoreService.getJokes().subscribe((jokes) => {
+      this.jokes = jokes;
+    });
+  }
 }

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>ChuckNorrisJokeGenerator</title>
+    <title>Chuck Norris Joke Generator</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />