Problemas de la aplicación y recursos disponibles

Clase 2 de 5 • Prueba Técnica: E-commerce Profesional con JavaScript

Julian Franco

student•

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

student•

Es buena idea, Julian. Gracias por compartirla.

Jimer Samuel Espinoza

student•

A demostrar todo lo aprendido a lo largo de todos los cursos de Oscar, muy emocionado por empezar este reto!💚

Oscar Barajas Tavares

Team Platzi•

A darle con todo!!!

Jonathan Hernandez Zapata

student•

Dejo por acá mi solución al reto. https://github.com/platzi/laboratorio-fakestore/pull/4

Fue divertido completarlo

José Vinicio Flores Arias

student•

Se me hace muy parecido al reto de Ethereum developer program, el que hice pero no envie el form :(

Oscar Barajas Tavares

Team Platzi•

Tiene una base similar

Kengya Moncada

student•

Las imagenes aparecen con este error...

Carlos Alberto Chaucanes

student•

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

student•

Encontre la solución, puedes cambiar manualmente la url por localhost asi:

Tambien puedes agregar esta configuración al package.json y volver a ejecutar el servidor:

Rodrigo Andre Gutierrez

student•

Ctrl + K, luego V solita para abrir el visor de MarkDown de VSCode !captura de pantalla ejemplo markdown viewer en VSCode

Alexander Vargas Rivera

student•

Ese instructor es muy sexi, paseme clases orales pues.....

Andres V

student•

Hay alguna especie de diseño o prototipo que indique cómo se debe ver la aplicación funcionando ?

Juan Castro

teacher•

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

Uriel Solis Salinas

student•

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

student•

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

student•

Feeling nervous...

Ulqernesh Karvenae

student•

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);

CODE JS

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>

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>

Problemas de la aplicación y recursos disponibles

Bienvenida

Te damos la bienvenida a Fake Store

Tu primer reto en Fake Store

Problemas de la aplicación y recursos disponibles

Troubleshooting

Code review

Próximos pasos

Sigue experimentando en otros laboratorios