Added pages and routing for countries

angular.json

@@ -2,6 +2,7 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
+    "analytics": "0aa551de-d86e-40fe-a860-d3f94ea159bd",
     "packageManager": "yarn"
   },
   "newProjectRoot": "projects",

package.json

@@ -18,7 +18,9 @@
     "@angular/forms": "~11.2.6",
     "@angular/platform-browser": "~11.2.6",
     "@angular/platform-browser-dynamic": "~11.2.6",
-    "@angular/router": "~11.2.6",
+    "@angular/router": "^11.2.10",
+    "@ng-bootstrap/ng-bootstrap": "^9.1.0",
+    "bootstrap": "^4.6.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.3"

src/app/account/account.component.css

+.input{
+    width: 15em;
+    height: 2em;
+    margin-bottom: 1em;
+}
+  .invalid-text{
+      color:red;
+  }

src/app/account/account.component.html

+<!-- <p>account works!</p>
+<div>
+<form [formGroup]="userForm" (ngSubmit)="onSubmit1()">
+
+    <p>Sign up</p>
+
+    <div>
+        <div>
+            <input type="text" formControlName="firstName"  class="form-control input" placeholder="First name">
+        </div>
+        <div>
+            <input type="text" formControlName="lastName" class="form-control input " placeholder="Last name">
+        </div>
+    </div>
+
+    <input type="email" formControlName="email"  class="form-control  input" placeholder="E-mail">
+    <div>
+        <button  type="submit">Sign in</button>
+    </div>
+  </form>
+  <div >
+    <ngb-alert  *ngIf="showMessage" type="danger" >{{ invalidEntry }}</ngb-alert>
+    <!-- <div class= "invalid-text" *ngIf="showMessage">
+        {{invalidEntry}}
+    </div> -->
+  <!-- </div>
+</div> --> -->

src/app/account/account.component.spec.ts

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

src/app/account/account.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-account',
+  templateUrl: './account.component.html',
+  styleUrls: ['./account.component.css'],
+})
+export class AccountComponent implements OnInit {
+  formGroup;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/app/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { EnglandComponent } from './england/england.component';
+import { FranceComponent } from './france/france.component';
+import { GreeceComponent } from './greece/greece.component';
+import { SpainComponent } from './spain/spain.component';
+
+const routes: Routes = [
+  { path: 'countries/england', component: EnglandComponent },
+  { path: 'countries/france', component: FranceComponent },
+  { path: 'countries/spain', component: SpainComponent },
+  { path: 'countries/greece', component: GreeceComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

src/app/app.component.css

+.dynamic-container {
+  margin-top: 35px;
+  height: calc(100vh-70px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 50px 20px 20px 50px;
+}

src/app/app.module.ts

@@ -2,15 +2,29 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
+import { HeaderComponent } from './header/header.component';
+import { FooterComponent } from './footer/footer.component';
+import { EnglandComponent } from './england/england.component';
+import { FranceComponent } from './france/france.component';
+import { SpainComponent } from './spain/spain.component';
+import { GreeceComponent } from './greece/greece.component';
+import { AccountComponent } from './account/account.component';
+import { AppRoutingModule } from './app-routing.module';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
   declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
+    AppComponent,
+    HeaderComponent,
+    FooterComponent,
+    EnglandComponent,
+    FranceComponent,
+    SpainComponent,
+    GreeceComponent,
+    AccountComponent,
   ],
+  imports: [BrowserModule, AppRoutingModule, NgbModule],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/england/england.component.css

+.img {
+  height: 350px;
+  width: 350px;
+  padding: 5px;
+}

src/app/england/england.component.html

+<div class="imgContainer">
+  <img class="img" src="/assets/images/england/england-bridge.jpg" />
+  <img class="img" src="/assets/images/england/england-parliament.jpg" />
+  <img class="img" src="/assets/images/england/england-stonehedge.jpg" />
+</div>

src/app/england/england.component.spec.ts

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

src/app/england/england.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-england',
+  templateUrl: './england.component.html',
+  styleUrls: ['./england.component.css']
+})
+export class EnglandComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/footer/footer.component.css

+.footer {
+  height: 5rem;
+  background: #6fb7f1;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  position: fixed;
+}
+ul {
+  font-family: Arial, Verdana;
+  font-size: 14px;
+  margin: 0 auto;
+  padding: 0;
+  margin-top: 20px;
+  /* width:600px; */
+  list-style: none;
+}
+
+ul li {
+  display: block;
+  position: relative;
+  float: left;
+  padding-left: 20px;
+}

src/app/footer/footer.component.html

+<div class="footer">
+  <ul>
+    <li>About Us</li>
+    <li>Careers</li>
+    <li>Contact Us</li>
+  </ul>
+</div>

src/app/footer/footer.component.spec.ts

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

src/app/footer/footer.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/france/france.component.css

+.img {
+  height: 350px;
+  width: 350px;
+  padding: 5px;
+}

src/app/france/france.component.html

+<div class="imgContainer">
+  <img class="img" src="/assets/images/france/france-cafe.jpg" />
+  <img class="img" src="/assets/images/france/france-tower.jpg" />
+  <img class="img" src="/assets/images/france/france-town.jpg" />
+</div>

src/app/france/france.component.spec.ts

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

src/app/france/france.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-france',
+  templateUrl: './france.component.html',
+  styleUrls: ['./france.component.css']
+})
+export class FranceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/greece/greece.component.css

