Problemas de la aplicación y recursos disponibles
Contenido del curso
Problemas de la aplicación y recursos disponibles
Contenido del curso
Julian Franco
Jeniffer Cruz
Jimer Samuel Espinoza
Oscar Barajas Tavares
Team Platzi
Jonathan Hernandez Zapata
José Vinicio Flores Arias
Oscar Barajas Tavares
Team Platzi
Kengya Moncada
Carlos Alberto Chaucanes
Carlos Alberto Chaucanes
Rodrigo Andre Gutierrez
Alexander Vargas Rivera
Andres V
Juan Castro
Profesor
Uriel Solis Salinas
Axel Enrique Galeed Gutierrez
Maria Tohabanda Duchi
Ulqernesh Karvenae
No se si como opinión seria bueno poder ver todos lo issues en el repositorio para ir asi ir resolviendo. En el platziChallenge con Leo he visto que la comunidad se anima cuando ve los issues jeje.
Es buena idea, Julian. Gracias por compartirla.
A demostrar todo lo aprendido a lo largo de todos los cursos de Oscar, muy emocionado por empezar este reto!💚
A darle con todo!!!
Dejo por acá mi solución al reto. https://github.com/platzi/laboratorio-fakestore/pull/4
Fue divertido completarlo
Se me hace muy parecido al reto de Ethereum developer program, el que hice pero no envie el form :(
Tiene una base similar
Las imagenes aparecen con este error...
Me he encontrado con el mismo problema. Es posible que el enlace directo esté protegido y no permita su acceso desde otros sitios web.
Encontre la solución, puedes cambiar manualmente la url por localhost asi:
Ctrl + K, luego V solita para abrir el visor de MarkDown de VSCode !captura de pantalla ejemplo markdown viewer en VSCode
Ese instructor es muy sexi, paseme clases orales pues.....
Hay alguna especie de diseño o prototipo que indique cómo se debe ver la aplicación funcionando ?
El diseño y estilos CSS son de libre implementación, podemos aplicar los que queramos sumado a los que ya están cargados por defecto en el reepositorio. Lo indispensable para pasar la prueba es terminar de completar el código JS de la app. :D
Una duda, será que pueda usar axios en vez de fetch, para la petición de la API? Siento que se ven más limpio y estético usando axios.
Les dejo el nuevo link de la [Platzi Fake Store API](https://fakeapi.platzi.com/ "Platzi Fake Store API")
El link de los recursos de la clase está caído.
Feeling nervous...
Donde se le sube la dificultad a los bots XDconst $app = document.getElementById('app');const $observe = document.getElementById('observe');const API = 'https://api.escuelajs.co/api/v1/products';\<!DOCTYPE *html*><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>FakeStore</title> <link type="text/css" href="styles.css" rel="stylesheet"></head>
<body> <div class="Main"> <h2>FakeStore</h2> <div id="app"> </div> <div id="observe"></div> </div></body>
<script type="text/javascript" src="../src/index.js"></script>
</html>
localStorage.removeItem('pagination')
const getData = api => { localStorage.setItem('pagination', '5') const pagination = localStorage.getItem('pagination')
fetch(${api}?offset=${pagination}\&limit=10) .then(response => response.json()) .then(response => { let products = response; let newItem = document.createElement('section'); newItem.classList.add('Items');
products.forEach((product) => { const data = \<article class="Card"> \<img src="${product.*images*\[0]}" /> \<h3> ${product.*title*} \<small>$ ${product.*price*}\</small> \</h3> \</article> newItem.innerHTML += data }); $app.appendChild(newItem);
if (products.length < 10 ) { maxElement() } }) .catch(error => console.log(error));}
const loadData = () => { getData(API);}
const maxElement = () => { intersectionObserver.disconnect(); $app.innerHTML += '<p>Todos los productos Obtenidos</p>'}const intersectionObserver = new IntersectionObserver(entries => { if (entries[0].isIntersecting) { const newPage = (parseInt(localStorage.getItem('pagination')) + 10).toString() localStorage.setItem('pagination', newPage) loadData() }}, { rootMargin: '0px 0px 100% 0px',});
intersectionObserver.observe($observe);
const $app = document.getElementById('app'); const $observe = document.getElementById('observe'); const API = 'https://api.escuelajs.co/api/v1/products'; localStorage.removeItem('pagination') const getData = api => { localStorage.setItem('pagination', '5') const pagination = localStorage.getItem('pagination') fetch(`${api}?offset=${pagination}&limit=10`) .then(response => response.json()) .then(response => { let products = response; let newItem = document.createElement('section'); newItem.classList.add('Items'); products.forEach((product) => { const data = ` <article class="Card"> <img src="${product.images[0]}" /> <h3> ${product.title} <small>$ ${product.price}</small> </h3> </article> ` newItem.innerHTML += data }); $app.appendChild(newItem); if (products.length < 10 ) { maxElement() } }) .catch(error => console.log(error)); } const loadData = () => { getData(API); } const maxElement = () => { intersectionObserver.disconnect(); $app.innerHTML += '<p>Todos los productos Obtenidos</p>' } const intersectionObserver = new IntersectionObserver(entries => { if (entries[0].isIntersecting) { const newPage = (parseInt(localStorage.getItem('pagination')) + 10).toString() localStorage.setItem('pagination', newPage) loadData() } }, { rootMargin: '0px 0px 100% 0px', }); intersectionObserver.observe($observe); ```HTML ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>FakeStore</title> <link type="text/css" href="styles.css" rel="stylesheet"> </head> <body> <div class="Main"> <h2>FakeStore</h2> <div id="app"> </div> <div id="observe"></div> </div> </body> <script type="text/javascript" src="../src/index.js"></script> </html>
