From da6119b0a66565a092130d93533eb267c6b2daf8 Mon Sep 17 00:00:00 2001
From: Carlos Andres Villegas Gomez <cvillegas@Tests-MacBook-Pro.local>
Date: Sun, 12 Jun 2022 16:20:48 +0100
Subject: [PATCH] Proyecto terminado
---
package-lock.json | 8 ++++----
public/index.html | 3 ++-
src/index.js | 34 ++++++++++++++++++++++++++++------
3 files changed, 34 insertions(+), 11 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/public/index.html b/public/index.html
index 5f8fbe0d..ca65d044 100755
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,8 @@
<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>
+ <title>PlatziStore</title>
+ <meta name="description" content="Esta es la última guía de productos disponibles en Platzi." />
<link type="text/css" href="styles.css" rel="stylesheet">
</head>
diff --git a/src/index.js b/src/index.js
index eb2631c2..d595e78a 100755
--- a/src/index.js
+++ b/src/index.js
@@ -2,14 +2,30 @@ const $app = document.getElementById('app');
const $observe = document.getElementById('observe');
const API = 'https://api.escuelajs.co/api/v1/products';
+
+let ofsset = 5;
+const LIMIT = 10;
+window.localStorage.setItem('pagination', 0);
+
const getData = api => {
fetch(api)
.then(response => response.json())
.then(response => {
let products = response;
- let output = products.map(product => {
- // template
- });
+
+ if (products.length == 0) {
+ alert("Todos los productos Obtenidos");
+ intersectionObserver.disconnect();
+ }
+
+ let output = products.map((product) => {
+ return (`
+ <article class="Card">
+ <img src="${product.category.image}" />
+ <h2>Producto <small>${product.price}</small></h2>
+ </article>
+ `)
+ }).join('');
let newItem = document.createElement('section');
newItem.classList.add('Item');
newItem.innerHTML = output;
@@ -18,12 +34,18 @@ const getData = api => {
.catch(error => console.log(error));
}
-const loadData = () => {
- getData(API);
+const loadData = async () => {
+ offset = (LIMIT * parseInt(window.localStorage.getItem('pagination'))) - 5;
+ await getData(`${API}?offset=${offset}&limit=${LIMIT}`);
}
const intersectionObserver = new IntersectionObserver(entries => {
- // logic...
+ entries.forEach(entry => {
+ if (entry.intersectionRatio > 0) {
+ window.localStorage.setItem('pagination', parseInt(window.localStorage.getItem('pagination')) + 1);
+ loadData();
+ }
+ });
}, {
rootMargin: '0px 0px 100% 0px',
});