added contact us page

src/app/account/account.component.html

+<div>
+    <!-- Reactive driven form -->
+    <div style="display:inline-block">
+        <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
+            <div>
+                <p>reactive</p>
+                <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>
+
+</div>
+
+
+
+
+    <!-- template driven form
+    <div style="display:inline-block; margin-left: 10em;">
+        <form #newUserForm="ngForm" (ngSubmit)="onSubmit2(newUserForm)">
+            <div>
+                <p>template-driven</p>
+                <input type="text" class="input" placeholder="User name" required [(ngModel)]="userName" name="userName"
+                    pattern="[a-zA-Z ]*" #pickedName="ngModel">
+                <div *ngIf="!pickedName.valid && pickedName.touched">
+                    User name is required!
+                </div>
+            </div>
+            <div>
+                <input type="email" class="input" placeholder="Email" required [(ngModel)]="email" name="email"
+                    #userEmail="ngModel" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}">
+                <div *ngIf="!userEmail.valid && userEmail.touched">
+                    Email is not valid!
+                </div>
+            </div>
+            <div>
+                <input type="password" class="input" placeholder="Password" required [(ngModel)]="password"
+                    name="password" #userPassword="ngModel">
+                <div *ngIf="!userPassword.valid && userPassword.touched">
+                    Password is required!
+                </div>
+            </div>
+            <button type="submit" [disabled]="!newUserForm.form.valid">
+                Register
+            </button>
+            <button type="button" (click)="newUserForm.reset()">
+                Reset
+            </button>
+        </form>
+        <pre>{{ newUserForm.form.value }}</pre> Value of whole form -->
+        <!-- <pre>User name: {{ pickedName.value }}</pre> Value of userName field -->
+        <!-- <pre>Valid form? {{ newUserForm.form.valid }}</pre>
+    </div> -->
\ No newline at end of file

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';
+// import { NgForm } from '@angular/forms';
+
+
+@Component({
+  selector: 'app-account',
+  templateUrl: './account.component.html',
+  styleUrls: ['./account.component.css']
+})
+
+export class AccountComponent implements OnInit {
+  public userForm;
+    
+  constructor(private formBuilder: FormBuilder) { }
+  ngOnInit(): void {
+    this.userForm = this.formBuilder.group({
+      firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
+      lastName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
+      email: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}')]]
+    });
+  }
+  onSubmit() {
+    if (this.userForm.valid) {
+      alert('User form is valid!!')
+    } else {
+      alert('User form is not valid!!')
+    }
+  }
+  // onSubmit1() {
+  //   if (!this.userForm.valid) {
+  //     this.showMessage = true;
+  //   }
+  // }
+  //template driven
+  // onSubmit2(form: NgForm) {
+  //   if (form.valid) {
+  //     console.log(form.value);
+  //     // ...our form is valid, we can submit the data
+  //   }
+  // }
+}
\ No newline at end of file

src/app/app-routing.module.ts

@@ -4,14 +4,16 @@ import { EnglandComponent} from './england/england/england.component';
 import { FranceComponent} from './france/france/france.component';
 import { GreeceComponent} from './greece/greece/greece.component';
 import { SpainComponent} from './spain/spain/spain.component';
