├── .gitignore
├── LICENSE
├── PULL_REQUEST_TEMPLATE.md
├── README.md
├── package.json
├── public
    ├── index.html
    └── styles.css
├── screenshot.png
└── src
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Comunidad Platzi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | ## DESCRIPTION
 2 | 
 3 | Solución al reto 03 de Escuela de JavaScript
 4 | 
 5 | Nombre:
 6 | Usuario Platzi:
 7 | 
 8 | ## Reto:
 9 |   - [ ] Primer problema
10 |   - [ ] Segundo problema
11 |   - [ ] Tercer problema
12 |   - [ ] Cuarto Problema (Opcional)


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # javascript-challenge-03
  2 | 
  3 | # 100tifi.co
  4 | 
  5 | ![100tifico](https://raw.githubusercontent.com/platzi/javascript-challenge-03/master/screenshot.png?token=ACQQY5SNIXZ7QAVA5XIHPSC5TADSY)
  6 | 
  7 | Somos un directorio de personajes de la serie animada "Rick and Morty". Estamos por lanzar nuestra implementación y necesitamos resolver los problemas que presenta nuestra aplicación.
  8 | 
  9 | https://100tifi.co tiene un Bug, al llegar al final del listado de personajes se realiza una petición a la API ya que implementamos un "intersection observer" pero vuelve a obtener los mismos personajes y necesitamos cargar la lista completa de 468 personajes conforme hagamos scroll.
 10 | 
 11 | ### Debug
 12 | 
 13 | Visita el sitio web: https://100tifi.co
 14 | 
 15 | ### Instalación
 16 | 
 17 | ```
 18 | npm install
 19 | ```
 20 | 
 21 | ### Ejecución
 22 | 
 23 | ```
 24 | npm run start
 25 | ```
 26 | 
 27 | ### Documentación
 28 | 
 29 | 
 30 | - Variable llamada $app donde haremos render de nuestra app.
 31 | - Elemento del DOM que sera Observado.
 32 | - Constante 'API': Utilizamos la API de Rick and Morty.
 33 | 
 34 | ```javascript
 35 | const $app = document.getElementById('app');
 36 | const $observe = document.getElementById('observe');
 37 | const API = 'https://rickandmortyapi.com/api/character/';
 38 | ```
 39 | 
 40 | Función llamada 'getData' que se encarga de hacer Fetch a una API y construye un elemento nuevo en el DOM.
 41 | 
 42 | ```javascript
 43 | const getData = api => {
 44 |   fetch(api)
 45 |     .then(response => response.json())
 46 |     .then(response => {
 47 |       const characters = response.results;
 48 |       let output = characters.map(character => {
 49 |         return `
 50 |       <article class="Card">
 51 |         <img src="${character.image}" />
 52 |         <h2>${character.name}<span>${character.species}</span></h2>
 53 |       </article>
 54 |     `
 55 |       }).join('');
 56 |       let newItem = document.createElement('section');
 57 |       newItem.classList.add('Items');
 58 |       newItem.innerHTML = output;
 59 |       $app.appendChild(newItem);
 60 |     })
 61 |     .catch(error => console.log(error));
 62 | }
 63 | ```
 64 | 
 65 | Función encargada de hacer Fetch de los personajes.
 66 | 
 67 | ```javascript
 68 | const loadData = () => {
 69 |   getData(API);
 70 | }
 71 | ```
 72 | 
 73 | Intersection Observer
 74 | ```javascript
 75 | 
 76 | const intersectionObserver = new IntersectionObserver(entries => {
 77 |   if (entries[0].isIntersecting) {
 78 |     loadData();
 79 |   }
 80 | }, {
 81 |   rootMargin: '0px 0px 100% 0px',
 82 | });
 83 | 
 84 | intersectionObserver.observe($observe);
 85 | ```
 86 | 
 87 | 
 88 | ## RETO
 89 | 
 90 | ### Primer problema
 91 | 
 92 | 1. Guarda en localStorage la URL de la siguiente petición de personajes obtenida en la primera llamada a la API.
 93 | 2. Utiliza el nombre para la llave: 'next_fetch'.
 94 | 3. Comprueba que se ha guardado el valor 'next_fetch' en localStorage.
 95 | 
 96 | ### Segundo Problema
 97 | 
 98 | 1. Obten los datos almacenados en localStorage de la llave: 'next_fetch'.
 99 | 2. Valida que exista un valor en 'next_fetch' o regresa el primer llamado de la API.
100 | 3. Actualiza la función loadData() a Async/Await.
101 | 
102 | ### Tercer Problema
103 | 
104 | Cuando cerramos la pestaña o recargamos la pagina se debe de volver a mostrar los primeros 20 personajes.
105 | 
106 | 1. Mostrar los primeros 20 personajes al recargar
107 | 2. Eliminar el localStorage.
108 | 
109 | ### Cuarto Problema (Opcional)
110 | 
111 | La API utilizada "RickAndMortyApi.com" tiene 25 paginas de 20 personajes cada una, cuando la ultima petición sea ejecutada y el valor 'next' no sea entregado debes de mostrar un mensaje "Ya no hay personajes", a su vez debes de destruir el intersection observer.
112 | 
113 | 1. Implementar mensaje: "Ya no hay personajes...".
114 | 2. Deja de observar el elemento "observe".
115 | 
116 | ### Enviar solución de reto
117 | 
118 | Debes de crear un "Fork" de este proyecto, revolver los problemas y crear un Pull Request hacia este repositorio.
119 | 
120 | ### Contribuir
121 | Si alguien quiere agregar o mejorar algo, lo invito a colaborar directamente en este repositorio: [javascript-challenge-03](https://github.com/gndx/javascript-challenge-03/)
122 | 
123 | ### Licencia
124 | javascript-challenge-03 se lanza bajo la licencia [MIT](https://opensource.org/licenses/MIT).
125 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "javascript-challenge-03",
 3 |   "version": "1.0.0",
 4 |   "description": "Reto JavaScript",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "live-server --open=public --entry-file=index.html"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/gndx/javascript-challenge-03.git"
12 |   },
13 |   "keywords": [],
14 |   "author": "Oscar Barajas <oscar@platzi.com>",
15 |   "license": "ISC",
16 |   "bugs": {
17 |     "url": "https://github.com/gndx/javascript-challenge-03/issues"
18 |   },
19 |   "homepage": "https://github.com/gndx/javascript-challenge-03#readme",
20 |   "devDependencies": {
21 |     "live-server": "^1.2.1"
22 |   }
23 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>EscuelaJS Reto 05</title>
 9 |   <link type="text/css" href="styles.css" rel="stylesheet">
10 | </head>
11 | 
12 | <body>
13 |   <div class="Main">
14 |     <h1>100tifi.co</h1>
15 |     <div class="2" id="app"></div>
16 |     <div id="observe"></div>
17 |   </div>
18 | </body>
19 | 
20 | <script type="text/javascript" src="../src/index.js"></script>
21 | 
22 | </html>


--------------------------------------------------------------------------------
/public/styles.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap');
 2 | 
 3 | body {
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   color: #3c484e;
 7 |   font-family: 'Open Sans', sans-serif;
 8 | }
 9 | 
10 | .Main {
11 |   padding: 10px;
12 |   grid-template-columns: minmax(auto, 768px);
13 |   display: grid;
14 |   justify-content: center;
15 | }
16 | 
17 | .Items {
18 |   grid-template-columns: repeat(2, 1fr);
19 |   grid-gap: 1.5rem;
20 |   grid-row-gap: 1.5em;
21 |   display: grid;
22 | }
23 | 
24 | .Card {
25 |   text-decoration: none;
26 |   box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
27 |   border-radius: 5px;
28 |   margin: 0 0 20px 0;
29 |   display: block;
30 |   animation-duration: 4s;
31 |   animation-name: fade;
32 | }
33 | 
34 | .Card img {
35 |   width: 100%;
36 |   height: auto;
37 |   border-radius: 5px 5px 0 0;
38 | }
39 | 
40 | .Card h2 {
41 |   font-size: 18px;
42 |   font-weight: 300;
43 |   padding: 5px 10px;
44 |   display: flex;
45 |   justify-content: space-between;
46 | }
47 | 
48 | @keyframes fade {
49 |   from {
50 |     opacity: 0;
51 |   }
52 |   to {
53 |     opacity: 1;
54 |   }
55 | }
56 | 
57 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gndx/javascript-challenge-03/8065db3e949d28a6aeadcc6e4893fe0de4fa0c9f/screenshot.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | const $app = document.getElementById('app');
 2 | const $observe = document.getElementById('observe');
 3 | const API = 'https://rickandmortyapi.com/api/character/';
 4 | 
 5 | const getData = api => {
 6 |   fetch(api)
 7 |     .then(response => response.json())
 8 |     .then(response => {
 9 |       const characters = response.results;
10 |       let output = characters.map(character => {
11 |         return `
12 |       <article class="Card">
13 |         <img src="${character.image}" />
14 |         <h2>${character.name}<span>${character.species}</span></h2>
15 |       </article>
16 |     `
17 |       }).join('');
18 |       let newItem = document.createElement('section');
19 |       newItem.classList.add('Items');
20 |       newItem.innerHTML = output;
21 |       $app.appendChild(newItem);
22 |     })
23 |     .catch(error => console.log(error));
24 | }
25 | 
26 | const loadData = () => {
27 |   getData(API);
28 | }
29 | 
30 | const intersectionObserver = new IntersectionObserver(entries => {
31 |   if (entries[0].isIntersecting) {
32 |     loadData();
33 |   }
34 | }, {
35 |   rootMargin: '0px 0px 100% 0px',
36 | });
37 | 
38 | intersectionObserver.observe($observe);


--------------------------------------------------------------------------------