platzi · LuisRamosG · Jun 14, 2022 · Jun 14, 2022 · Jun 14, 2022 · Jun 14, 2022
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
@@ -1,15 +1,17 @@
 ## DESCRIPTION
 
-Solución al reto:
+Solución al reto: https://luisramosg.github.io/js-challenge/
 
-Nombre:
-Usuario Platzi:
-Correo Electronico:
+Nombre: Luis Ramos
+
+Usuario Platzi: luisramosg
+
+Correo Electronico: [email protected]
 
 ## Reto:
 
-- [ ] Primer problema
-- [ ] Segundo problema
-- [ ] Tercer problema
-- [ ] Cuarto Problema
-- [ ] Quinto Problema
+- [✅] Primer problema
+- [✅] Segundo problema
+- [✅] Tercer problema
+- [✅] Cuarto Problema
+- [✅] Quinto Problema
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,34 @@
+<!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">
+  <meta name="description" content="Somos comercio en línea con una gran cantidad de productos a comercializar"/>
+  <title>PlatziStore</title>
+  <link type="text/css" href="styles.css" rel="stylesheet">
+</head>
+<body>
+  <div class="Main">
+    <h1>PlatziStore</h1>
+
+    <template id="productId" class="">
+      <article class="Card">
+        <img src="imagen.png" />
+        <h2>
+          Producto
+          <small>$ Precio</small>
+        </h2>
+      </article>
+    </template>
+
+    <div id="app"></div>
+    <div id="observe"></div>
+  </div>
+</body>
+
+<script type="text/javascript" src="index.js"></script>
+
+
+</html>
diff --git a/docs/index.js b/docs/index.js
@@ -0,0 +1,86 @@
+const $app = document.getElementById('app');
+const $observe = document.getElementById('observe');
+const API = 'https://api.escuelajs.co/api/v1/products';
+const PAGINATION = "pagination";
+
+//clear localstorage before close tab
+window.onbeforeunload = function() {
+  localStorage.removeItem(PAGINATION);
+  return;
+}
+
+const getProductCardElement = product =>{
+    let productTemplate = document.querySelector("#productId");
+    let h2 = productTemplate.content.querySelector("h2");
+    h2.firstChild.nodeValue = product.title;
+
+    let priceElement = productTemplate.content.querySelector("small");
+    priceElement.innerText = `$ ${product.price}`
+
+    let imgElement = productTemplate.content.querySelector("img")
+    imgElement.src = product.images[0]
+
+    return document.importNode(productTemplate.content, true);
+}
+
+const checkIfThereAreNoMoreProducts = products => {
+    if (Array.isArray(products) && products.length) {
+        let cards = document.querySelectorAll(".Card");
+        var last = cards[cards.length- 1];
+
+        console.log("lastItem")
+        console.log(last)
+        lastItemObserver.observe(last);
+    }else{
+        lastItemObserver.disconnect()  // destroy observer
+        alert("Todos los productos Obtenidos");
+        localStorage.removeItem(PAGINATION);
+    }
+}
+
+const getData = async api => {
+
+  let paginationStr = localStorage.getItem(PAGINATION);
+  let pagination;
+  if(paginationStr == undefined || paginationStr == 0){
+    pagination = 5;
+  }else{
+    pagination = parseInt( paginationStr );
+    pagination += 10
+  }
+
+  const limit = 10
+  await fetch(api +  `?offset=${pagination}&limit=${limit}`)
+    .then(response => response.json())
+    .then(response => {
+      localStorage.setItem(PAGINATION, pagination);
+      let products = response;
+      let newSection = document.createElement('section');
+      let output = products.map(product => {
+          productElement = getProductCardElement(product)
+          newSection.appendChild(productElement);
+      });
+      newSection.classList.add('Items');
+      $app.appendChild(newSection);
+      checkIfThereAreNoMoreProducts(products)
+    })
+    .catch(error => console.log(error));
+}
+
+const loadData = async () => {
+  await getData(API);
+}
+
+const lastItemObserver = new IntersectionObserver(
+    async entries => {
+        const lastItem = entries[0]
+        if(!lastItem.isIntersecting) return
+        lastItemObserver.unobserve(lastItem.target);
+        loadData();
+   },
+   {
+  rootMargin: "0px 0px 0px 0px",
+  threshold: 0.9,
+});
+
+loadData()
diff --git a/docs/styles.css b/docs/styles.css
@@ -0,0 +1,56 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap");
+
+body {
+  margin: 0;
+  padding: 0;
+  color: #3c484e;
+  font-family: "Open Sans", sans-serif;
+}
+
+.Main {
+  padding: 10px;
+  grid-template-columns: minmax(auto, 768px);
+  display: grid;
+  justify-content: center;
+}
+
+.Items {
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 1.5rem;
+  grid-row-gap: 1.5em;
+  display: grid;
+}
+
+.Card {
+  text-decoration: none;
+  box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06),
+    1px 3px 8px rgba(39, 44, 49, 0.03);
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+  display: block;
+  animation-duration: 4s;
+  animation-name: fade;
+}
+
+.Card img {
+  width: 100%;
+  height: auto;
+  border-radius: 5px 5px 0 0;
+}
+
+.Card h2 {
+  font-size: 18px;
+  font-weight: 300;
+  padding: 5px 10px;
+  display: flex;
+  justify-content: space-between;
+}
+
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -5,18 +5,30 @@
   <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="Somos comercio en línea con una gran cantidad de productos a comercializar"/>
