90. Animate style CSS

verdizone · Mar 2, 2021 · c756c35 · c756c35
1 parent 41b87ea
commit c756c35
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/src/app/gifs/resultados/resultados.component.html b/src/app/gifs/resultados/resultados.component.html
@@ -4,7 +4,7 @@
 
    <div class="row">
      <div *ngFor="let gif of resultados"
-     class="col-md-4 col-sm-6">
+     class="col-md-4 col-sm-6 animate__animated animate__fadeIn">
       <div class="card">
         <img
         [src]="gif.images.downsized_medium.url"

diff --git a/src/app/gifs/sevices/gifs.service.ts b/src/app/gifs/sevices/gifs.service.ts
@@ -1,4 +1,4 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { SearchGifsResponse, Gif } from '../interfaces/gifs.interface';
 
@@ -9,10 +9,13 @@ export class GifsService {
 
 
   private apiKey:string = 'l5riPVpNTboaKKKjqUAe81u9PmKLfRhG';
+  private servicioUrl:string = 'https://api.giphy.com/v1/gifs'
   private _historial:string[] = [];
 
   public resultados:Gif[] = [];
 
+
+
   get historial (){
     return [...this._historial];
   }
@@ -47,9 +50,17 @@ export class GifsService {
 
     // console.log(this._historial);
 
-    this.http.get<SearchGifsResponse>(`https://api.giphy.com/v1/gifs/search?api_key=l5riPVpNTboaKKKjqUAe81u9PmKLfRhG&q=${ query }&limit=10`)
+    const params = new HttpParams()
+    .set('api_key', this.apiKey )
+    .set('limit', '10')
+    .set('q', query );
+
+    // console.log(  params.toString()  );
+
+
+    this.http.get<SearchGifsResponse>(`${this.servicioUrl}/search`, { params } )
     .subscribe( ( resp ) => {
-      console.log( resp.data );
+      // console.log( resp.data );
       this.resultados = resp.data;
 
       localStorage.setItem('resultados', JSON.stringify( this.resultados ) );

diff --git a/src/app/shared/sidebar/sidebar.component.html b/src/app/shared/sidebar/sidebar.component.html
@@ -7,6 +7,7 @@ <h3 class="text-light display-6">
     <a href="#"
       class="list-group-item list-group-item-action"
       *ngFor="let item of historial"
+      (click)="buscar( item )"
       >{{item | titlecase}}
     </a>
 

diff --git a/src/app/shared/sidebar/sidebar.component.ts b/src/app/shared/sidebar/sidebar.component.ts
@@ -15,6 +15,9 @@ export class SidebarComponent {
 
   constructor(  private _gifsService: GifsService, ){}
 
-
+  buscar(  termino:string ){
+    console.log(termino);
+    this._gifsService.buscarGifs( termino );
+  }
 
 }
diff --git a/src/index.html b/src/index.html
@@ -8,6 +8,8 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 <!-- CSS only -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+
 </head>
 <body>
   <app-root></app-root>