page 404 et début choix humeur

src/app/pages/page-humeur/page-humeur.component.html

@@ -0,0 +1,25 @@
+<p>page-humeur works!   </p>
+<!--<img  [src]="monHumeurLien";>
+<img [src]="tabHumeur[0].lien">
+-->
+
+
+******************************************
+<!-- <p>Présentement, {{onChoixHumeur()}}</p> -->
+choix de mon humeur
+<!-- {{monHumeurTitle}} -->
+<!--  <br> -->
+ <img src="{{monHumeurLien}}" *ngIf="monHumeurLien" >
+
+<p>Je choisis mon humeur :</p>
+
+
+<div *ngFor="let humor of tabHumeur; let i=index">
+    {{i}} 
+    <img src="{{humor.lien}}" alt="{{humor.title}}"  (click)="onChoixHumeur(i)">{{humor.title}}
+</div> 
+
+<div >
+    
+
+</div>

src/app/pages/page-humeur/page-humeur.component.scss

@@ -0,0 +1,12 @@
+
+
+img {
+	width: 50px;
+	height: 50px;
+}
+
+p>img {
+	width: 70px;
+	height: 70px;
+
+}

src/app/pages/page-humeur/page-humeur.component.spec.ts

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

src/app/pages/page-humeur/page-humeur.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-humeur',
+  templateUrl: './page-humeur.component.html',
+  styleUrls: ['./page-humeur.component.scss']
+})
+
+export class PageHumeurComponent implements OnInit {
+  
+ monHumeurLien! : string[];
+ monHumeurTitle! : string[] ;
+
+
+  tabHumeur= [
+      { title : "Je vais bien", lien : "assets/images/emoticon-heureux.png"},
+      { 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 { }
+
+onChoixHumeur(numero: number){
+ this.monHumeurTitle= [this.tabHumeur[numero].title];
+ this.monHumeurLien= [this.tabHumeur[numero].lien];
+
+console.log("humeur titre est : ", this.monHumeurTitle);
+console.log("humeur lien est : ", this.monHumeurLien);
+console.log("index humeur est : ", numero );
+
+}
+
+
+
+}
+

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

@@ -4,12 +4,16 @@
 
   <div class="ctn-link min-vh-100">
  <div class="text-center">
- <p> Page introuvable</p>
+ 
 
 
       <a routerLink="" routerLinkActive="!active">Je retourne à l'accueil</a>
-    </div>
+      <p></p>
+      
+
     
+     <img src="/assets/images/404.gif" alt="Page introuvable">
+    </div>
   </div>
 
 </div>

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

@@ -11,6 +11,9 @@ p{
 
 .min-vh-100  {
     font-weight: bold;
-    background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
+    //background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
     //max-width: max-content;
 }
+
+img {justify-content: center;
+}