From 505d3a256e3d3ef419ab697de81c279698947959 Mon Sep 17 00:00:00 2001
From: yfsanchez <yfsanchez@gmail.com>
Date: Sun, 12 Jun 2022 23:30:51 -0300
Subject: [PATCH 1/2] primer reto

---
 package-lock.json |  8 +++---
 src/index.js      | 71 +++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 66 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a9762c5a..0091cca1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,18 @@
 {
-  "name": "escuelajs-reto-05",
+  "name": "js-challenge",
   "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "escuelajs-reto-05",
+      "name": "js-challenge",
       "version": "1.0.0",
-      "license": "ISC",
+      "license": "MIT",
       "dependencies": {
         "cypress": "10.0.1"
       },
       "devDependencies": {
-        "live-server": "^1.2.2"
+        "live-server": "1.2.2"
       }
     },
     "node_modules/@colors/colors": {
diff --git a/src/index.js b/src/index.js
index eb2631c2..39af149b 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,67 @@
 const $app = document.getElementById('app');
 const $observe = document.getElementById('observe');
 const API = 'https://api.escuelajs.co/api/v1/products';
+const API_5TO10 = (init,limit) =>`https://api.escuelajs.co/api/v1/products?offset=${init}&limit=${limit}`;
 
-const getData = api => {
+console.log('test');
+
+const isIntersecting = (entry) => {
+  return entry.isIntersecting
+}
+const accion = () => {
+  console.log('hola.');
+}
+const intersectionObserver = new IntersectionObserver(entries => {
+  // logic...
+  entries
+    .filter(isIntersecting)
+    .forEach(accion)
+}, {
+  rootMargin: '0px 0px 100% 0px'
+});
+const registerItem = (item) => {
+  intersectionObserver.observe(item)
+};
+
+const getData = (api) => {
+  fetch(api)
+    .then(response => response.json())
+    .then(response => {
+      
+      //console.log(response);
+
+      let products = response;
+      let output = products.map(product => {
+        
+        return '<div style ="border:solid">'+ product.title +'</div>';
+        
+      });
+      let newItem = document.createElement('section');
+      newItem.classList.add('Item');
+      newItem.innerHTML = output;
+      $app.appendChild(newItem);
+      registerItem(newItem);
+    })
+    .catch(error => console.log(error));
+}
+
+const getDataInit5To10 = (api) => {
   fetch(api)
     .then(response => response.json())
     .then(response => {
+      
+      //console.log(response);
+
       let products = response;
       let output = products.map(product => {
-        // template
+        
+        return '<div style ="border:solid">'+ 
+        '<span>'+ product.id + '</span><br>'+
+        '<span>'+ product.title + '</span><br>'+
+        '<span>'+ product.price + '</span><br>'+
+        '<span>'+ product.description + '</span><br>'+
+        '<span>'+ product.category + '</span>'+
+        '</div>';
       });
       let newItem = document.createElement('section');
       newItem.classList.add('Item');
@@ -19,13 +72,13 @@ const getData = api => {
 }
 
 const loadData = () => {
-  getData(API);
+  //getData(API);
+  getDataInit5To10(API_5TO10(5,100));
+  localStorage.pagination = 5;
 }
 
-const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
-}, {
-  rootMargin: '0px 0px 100% 0px',
-});
 
-intersectionObserver.observe($observe);
+
+//intersectionObserver.observe($app);
+
+loadData();

From 153cc252d0be7d5b8b22a0c95a84a43d6bce2cde Mon Sep 17 00:00:00 2001
From: yfsanchez <yfsanchez@gmail.com>
Date: Sun, 12 Jun 2022 23:44:56 -0300
Subject: [PATCH 2/2] reto segundo

---
 src/index.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/index.js b/src/index.js
index 39af149b..7e538b2f 100755
--- a/src/index.js
+++ b/src/index.js
@@ -55,13 +55,13 @@ const getDataInit5To10 = (api) => {
       let products = response;
       let output = products.map(product => {
         
-        return '<div style ="border:solid">'+ 
-        '<span>'+ product.id + '</span><br>'+
-        '<span>'+ product.title + '</span><br>'+
-        '<span>'+ product.price + '</span><br>'+
-        '<span>'+ product.description + '</span><br>'+
-        '<span>'+ product.category + '</span>'+
-        '</div>';
+        return  '<article class="Card">'+
+                '<img src="'+ product.images[0]+'"/>'+
+                '<h2>' +
+                product.title +
+                '<small>$ '+ product.price + '</small>'+
+                '</h2>'+
+                '</article>';
       });
       let newItem = document.createElement('section');
       newItem.classList.add('Item');
@@ -73,7 +73,7 @@ const getDataInit5To10 = (api) => {
 
 const loadData = () => {
   //getData(API);
-  getDataInit5To10(API_5TO10(5,100));
+  getDataInit5To10(API_5TO10(5,10));
   localStorage.pagination = 5;
 }