Contenido del curso
Tu primer reto en Fake Store
Próximos pasos
Problemas de la aplicación y recursos disponibles
Julian Franco
Estudiante
Jeniffer Cruz
EstudianteContenido del curso
Problemas de la aplicación y recursos disponibles
Julian Franco
EstudianteJeniffer Cruz
Estudiante
Jimer Samuel Espinoza
Estudiante
Oscar Barajas Tavares
Team Platzi
Jonathan Hernandez Zapata
Estudiante
José Vinicio Flores Arias
EstudianteOscar Barajas Tavares
Team Platzi
Kengya Moncada
Estudiante
Carlos Alberto Chaucanes
EstudianteCarlos Alberto Chaucanes
Estudiante
Rodrigo Andre Gutierrez
Estudiante
Alexander Vargas Rivera
Estudiante
Andres V
Estudiante
Juan Castro
Profesor
Uriel Solis Salinas
Estudiante
Axel Enrique Galeed Gutierrez
Estudiante
Maria Tohabanda Duchi
Estudiante
Ulqernesh Karvenae
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.
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>