platzi · sass3r · Jun 13, 2022 · Jun 13, 2022
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
@@ -1,15 +1,19 @@
 ## DESCRIPTION
 
-Solución al reto:
+Solución al reto: Ethereum Developer Program
 
-Nombre:
-Usuario Platzi:
-Correo Electronico:
+Nombre: Rafael Ramirez
+
+Usuario Platzi: rafael116
+
+Correo Electronico: [email protected]
 
 ## Reto:
 
-- [ ] Primer problema
-- [ ] Segundo problema
-- [ ] Tercer problema
-- [ ] Cuarto Problema
-- [ ] Quinto Problema
+- [ :heavy_check_mark: ] Primer problema
+- [ :heavy_check_mark: ] Segundo problema
+- [ :heavy_check_mark: ] Tercer problema
+- [ :heavy_check_mark: ] Cuarto Problema
+- [ :heavy_check_mark: ] Quinto Problema
+
+[ :heavy_check_mark: ] Bonus => https://sass3r.github.io/js-challenge/
diff --git a/build/index.html b/build/index.html
@@ -0,0 +1,23 @@
+<!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="Platzi Store provides a large selection of modern products for sale.">
+  <title>PlatziStore</title>
+  <link type="text/css" href="static/css/styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="Main">
+    <h1>PlatziStore</h1>
+    <div id="app"></div>
+    <div id="observe"></div>
+  </div>
+</body>
+
+<script type="text/javascript" src="static/js/index.js"></script>
+
+</html>
diff --git a/build/static/css/styles.css b/build/static/css/styles.css
@@ -0,0 +1,68 @@
+@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, 1068px);
+  display: grid;
+  justify-content: center;
+}
+
+.Items {
+  grid-template-columns: repeat(3, 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;
+  width: auto;
+  height: auto;
+  max-width: 400px;
+  max-height: 500px;
+}
+
+.Card img {
+  width: 100%;
+  height: auto;
+  border-radius: 5px 5px 0 0;
+}
+
+.Card h2 {
+  font-size: 18px;
+  font-weight: bold;
+  padding: 5px 10px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.Card .product-category {
+  padding: 5px 10px;
+}
+
+.Card .product-description {
+  padding: 5px 10px;
+}
+
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/build/static/js/index.js b/build/static/js/index.js
@@ -0,0 +1,116 @@
+const $app = document.getElementById('app');
+const $observe = document.getElementById('observe');
+const API = 'https://api.escuelajs.co/api/v1/products';
+let nextPageLoad = false;
+
+const getData = api => {
+  return new Promise((resolve,reject) => {
+    fetch(api)
+      .then(response => response.json())
+      .then(response => {
+        let products = response;
+        let output = products.map(product => {
+          // template
+          return buildProductTemplate(product);
+        });
+        if(products.length == 0){
+          output = [];
+          let message = document.createElement('p');
+          message.innerHTML = "Todos los productos Obtenidos";
+          output.push(message);
+          intersectionObserver.unobserve($observe);
+        }
+        let productsDiv = document.createElement('div');
+        productsDiv.classList.add('Items');
+
+        output.forEach(element => {
+          let newItem = document.createElement('section');
+          newItem.classList.add('Item');
+          newItem.appendChild(element);
+          productsDiv.appendChild(newItem);
+        });
+        $app.appendChild(productsDiv);
+        resolve();
+      })
+      .catch(error => {
+        reject(error);
+      });
+  });
+}
+
+const loadData = async (api) => {
+  await getData(api);
+}
+
+const buildProductTemplate = (product) => {
+  let articleElement = document.createElement('article');
+  articleElement.classList.add('Card');
+  let descriptionDiv = document.createElement('div');
+  descriptionDiv.classList.add('product-description');
+  let categoryDiv = document.createElement('div');
+  categoryDiv.classList.add('product-category');
+
+  let title = document.createElement('h2');
+  let img = document.createElement('img');
+  let price = document.createElement('small');
+  let description = document.createElement('p');
+  let category = document.createElement('span');
+
+  let productCategory = product.category;
+  let productDescription = product.description;
+  title.innerHTML = product.title;
+  img.setAttribute('src',product.images[0]);
+  price.innerHTML = product.price + "$";
+  title.appendChild(price);
+  description.innerHTML = productDescription.length > 15 ? productDescription.slice(0,45) + "..." : productDescription;
+  category.innerHTML = "Category: " + productCategory.name;
+
+  categoryDiv.appendChild(category);
+  descriptionDiv.appendChild(description);
+
+  articleElement.appendChild(img);
+  articleElement.appendChild(title);
+  articleElement.appendChild(categoryDiv);
+  articleElement.appendChild(descriptionDiv);
+
+  return articleElement;
+}
+
+const setStorage = (pagination, limit) =>{
+  localStorage.setItem("pagination", pagination);
+  localStorage.setItem("limit", limit);
+}
+
+const nextPage = () =>{
+  let previousOffset = localStorage.getItem("pagination");
+  let previousLimit = localStorage.getItem("limit");
+  let newOffset = parseInt(previousOffset) + parseInt(previousLimit);
+  setStorage(newOffset, previousLimit);
+}
+
+const intersectionObserver = new IntersectionObserver(entries => {
+  // logic...
+  entries.forEach(entry => {
+    if(nextPageLoad) {
+      nextPage();
+    }
+    if(entry.intersectionRatio > 0){
+      let offset = localStorage.getItem("pagination");
+      let limit = localStorage.getItem("limit");
+      let apiPagination = API + "?offset=" + offset + "&limit=" + limit;
+      loadData(apiPagination);
+      nextPageLoad = false;
+    }
+    if(entry.intersectionRatio == 0){ 
+      nextPageLoad = true;
+    }
+  });
+}, {
+  rootMargin: "0px 0px 100% 0px",
+});
+
+setStorage(5,10);
+window.onbeforeunload = () => {
+  setStorage(5,10);
+}
+intersectionObserver.observe($observe);
diff --git 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>
+  <meta name="description" content="Platzi Store provides a large selection of modern products for sale.">
+  <title>PlatziStore</title>
   <link type="text/css" href="styles.css" rel="stylesheet">
 </head>
 
@@ -19,4 +20,4 @@ <h1>PlatziStore</h1>
 
 <script type="text/javascript" src="../src/index.js"></script>
 
-</html>
+</html>
diff --git a/public/styles.css b/public/styles.css
@@ -9,13 +9,13 @@ body {
 
 .Main {
   padding: 10px;
-  grid-template-columns: minmax(auto, 768px);
+  grid-template-columns: minmax(auto, 1068px);
   display: grid;
   justify-content: center;
 }
 
 .Items {
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   grid-gap: 1.5rem;
   grid-row-gap: 1.5em;
   display: grid;
@@ -30,6 +30,10 @@ body {
   display: block;
   animation-duration: 4s;
   animation-name: fade;
+  width: auto;
+  height: auto;
+  max-width: 400px;
+  max-height: 500px;
 }
 
 .Card img {
@@ -40,12 +44,20 @@ body {
 
 .Card h2 {
   font-size: 18px;
-  font-weight: 300;
+  font-weight: bold;
   padding: 5px 10px;
   display: flex;
   justify-content: space-between;
 }
 
+.Card .product-category {
+  padding: 5px 10px;
+}
+
+.Card .product-description {
+  padding: 5px 10px;
+}
+
 @keyframes fade {
   from {
     opacity: 0;