diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
index ddfff263..f3df0444 100644
--- a/PULL_REQUEST_TEMPLATE.md
+++ b/PULL_REQUEST_TEMPLATE.md
@@ -1,15 +1,17 @@
## DESCRIPTION
-Solución al reto:
+Solución al reto:
-Nombre:
-Usuario Platzi:
-Correo Electronico:
+Nombre: María Agustina Cassi
+Usuario Platzi: tinicassi
+Correo Electronico: m.agustina.cassi@gmail.com
## Reto:
-- [ ] Primer problema
-- [ ] Segundo problema
-- [ ] Tercer problema
-- [ ] Cuarto Problema
-- [ ] Quinto Problema
+- [💚] Primer problema
+- [💚] Segundo problema
+- [💚] Tercer problema
+- [💚] Cuarto Problema
+- [💚] Quinto Problema
+
+Gracias por la oportunidad Platzi, los quiero!!!!
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/package.json b/package.json
index ed1a7bea..b288e653 100755
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"main": "index.js",
"scripts": {
"start": "live-server --open=public --entry-file=index.html",
- "e2e": "cypress open"
+ "e2e": "cypress open",
},
"repository": {
"type": "git",
diff --git a/public/index.html b/public/index.html
index 5f8fbe0d..65c00a8a 100755
--- a/public/index.html
+++ b/public/index.html
@@ -11,7 +11,8 @@
<body>
<div class="Main">
- <h1>PlatziStore</h1>
+ <h1>Platzi Store 💚</h1>
+ <p>Somos un comercio en línea con una gran cantidad de productos a comercializar. #NuncaParesDeAprender</p>
<div id="app"></div>
<div id="observe"></div>
</div>
diff --git a/public/styles.css b/public/styles.css
index ada53a1a..c75eb18a 100755
--- a/public/styles.css
+++ b/public/styles.css
@@ -32,13 +32,13 @@ body {
animation-name: fade;
}
-.Card img {
+.Card-img {
width: 100%;
height: auto;
border-radius: 5px 5px 0 0;
}
-.Card h2 {
+.Card-h2 {
font-size: 18px;
font-weight: 300;
padding: 5px 10px;
diff --git a/src/index.js b/src/index.js
index eb2631c2..59ace022 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,31 +1,65 @@
-const $app = document.getElementById('app');
-const $observe = document.getElementById('observe');
-const API = 'https://api.escuelajs.co/api/v1/products';
+const $app = document.getElementById("app");
+const $observe = document.getElementById("observe");
+const API = "https://api.escuelajs.co/api/v1/products";
-const getData = api => {
- fetch(api)
- .then(response => response.json())
- .then(response => {
+const limit = 10;
+
+window.addEventListener("beforeunload", ()=> {
+ localStorage.removeItem("pagination")
+})
+
+const getData = (api, offset, limit) => {
+ const endpoint = `${API}?offset=${offset}&limit=${limit}`;
+ fetch(endpoint)
+ .then((response) => response.json())
+ .then((response) => {
let products = response;
+ if(products.length > 0){
let output = products.map(product => {
- // template
- });
- let newItem = document.createElement('section');
- newItem.classList.add('Item');
- newItem.innerHTML = output;
+ return `<article class="Card">
+ <img class="Card-img" src=${product.images[0]} alt=${product.title}/>
+ <h2 class="Card-h2">
+ ${product.title}
+ <small>$ ${product.price}</small>
+ </h2>
+ </article>`;
+ });
+ let newItem = document.createElement("section");
+ newItem.classList.add("Items");
+ newItem.innerHTML = output.join("");
$app.appendChild(newItem);
+ }else{
+ let finalMessage = document.createElement("p")
+ finalMessage.innerText = "Todos los productos obtenidos 📦"
+ $app.appendChild(finalMessage)
+ intersectionObserver.unobserve($observe)
+ }
})
- .catch(error => console.log(error));
-}
+ .catch((error) => console.error(error));
+};
-const loadData = () => {
- getData(API);
-}
+const loadData = async () => {
+ if(!localStorage.getItem("pagination")){
+ let pagination = await localStorage.setItem("pagination", 5)
+ let obtainData = await getData(API, localStorage.getItem("pagination"), limit)
+ }else{
+ let offset = await parseInt(localStorage.getItem("pagination")) + limit;
+ let changeStorage = await localStorage.setItem("pagination", offset)
+ let obtainData = await getData(API, localStorage.getItem("pagination"), limit)
+ }
+};
-const intersectionObserver = new IntersectionObserver(entries => {
- // logic...
-}, {
- rootMargin: '0px 0px 100% 0px',
-});
+const intersectionObserver = new IntersectionObserver(
+ (entries) => {
+ entries.forEach(entry => {
+ if(entry.intersectionRatio > 0){
+ loadData()
+ }
+ })
+ },
+ {
+ rootMargin: "0px 0px 100% 0px",
+ }
+);
intersectionObserver.observe($observe);