Resolve(js-challenge): Add solve for eachs four problems

PULL_REQUEST_TEMPLATE.md

@@ -2,9 +2,9 @@
 
 Solución al reto:
 
-Nombre:
-Usuario Platzi:
-Correo Electronico:
+Nombre:Roger David Alba Ortega
+Usuario Platzi: Roger David Alba Ortega
+Correo Electronico: [email protected]
 
 ## Reto:
 

public/index.html

@@ -5,7 +5,16 @@
   <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></title>
+  <meta name="description" content="Js challenge for ethereum developer program">
+  <title>PlatziStore</title>
+  <meta property="og:locale" content="en_CO"/>
+  <meta property="og:type" content="WebPage"/>
+  <meta property="og:title" content="Buy our tech products - PlatziStore"/>
+  <meta property="og:description" content="Js challenge for ethereum developer program"/>
+  <meta property="og:image" content="/favicon.ico"/>
+  <meta property="og:site_name" content="PlatziStore"/>
+  <meta property="og:url" content="https://platzi.com/"/>
+  <link rel="canonical" href="https://platzi.com/"/>
   <link type="text/css" href="styles.css" rel="stylesheet">
 </head>
 

src/index.js

@@ -2,30 +2,55 @@ const $app = document.getElementById('app');
 const $observe = document.getElementById('observe');
 const API = 'https://api.escuelajs.co/api/v1/products';
 
-const getData = api => {
-  fetch(api)
+const getData = (api,limit = 10) => {
+  const offset= localStorage.getItem('pagination') ? parseInt(localStorage.getItem('pagination')) + 10 : 5-1;
+  localStorage.setItem('pagination', offset)
+  fetch(`${api}?offset=${offset}&limit=${limit}`)
     .then(response => response.json())
     .then(response => {
       let products = response;
-      let output = products.map(product => {
-        // template
-      });
+      let lengths =products.length;
+      console.log(products);
+      let output = products.map(product =>( 
+
+        `<article class="Card" id="${product.id}">
+          <img src="${product.images[0]}" alt="${product.title}" />
+          <h2>
+            Producto: ${product.title}
+            <small>$: ${product.price}</small>
+          </h2>
+        </article>`
+
+      ));
       let newItem = document.createElement('section');
       newItem.classList.add('Item');
       newItem.innerHTML = output;
       $app.appendChild(newItem);
+      if (lengths < limit){
+          let message = document.createElement('span')
+          message.innerText = 'Todos los productos Obtenidos'
+          $app.appendChild(message)
+          intersectionObserver.unobserve($observe)
+      }
     })
     .catch(error => console.log(error));
 }
 
-const loadData = () => {
-  getData(API);
+const loadData = async() => {
+  const get = await getData(API);
 }
 
 const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
-}, {
+  entries.forEach(entry => { if (entry.isIntersecting) loadData() })
+}, 
+{
   rootMargin: '0px 0px 100% 0px',
 });
 
 intersectionObserver.observe($observe);
+
+window.addEventListener("beforeunload", (event) => 
+{
+  event.preventDefault()
+  localStorage.clear()
+})