+.img {
+  height: 350px;
+  width: 350px;
+  padding: 5px;
+}

src/app/greece/greece.component.html

+<div class="imgContainer">
+  <img class="img" src="/assets/images/greece/greece- beach.jpg" />
+  <img class="img" src="/assets/images/greece/greece-steps.jpg" />
+  <img class="img" src="/assets/images/greece/greese-santorini.jpg" />
+</div>

src/app/greece/greece.component.spec.ts

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

src/app/greece/greece.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-greece',
+  templateUrl: './greece.component.html',
+  styleUrls: ['./greece.component.css']
+})
+export class GreeceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/header/header.component.css

+.header {
+  background: #1abc9c;
+  height: 4em;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+.btn {
+  margin-top: 30px;
+  margin-left: 10px;
+}
+.btnMenu {
+  margin-top: 20px;
+  margin-left: 20px;
+  display: inline-block;
+}
+.account {
+  position: absolute;
+  right: 10px;
+  margin-top: 30px;
+}

src/app/header/header.component.html

+<div class="header">
+  <div class="btnMenu">
+    <button [routerLink]="['/countries/england']">England</button>
+    <button [routerLink]="['/countries/france']">France</button>
+    <button [routerLink]="['/countries/greece']">Greece</button>
+    <button [routerLink]="['/countries/spain']">Spain</button>
+  </div>
+  <span class="account">
+    <i class="fa fa-user" [routerLink]="['/account']"></i>
+  </span>
+</div>

src/app/header/header.component.spec.ts

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

src/app/header/header.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/spain/spain.component.css

+.img {
+  height: 350px;
+  width: 350px;
+  padding: 5px;
+}

src/app/spain/spain.component.html

+<div class="imgContainer">
+  <img class="img" src="/assets/images/spain/spain-barcelona.jpg" />
+  <img class="img" src="/assets/images/spain/spain-cathedral.jpg" />
+  <img class="img" src="/assets/images/spain/spain-dance.jpg" />
+</div>

src/app/spain/spain.component.spec.ts

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

src/app/spain/spain.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-spain',
+  templateUrl: './spain.component.html',
+  styleUrls: ['./spain.component.css']
+})
+export class SpainComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/index.html

-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>MyNgApp</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>MyNgApp</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>

yarn.lock

@@ -237,7 +237,7 @@
   dependencies:
     tslib "^2.0.0"
 
-"@angular/router@~11.2.6":
+"@angular/router@^11.2.10":
   version "11.2.10"
   resolved "https://registry.yarnpkg.com/@angular/router/-/router-11.2.10.tgz#6a158d1eeae87eebaaf4be400058e61b7d1098a6"
   integrity sha512-OYVErGuC4ECWHcnYw3hmy34YKJG5BpH0uzhj/DxmvHEhDv4LHxSye5IcApktqDn68AvPmbGSmyjB1rNnXCsbAg==
@@ -1131,6 +1131,13 @@
     merge-source-map "^1.1.0"
     schema-utils "^2.7.0"
 
+"@ng-bootstrap/ng-bootstrap@^9.1.0":
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-9.1.0.tgz#975942e1e710b2fa00c81c46e4e4c863ff820519"
+  integrity sha512-5cTxOew6EsENIa/PiIlIlF3MSGanLGD2fyGPyQJc0hU5j9uK+alz2eJXWpeAX3IHLDIaOBfRdCGOrpXkeIUhzQ==
+  dependencies:
+    tslib "^2.0.0"
+
 "@ngtools/webpack@11.2.9":
   version "11.2.9"
   resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-11.2.9.tgz#d422dfec93d0cf276707c1e88285ac1af3707180"
@@ -1997,6 +2004,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7"
+  integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"