Problemas de la aplicación y recursos disponibles
Contenido del curso
Tu primer reto en Fake Store
Próximos pasos
Problemas de la aplicación y recursos disponibles
Contenido del curso
Problemas de la aplicación y recursos disponibles
Julian Franco
EstudianteNo 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
EstudianteEs buena idea, Julian. Gracias por compartirla.
Jimer Samuel Espinoza
EstudianteA 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
EstudianteDejo por acá mi solución al reto. https://github.com/platzi/laboratorio-fakestore/pull/4
Fue divertido completarlo
José Vinicio Flores Arias
EstudianteSe 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
Estudiante
Las imagenes aparecen con este error...
Carlos Alberto Chaucanes
EstudianteMe 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
EstudianteEncontre la solución, puedes cambiar manualmente la url por localhost asi:
Rodrigo Andre Gutierrez
EstudianteCtrl + K, luego V solita para abrir el visor de MarkDown de VSCode !captura de pantalla ejemplo markdown viewer en VSCode
Alexander Vargas Rivera
EstudianteEse instructor es muy sexi, paseme clases orales pues.....
Andres V
EstudianteHay 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
EstudianteUna 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
EstudianteLes 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
EstudianteFeeling nervous...
Ulqernesh Karvenae
EstudianteDonde 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>