diff --git a/src/data/dataset.js b/src/data/dataset.js index f04982c..cc2a13f 100644 --- a/src/data/dataset.js +++ b/src/data/dataset.js @@ -58,7 +58,7 @@ export default [ "origen": "Italia", "tiempoDeExtraccion": "25-35 segundos aproximadamente.", "molienda": "Superfina", - "mainField": "dosis de café espresso y leche emulsionada." + "contenido": "dosis de café espresso y leche emulsionada." }, "extraInfo": { "imageSource": "https://www.bing.com/images/create/design-an-inspiring-and-historically-accurate-imag/6510df7e7bb745f69d67f695441607a8" diff --git a/src/dataFunctions.js b/src/dataFunctions.js index 5de554a..0ae3b31 100644 --- a/src/dataFunctions.js +++ b/src/dataFunctions.js @@ -1,9 +1,39 @@ // Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones. -export const example = () => { - return 'example'; +export const filterData = (data, filterBy, value) => { + let resultadoFiltro = [] + + resultadoFiltro= data.filter((Element)=>{ + return Element.facts[filterBy] === value + + }) + + return resultadoFiltro; }; -export const anotherExample = () => { - return []; + +export const sortData = (data=[], filterBy, asc) => { + const retornoOrdenado = data.sort((a, b) =>{ + //"".toUpperCase(), para colocar un string todo mayuscula, ej abc => ABC + if (asc){ + if (a[filterBy].toUpperCase()>= b[filterBy].toUpperCase()){ + return 1; + } + else { + return -1 + } + + } + else { + if (a[filterBy].toUpperCase()<= b[filterBy].toUpperCase()){ + return 1; + } + else { + return -1 + } + + } + + }) // a - b ascendente, - a + + return retornoOrdenado; }; diff --git a/src/index.html b/src/index.html index 0bf5f3e..47e9202 100644 --- a/src/index.html +++ b/src/index.html @@ -9,11 +9,30 @@
-

Visual Coffee

+

Coffee Break

+
+ + + + + + + +
- + diff --git a/src/main.js b/src/main.js index b5505f2..1c776b0 100644 --- a/src/main.js +++ b/src/main.js @@ -2,7 +2,73 @@ import { renderItems } from './view.js'; import data from './data/dataset.js'; +import { filterData } from './dataFunctions.js'; +import { sortData } from './dataFunctions.js'; +// cree cafes como respaldo de la data y poder jugar y moverla sin romper nada +// ... spread sirve para hacer un "clon" que cree una referencia de lo que es el data +let cafes = [...data] const root = document.getElementById("root"); //crear una const root para asignarle el documento -root.appendChild(renderItems(data)); \ No newline at end of file +root.appendChild(renderItems(data)); + +//console.log(filterData(data, 'origen', 'Italia')) + +const selectPais = document.querySelector('select[name="FiltradoPaís"]') +console.log(selectPais) +selectPais.addEventListener("input", () => { + console.log(selectPais.value) + const paisSeleccionado = selectPais.value + if (paisSeleccionado === "TODOS") { + cafes = data + root.textContent = "" + root.appendChild(renderItems(cafes)); + } + else { + cafes = filterData(data, "origen", paisSeleccionado) + root.textContent = "" + root.appendChild(renderItems(cafes)); + console.log("else") + } + + + +}) +console.log() + +const selectOrden = document.querySelector('select[name="ordenAsc-Desc"]') +selectOrden.addEventListener("input", () => { + const ordenSeleccionado = selectOrden.value + let dataOrdenada + if (ordenSeleccionado === "asc") { + dataOrdenada = sortData(cafes, "name", true) + } else { + dataOrdenada = sortData(cafes, "name", false) + + } + root.textContent = "" + root.appendChild(renderItems(dataOrdenada)) +} +) + +const botonLimpiar = document.querySelector('button[name="Limpiar-Filtros"]') +console.log(botonLimpiar) +botonLimpiar.addEventListener("click", () => { + selectPais.value = "TODOS" + selectOrden.value = "default" + console.log(data) + cafes = data + root.textContent = "" + root.appendChild(renderItems(cafes)); +}) + + +// ir a buscar el elemento(select) con la función querySelector +// añadir un listener al elemento anterior (input) +// en la funcion que gatilla el listener se va a capturar el país seleccionado por el usuario +// llamar a la función filterData, vamos a pasarle el valor que capturamos anteriormente +// el resultado se guardara en una variable +// luego vamos a limpiar el root +// renderizar la data filtrada y pasarla al root con el appendChild + + diff --git a/src/style.css b/src/style.css index 9ba365d..2f4dcc3 100644 --- a/src/style.css +++ b/src/style.css @@ -1,16 +1,20 @@ img{ - width: 280px;; + width: 100%; + height: 100%; + padding: 0%; } ul{ display: flex; flex-wrap: wrap; justify-content: center; + padding-right: 0px; + gap: 35px; } li{ - border: 11px solid darkseagreen; - padding: 15px; - margin: 20px; + border: 3px solid rgb(181, 152, 132); + padding: 0px; + margin-left: 20px; border-radius: 10px; list-style: none; width: 350px; @@ -18,10 +22,78 @@ li{ flex-wrap: nowrap; flex-direction: column; justify-content: center; - align-items: baseline; - background-color: thistle; - + background-color: rgb(255, 245, 232); + overflow: hidden; } body{ - background-color: antiquewhite; + background-color: rgb(255, 245, 232); + margin: 0%; +} + +h1{ + font-family: sans-serif cursive; + text-align: left; + color: rgb(255, 255, 255); + margin: 0%; + padding-left: 60px; + padding-top: 140px; + font-size: 90px; + +} + +header { + background: url("https://lltostadores.com/cdn/shop/files/curso_de_cafe.jpg?v=1617920083"); + display: flex; + justify-content: center; + flex-direction: column; + margin-left: 0%; + margin-right: 0%; + width: 100%; + max-width: 1500; + height: 400px; + border-radius: 0px; + background-size: 100% 100%; + background-repeat: no-repeat; +} + + + +label{ + padding: 30px; + font-family: sans-serif; + color: rgb(89, 55, 11); +} + +dd{ + color: rgb(89, 55, 11); + margin-left: 15px; + margin-bottom: 5px; + margin-top: 5px; +} + +dt{ + color:rgb(29, 8, 8); + margin-left: 5px; + margin-top: 5px; + +} + +select{ + border: px solid rgb(232, 219, 219); + background-color: rgb(255, 255, 255); + color: rgb(66, 44, 16); + margin-top: 30px; + margin-bottom: 30px; + height: 30px; + border-radius: 7px; + +} + +footer{ + color: brown; + font-family: sans-serif; +} + +.cafe-name{ + text-align: center; } diff --git a/test/data.js b/test/data.js index 9b3c238..bdb65dc 100644 --- a/test/data.js +++ b/test/data.js @@ -1,5 +1,20 @@ // Aqui puedes agregar los datos que necesites para tus pruebas // al menos debe tener uno que se llame "data" -export const data = []; +export const data = [ { + "id": "cafe-espresso", + "name": "Espresso", + "shortDescription": "Esta preparación tiene una relación de agua y café 1:2.", + "description": "Se popularizó gracias al desarrollo y perfeccionamiento de la máquina de espresso por parte de Luigi Bezzera en 1901. Esta máquina permitía una extracción rápida y bajo presión del café molido, produciendo una bebida concentrada y sabrosa que se convirtió en un símbolo de la cultura del café italiana. El término proviene del italiano y significa 'exprimido' haciendo referencia al proceso de extracción del café bajo presión. La creación del espresso revolucionó la forma en que se preparaba y consumía el café, dando lugar a una bebida más concentrada y más intensa que las preparaciones de café tradicionales.", + "imageUrl": "/images/espresso.jpg", + "facts": { + "origen": "Italia, Milán", + "tiempoDeExtraccion": "25-35 segundos aproximadamente.", + "molienda": "Superfina", + "contenido": "dosis de café y agua mineralizada." + }, + "extraInfo": { + "imageSource": "img.jpg/espresso.jpg" + } +}, ];