Animate Style CSS

leandrotomassini · Feb 9, 2022 · aa5e4e7 · aa5e4e7
1 parent fbd9b7d
commit aa5e4e7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/workspace/02-GifsApp/src/app/gifs/resultados/resultados.component.html b/workspace/02-GifsApp/src/app/gifs/resultados/resultados.component.html
@@ -1,5 +1,5 @@
 <div class="row">
-    <div *ngFor="let gif of resultados" class="col-md-4 col-sm-6">
+    <div *ngFor="let gif of resultados" class="col-md-4 col-sm-6 animate__animated animate__fadeIn animate_faster">
         <div class="card">
             <img [src]="gif.images.downsized_medium.url" [alt]="gif.title" class="card-img-top">
             <div class="card-body">

diff --git a/workspace/02-GifsApp/src/app/gifs/services/gifs.service.ts b/workspace/02-GifsApp/src/app/gifs/services/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 { Gif, SearchGifsResponse } from '../interface/gifs.interface';
@@ -9,6 +9,7 @@ import { Gif, SearchGifsResponse } from '../interface/gifs.interface';
 export class GifsService {
 
   private apiKey: string = "fwHVLO449TE0bty2sFoKDrDRETR2g4F3";
+  private servicioUrl: string = 'https://api.giphy.com/v1/gifs';
   private _historial: string[] = [];
 
   public resultados: Gif[] = [];
@@ -31,10 +32,14 @@ export class GifsService {
       localStorage.setItem('historial', JSON.stringify(this._historial));
     }
 
-    this.http.get<SearchGifsResponse>(`https://api.giphy.com/v1/gifs/search?api_key=fwHVLO449TE0bty2sFoKDrDRETR2g4F3&limit=10&q=${query}&lang=es`)
+    const params = new HttpParams()
+      .set('api_key', this.apiKey)
+      .set('limit', '10')
+      .set('q', query)
+
+    this.http.get<SearchGifsResponse>(`${this.servicioUrl}/search`, { params })
       .subscribe(
         (resp) => {
-          // console.log(resp.data);
           this.resultados = resp.data;
           localStorage.setItem('resultados', JSON.stringify(this.resultados));
         }

diff --git a/workspace/02-GifsApp/src/index.html b/workspace/02-GifsApp/src/index.html
@@ -1,14 +1,19 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>GifsApp</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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>
 </body>
-</html>
+
+</html>