-// import {AccountComponent} from './account/account.component';
+import { AccountComponent } from './account/account.component';
+import { ContactUsComponent } from './contact-us/contact-us.component';
 
 const routes: Routes = [
   {path:'england', component: EnglandComponent},
   {path:'france', component: FranceComponent},
   {path:'greece', component: GreeceComponent},
-  {path:'spain', component: SpainComponent}
-  // {path:'account', component: AccountComponent}
+  {path:'spain', component: SpainComponent},
+  {path:'account', component: AccountComponent},
+  {path:'contactUs', component: ContactUsComponent}
 ];
 
 @NgModule({

src/app/app.component.css

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

src/app/app.module.ts

@@ -9,6 +9,11 @@ import { FranceComponent } from './france/france/france.component';
 import { SpainComponent } from './spain/spain/spain.component';
 import { GreeceComponent } from './greece/greece/greece.component';
 import { NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { AccountComponent } from './account/account.component';
+import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ContactUsComponent } from './contact-us/contact-us.component';
+
 
 @NgModule({
   declarations: [
@@ -18,12 +23,16 @@ import { NgbModule} from '@ng-bootstrap/ng-bootstrap';
     FooterComponent,
     FranceComponent,
     SpainComponent,
-    GreeceComponent
+    GreeceComponent,
+    AccountComponent,
+    ContactUsComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    NgbModule
+    NgbModule,
+    FormsModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/contact-us/contact-us.component.css

+#contact-form-container {
+    width: 100%;
+    height: 400px;
+    background-color: #86c0f0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 5%;
+    border: 2px solid black;
+    border-radius: 20px;
+}
+
+#form-interactive-window {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+#personal-info-left {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    /* flex-grow: 1; */
+}
+
+#comment-panel-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /* flex-grow: 1; */
+}
\ No newline at end of file

src/app/contact-us/contact-us.component.html

+<div>
+    <!-- Reactive driven form -->
+    <div >
+        <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
+            <div id="contact-form-container">
+    
+                <div id="form-title-upper" style="flex-grow: 1;">
+                    <h1>Contact our dev team!</h1>
+                </div>
+
+                <div id="form-interactive-window"  style="flex-grow: 4;">
+
+                    <div id="personal-info-left">
+                        <div>
+                            <h4>First Name</h4>
+                            <input type="text" formControlName="firstName" class="form-control input" placeholder="John">
+                        </div>
+                        <div>
+                            <h4>Last Name</h4>
+                            <input type="text" formControlName="lastName" class="form-control input " placeholder="Appleseed">
+                        </div>
+                        <div>
+                            <h4>Email</h4>
+                            <input type="email" formControlName="email" class="form-control  input" placeholder="johnseed@nisum.com">
+                        </div>
+                    </div>
+                
+                    <div id="comment-panel-right">
+                        <div>
+                            <h4>Comments</h4>
+                            <textarea placeholder="Tell us what you think" style="height: 200px;"></textarea>
+                            <!-- <input type="text" formControlName="comments" class="form-control input" placeholder="Tell us what you think"> -->
+                        </div>
+                    </div>
+                </div>
+
+                <div id="submit-section"  style="flex-grow: 1;">
+                    <button type="submit">Sign in</button>
+                </div>
+            </div>
+            
+
+        </form>
+        <div>
+            <!-- <ngb-alert  *ngIf="showMessage" type="danger" >{{ invalidEntry }}</ngb-alert> -->
+            <!-- <div class="invalid-text" *ngIf="showMessage">
+                {{invalidEntry}}
+            </div> -->
+        </div>
+    </div>
+
+</div>

src/app/contact-us/contact-us.component.spec.ts

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

src/app/contact-us/contact-us.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-contact-us',
+  templateUrl: './contact-us.component.html',
+  styleUrls: ['./contact-us.component.css']
+})
+
+
+export class ContactUsComponent implements OnInit {
+  public userForm;
+
+  constructor(private formBuilder: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.userForm = this.formBuilder.group({
+      firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
+      lastName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
+      email: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}')]]
+    });
+  }
+
+  onSubmit() {
+    if (this.userForm.valid) {
+      alert('User form is valid!!')
+    } else {
+      alert('User form is not valid!!')
+    }
+  }
+
+}

src/app/footer/footer/footer.component.html

@@ -2,6 +2,6 @@
     <ul>
         <li>About Us</li>
         <li>Careers</li>
-        <li>Contact Us</li>
+        <li [routerLink]="['/contactUs']">Contact Us</li>
     </ul>
 </div>
\ No newline at end of file