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.
Problemas de la aplicación y recursos disponibles
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.
A demostrar todo lo aprendido a lo largo de todos los cursos de Oscar, muy emocionado por empezar este reto!💚
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 :(
Las imagenes aparecen con este error...
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 ?
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.
Julian Franco
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.
Jeniffer Cruz
Es buena idea, Julian. Gracias por compartirla.
Jimer Samuel Espinoza
A demostrar todo lo aprendido a lo largo de todos los cursos de Oscar, muy emocionado por empezar este reto!💚
Oscar Barajas Tavares
Team PlatziA darle con todo!!!
Jonathan Hernandez Zapata
Dejo por acá mi solución al reto. https://github.com/platzi/laboratorio-fakestore/pull/4
Fue divertido completarlo
José Vinicio Flores Arias
Se me hace muy parecido al reto de Ethereum developer program, el que hice pero no envie el form :(
Oscar Barajas Tavares
Team PlatziTiene una base similar
Kengya Moncada
Las imagenes aparecen con este error...
Carlos Alberto Chaucanes
Me he encontrado con el mismo problema. Es posible que el enlace directo esté protegido y no permita su acceso desde otros sitios web.
Carlos Alberto Chaucanes
Encontre la solución, puedes cambiar manualmente la url por localhost asi:
Rodrigo Andre Gutierrez
Ctrl + K, luego V solita para abrir el visor de MarkDown de VSCode !captura de pantalla ejemplo markdown viewer en VSCode
Alexander Vargas Rivera
Ese instructor es muy sexi, paseme clases orales pues.....
Andres V
Hay alguna especie de diseño o prototipo que indique cómo se debe ver la aplicación funcionando ?
Juan Castro
ProfesorEl 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
Uriel Solis Salinas
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.
Axel Enrique Galeed Gutierrez
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.
Maria Tohabanda Duchi
Feeling nervous...
Ulqernesh Karvenae
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>