+  <title>PlatziStore</title>
   <link type="text/css" href="styles.css" rel="stylesheet">
 </head>
-
 <body>
   <div class="Main">
     <h1>PlatziStore</h1>
+
+    <template id="productId" class="">
+      <article class="Card">
+        <img src="imagen.png" />
+        <h2>
+          Producto
+          <small>$ Precio</small>
+        </h2>
+      </article>
+    </template>
+
     <div id="app"></div>
     <div id="observe"></div>
   </div>
 </body>
 
 <script type="text/javascript" src="../src/index.js"></script>
 
+
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,31 +1,86 @@
 const $app = document.getElementById('app');
 const $observe = document.getElementById('observe');
 const API = 'https://api.escuelajs.co/api/v1/products';
+const PAGINATION = "pagination";
 
-const getData = api => {
-  fetch(api)
+//clear localstorage before close tab
+window.onbeforeunload = function() {
+  localStorage.removeItem(PAGINATION);
+  return;
+}
+
+const getProductCardElement = product =>{
+    let productTemplate = document.querySelector("#productId");
+    let h2 = productTemplate.content.querySelector("h2");
+    h2.firstChild.nodeValue = product.title;
+
+    let priceElement = productTemplate.content.querySelector("small");
+    priceElement.innerText = `$ ${product.price}`
+
+    let imgElement = productTemplate.content.querySelector("img")
+    imgElement.src = product.images[0]
+
+    return document.importNode(productTemplate.content, true);
+}
+
+const checkIfThereAreNoMoreProducts = products => {
+    if (Array.isArray(products) && products.length) {
+        let cards = document.querySelectorAll(".Card");
+        var last = cards[cards.length- 1];
+
+        console.log("lastItem")
+        console.log(last)
+        lastItemObserver.observe(last);
+    }else{
+        lastItemObserver.disconnect()  // destroy observer
+        alert("Todos los productos Obtenidos");
+        localStorage.removeItem(PAGINATION);
+    }
+}
+
+const getData = async api => {
+
+  let paginationStr = localStorage.getItem(PAGINATION);
+  let pagination;
+  if(paginationStr == undefined || paginationStr == 0){
+    pagination = 5;
+  }else{
+    pagination = parseInt( paginationStr );
+    pagination += 10
+  }
+
+  const limit = 10
+  await fetch(api +  `?offset=${pagination}&limit=${limit}`)
     .then(response => response.json())
     .then(response => {
+      localStorage.setItem(PAGINATION, pagination);
       let products = response;
+      let newSection = document.createElement('section');
       let output = products.map(product => {
-        // template
+          productElement = getProductCardElement(product)
+          newSection.appendChild(productElement);
       });
-      let newItem = document.createElement('section');
-      newItem.classList.add('Item');
-      newItem.innerHTML = output;
-      $app.appendChild(newItem);
+      newSection.classList.add('Items');
+      $app.appendChild(newSection);
+      checkIfThereAreNoMoreProducts(products)
     })
     .catch(error => console.log(error));
 }
 
-const loadData = () => {
-  getData(API);
+const loadData = async () => {
+  await getData(API);
 }
 
-const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
-}, {
-  rootMargin: '0px 0px 100% 0px',
+const lastItemObserver = new IntersectionObserver(
+    async entries => {
+        const lastItem = entries[0]
+        if(!lastItem.isIntersecting) return
+        lastItemObserver.unobserve(lastItem.target);
+        loadData();
+   },
+   {
+  rootMargin: "0px 0px 0px 0px",
+  threshold: 0.9,
 });
 
-intersectionObserver.observe($observe);
+loadData()