[ADD]🚀 animate.css added

joalbertg · joalbertg · commit 90bc79d0a1e4 · 2020-06-21T03:10:55.000-05:00
diff --git a/README.md b/README.md
@@ -1,10 +1,14 @@
 # Gif Expert App
 
+- [Developers Giphy][giphy]
+- [Animate CSS][animate_css]
 - [Estructura de archivos][structure]
 - [Structuring projects and naming components in React][structuring-projects-and-naming-components]
 
 [structure]: https://es.reactjs.org/docs/faq-structure.html
 [structuring-projects-and-naming-components]: https://hackernoon.com/structuring-projects-and-naming-components-in-react-1261b6e18d76
+[giphy]: https://developers.giphy.com/
+[animate_css]: https://animate.style/
 
 ### Install
 
@@ -21,12 +25,23 @@
 ├── package.json
 ├── src
 │   ├── GifExpertApp.js
+│   ├── components
+│   │   ├── AddCategory.js
+│   │   ├── GifGrid.js
+│   │   ├── GifGridItem.js
+│   │   ├── ListCategories.js
+│   │   └── index.js
+│   ├── helpers
+│   │   ├── getGifs.js
+│   │   └── index.js
+│   ├── hooks
+│   │   └── useFetchGifs.js
 │   ├── index.css
 │   ├── index.js
 │   └── setupTests.js
 └── yarn.lock
 
-1 directory, 9 files
+4 directories, 17 files
 ```
 
 ### Scripts
@@ -39,3 +54,8 @@
 
 > run `docker-compose run app yarn test`
 
+#### Build
+
+> run `docker-compose run app yarn build`, install `yarn global http-server` to test.
+> run `http-server build`
+
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
+    />
+    <title>Gif Expert App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/components/GifGrid.js b/src/components/GifGrid.js
@@ -9,8 +9,8 @@ const GifGrid = ({category}) => {
 
   return(
     <div className="card-grid">
-      <h3>{category}</h3>
-      { loading && <p>Loading</p> }
+      <h3 className="animate__animated animate__fadeIn">{category}</h3>
+      { loading && <p className="loading animate__animated animate__flash">Loading</p> }
       {
         gifs.map(gif => (
           <GifGridItem
diff --git a/src/components/GifGridItem.js b/src/components/GifGridItem.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 const GifGridItem = ({url, title}) => {
   return (
-    <div className="card">
+    <div className="card animate__animated animate__fadeIn">
       <img src={url} alt={title} />
       <p>{title}</p>
     </div>
diff --git a/src/index.css b/src/index.css
@@ -28,6 +28,13 @@ img {
   text-align: center;
 }
 
+.card-grid .loading {
+  font-size: 1.5rem;
+  font-weight: 700; 
+  flex: 0 1 100%;
+  text-align: center;
+}
+
 .card {
   display: flex;
   flex-direction: column;
