Merge pull request #20 from AlineRinquin/page404

Page404

src/app/app.module.ts

@@ -40,7 +40,6 @@ import { AutofocusFixModule  } from 'ngx-autofocus-fix';
 
 
 
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -75,7 +74,6 @@ import { AutofocusFixModule  } from 'ngx-autofocus-fix';
     PageAjoutContactComponent,
     PageModifierContactComponent,
     PageCreationTeamComponent,
-
   ],
   imports: [
     BrowserModule,

src/app/components/humeur/humeur.component.html

@@ -1 +1,6 @@
-<p>humeur works!</p>
+<p>Mon humeur est :</p>
+
+<p>Affichage des items du tableau des humeurs</p>
+
+<app-emoticon> *ngFor ="let tabHumeur of tabHumeur" 
+    [tabHumeur]="tabHumeur"></app-emoticon>

src/app/components/humeur/humeur.component.ts

@@ -7,9 +7,23 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HumeurComponent implements OnInit {
 
-  constructor() { }
+
+
+
+
+
+  constructor() {
+    
+   
+    
+
+   }
 
   ngOnInit(): void {
+
+
+
+
   }
 
 }

src/app/emoticon/emoticon.component.html

@@ -0,0 +1,6 @@
+<p>emoticon des humeurs</p>
+<div *ngFor="let humor of tabHumeur">{{humor.title}}</div>
+<div *ngFor="let humor of tabHumeur"> <img src="{{humor.lien}}" alt="{{humor.title}}"></div>
+
+
+

src/app/emoticon/emoticon.component.spec.ts

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

src/app/emoticon/emoticon.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-emoticon',
+  templateUrl: './emoticon.component.html',
+  styleUrls: ['./emoticon.component.scss']
+})
+export class EmoticonComponent implements OnInit {
+
+     //declaration du tableau
+     tabHumeur= [
+      { title : "Je pleure", lien : "../../../assets/images/emoticon-pleurer.png"},
+      { title : "Je suis en colère", lien : "../../../assets/images/emoticon-insulter.png"},
+      { title : "Je suis malade", lien : "../../../assets/images/emoticon-vomir.png"}
+    ]
+
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+
+console.log("tab humeurs ==>", this.tabHumeur)
+  }
+
+}

src/app/pages/page-not-found/page-not-found.component.html

@@ -2,11 +2,15 @@
 
 <div>
 
-<p> Page introuvable</p>
+  <div class="ctn-link min-vh-100">
-<a routerLink="" routerLinkActive="!active"><br><br>
+ <div class="text-center">
-    Je retourne à l'accueil<br><br><br><br><br><br><br><br><br><br><br><br></a>
+ <p> Page introuvable</p>
 
 
+      <a routerLink="" routerLinkActive="!active">Je retourne à l'accueil</a>
+    </div>
+    
+  </div>
+
 </div>
 
-

src/app/pages/page-not-found/page-not-found.component.scss

@@ -1,25 +1,16 @@
-a.hover {
+p{
-  color: rgb(219, 200, 28);
+    color: black;
-}
-
-a {
-  color: rgb(32, 114, 45);
-}
-
-div {
     text-align: center;
-  font-weight: bold;
+}
-
+
-  // si on préfère une image en fond
+
-  // background-image: url("../../../assets/images/404.jpg");
+.ctn-link > div {
-  // background-size: cover;
+    padding-top: 7em;
-
+}
-  background-image: linear-gradient(
+
-    to left top,
+
-    #051937,
+.min-vh-100  {
-    #004d7a,
+    font-weight: bold;
-    #008793,
+    background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
-    #e2ebe7,
+    //max-width: max-content;
-    #f8faf5
-  );
 }