├── .gitignore ├── LICENSE ├── README.md ├── img ├── camba.png ├── cascade.png ├── cassels.png ├── lost-abbey.png ├── mira.png ├── prairie-artisian.png ├── prairie.png ├── redrice.png ├── topa.png └── votus.png ├── products.json └── svg ├── arrow-right.svg ├── cart.svg ├── close.svg ├── filters.svg ├── instagram.svg ├── intercom.svg ├── logo.svg ├── menu.svg ├── phone.svg └── search.svg /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 axiacore 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Prueba técnica frontend 2 | Prueba técnica que se realiza a los candidatos al cargo de Frontend Developer. 3 | 4 | ### Objetivo 5 | Realizar la maquetación (HTML y CSS) y realizar la funcionalidad de filtros en Javascript del siguiente prototipo 6 | 7 | [Ver prototipo](https://www.figma.com/proto/iAtVRRkGIwqbbz2LGApCtY/Frontend-Test?node-id=73%3A303&viewport=-555%2C2051%2C1.1058835983276367&scaling=scale-down "Prototipo") 8 | 9 | [Ver archivo de diseño](https://www.figma.com/file/iAtVRRkGIwqbbz2LGApCtY/Frontend-Test?node-id=0%3A1 "Archivo de diseño") 10 | 11 | ### Funcionamiento de filtros 12 | Tener en cuenta los siguientes requerimientos para realizar la funcionalidad de los filtros: 13 | * Al hacer clic en el botón de filtrar se despliega un modal con las opciones para filtrar 14 | * Se pueden seleccionar varias opciones 15 | * Al seleccionar una se activa el botón de limpiar y se muestra el número de opciones seleccionadas en el botón de filtrar 16 | * Al hace clic en el botón de filtrar se cierra el modal y se muestran los productos que cumplen con los filtros seleccionados 17 | * Al hacer clic en el botón de limpiar quita las opciones seleccionados del formulario de filtros y carga el listado con todas las opciones 18 | * Son tres opciones de filtro: ```Rubia (id=1)```, ```Morena (id=2)``` y ```Roja (id=3)``` 19 | 20 | ### Requisitos técnicos 21 | * Usar sass para crear los estilos, compilar los archivos sass a css localmente y agregarlos al proyecto. (solo se revisan los archivos sass). 22 | * El Js debe ser escrito en ES6. Y debe contruir una clase Js para el funcionamiento de los filtros. (No se debe usar ningún framework para Js como Jquery u otros) 23 | * Para la construcción del listado de los productos usar el archivo ```products.json``` que esta en este repositorio, usando la libreria [Handlebars](https://handlebarsjs.com/ "Ir a Handlebars"). 24 | * Para usar librerias de terceros usar [CDNJS](https://cdnjs.com/ "Ir a CDNJS"). 25 | * Usar HTML5 y CSS3. 26 | * Puede usar cualquier framework frontend para apoyarse en la maquetación. 27 | 28 | ### Responsive 29 | El prototipo dado esta diseñado en mobile, a pesar de no tener la versión desktop debe ser responsive. Ej: en pantallas desktop el grid de productos puede cambiar a 4 columnas. 30 | 31 | ### Recursos 32 | * En la carpeta ```img``` encuentra las imagenes de los productos. 33 | * En la carpeta ```svg``` encuentra las iconos. 34 | 35 | ### Bonus 36 | Al realizar uno o todos los puntos siguientes son puntos extras al calificar el resultado de la prueba: 37 | * Si se recarga la página y se tenian filtros aplicados, estos se deben de conservar. 38 | -------------------------------------------------------------------------------- /img/camba.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axiacore/frontend-test/47c6124abd555c5c89f9a5c3153ccd8912ed96f1/img/camba.png -------------------------------------------------------------------------------- /img/cascade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axiacore/frontend-test/47c6124abd555c5c89f9a5c3153ccd8912ed96f1/img/cascade.png -------------------------------------------------------------------------------- /img/cassels.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axiacore/frontend-test/47c6124abd555c5c89f9a5c3153ccd8912ed96f1/img/cassels.png -------------------------------------------------------------------------------- /img/lost-abbey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axiacore/frontend-test/47c6124abd555c5c89f9a5c3153ccd8912ed96f1/img/lost-abbey.png -------------------------------------------------------------------------------- /img/mira.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axiacore/frontend-test/47c6124abd555c5c89f9a5c3153ccd8912ed96f1/img/mira.png -------------------------------------------------------------------------------- /img/prairie-artisian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axiacore/frontend-test/47c6124abd555c5c89f9a5c3153ccd8912ed96f1/img/prairie-artisian.png -------------------------------------------------------------------------------- /img/prairie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axiacore/frontend-test/47c6124abd555c5c89f9a5c3153ccd8912ed96f1/img/prairie.png -------------------------------------------------------------------------------- /img/redrice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axiacore/frontend-test/47c6124abd555c5c89f9a5c3153ccd8912ed96f1/img/redrice.png -------------------------------------------------------------------------------- /img/topa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axiacore/frontend-test/47c6124abd555c5c89f9a5c3153ccd8912ed96f1/img/topa.png -------------------------------------------------------------------------------- /img/votus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axiacore/frontend-test/47c6124abd555c5c89f9a5c3153ccd8912ed96f1/img/votus.png -------------------------------------------------------------------------------- /products.json: -------------------------------------------------------------------------------- 1 | { 2 | "products": [ 3 | { 4 | "name": "Cassels Milk Stou", 5 | "description": "Cassels & Sons Brewing. Cerveza porter y stout.", 6 | "price": 75000, 7 | "img": "cassels.png", 8 | "filterId": 1 9 | }, 10 | { 11 | "name": "Camba Pale Ale", 12 | "description": "La Souche Franc-Bois d’hiver. Cerveza pale.", 13 | "price": 85300, 14 | "img": "camba.png", 15 | "filterId": 2 16 | }, 17 | { 18 | "name": "Votus Nº 001", 19 | "description": "India Pale Ale del año 2019. Nº 001 Red IPA.", 20 | "price": 75000, 21 | "img": "votus.png", 22 | "filterId": 3 23 | }, 24 | { 25 | "name": "Prairie Artisian", 26 | "description": "Ales Prairie Noir Whiskey Barrel Aged Imperial Stout 12oz.", 27 | "price": 85300, 28 | "img": "prairie-artisian.png", 29 | "filterId": 1 30 | }, 31 | { 32 | "name": "Lost Abbey", 33 | "description": "The Lost Abbey Citrus Sin American Wild Ale 750ml.", 34 | "price": 75000, 35 | "img": "lost-abbey.png", 36 | "filterId": 2 37 | }, 38 | { 39 | "name": "Prairie", 40 | "description": "Prairie Artisa Ales Paradise Imperial Stout 12oz.", 41 | "price": 85300, 42 | "img": "prairie.png", 43 | "filterId": 3 44 | }, 45 | { 46 | "name": "Redrice", 47 | "description": "Hitachino Nest Beer Red Rice Ale 330ml.", 48 | "price": 85300, 49 | "img": "redrice.png", 50 | "filterId": 1 51 | }, 52 | { 53 | "name": "Cascade", 54 | "description": "Cascade Brewing 2017 Brunch Line BA NORTHWEST Sour Ale.", 55 | "price": 175000, 56 | "img": "cascade.png", 57 | "filterId": 2 58 | }, 59 | { 60 | "name": "Topa Topa", 61 | "description": "Topa Topa BREWING CO. 5th Year Anniversary clear Ipa 16oz.", 62 | "price": 85300, 63 | "img": "topa.png", 64 | "filterId": 3 65 | }, 66 | { 67 | "name": "Mira Brune Nº 6", 68 | "description": "Brown Ale, Brown Mira American Style.", 69 | "price": 375000, 70 | "img": "mira.png", 71 | "filterId": 1 72 | } 73 | ] 74 | } -------------------------------------------------------------------------------- /svg/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /svg/cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /svg/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /svg/filters.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /svg/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /svg/intercom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /svg/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /svg/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /svg/phone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /svg/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | --------------------------------------------------------------------------------