diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
new file mode 100644
index 000000000..de52aa8a6
--- /dev/null
+++ b/.github/workflows/static.yml
@@ -0,0 +1,42 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+ # Runs on pushes targeting the default branch
+ push:
+ branches: ["master"]
+
+ # Allows you to run this workflow manually from the Actions tab
+ workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+ group: "pages"
+ cancel-in-progress: true
+
+jobs:
+ # Single deploy job since we're just deploying
+ deploy:
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v3
+ - name: Setup Pages
+ uses: actions/configure-pages@v2
+ - name: Upload artifact
+ uses: actions/upload-pages-artifact@v1
+ with:
+ # Upload entire repository
+ path: '.'
+ - name: Deploy to GitHub Pages
+ id: deployment
+ uses: actions/deploy-pages@v1
diff --git a/README.md b/README.md
index 9cc1f9640..3117471f7 100644
--- a/README.md
+++ b/README.md
@@ -1,79 +1,15 @@
-# Venha ser um desenvolvedor da Digital M3
+# Apresentação
+Olá, me chamo George e esse é o meu projeto na participação do processo seletivo da Agência Digital M3. Utilizei 8 dos 10 dias de prazo que recebi para a criação desse projeto e acredito que consegui concluir grande parte dos objetivos estipulados.
-Ola, somos a Agência Digital M3, uma agência voltada para ramo de comercio eletrônico, trabalhamos com implantação, migração, evolução e otmização de e-commerces. Estamos com a sede de desenvolvimento em Nova Friburgo RJ. Mas contratamos pessoas de todo o pais, visto que trabalhamos 100% home office.
-> R. Helena Coutinho, 41
-> Braunes, Nova Friburgo/RJ
-[https://goo.gl/maps/2mWagcctnrGdtFhBA]( https://goo.gl/maps/2mWagcctnrGdtFhBA )
-Estamos procurando Desenvolvedores(as) `Front-end`, com sólidos conhecimentos em HTML, CSS e JS para projetar interfaces e entregar a melhor experiência para os consumidores visando sempre a otimização do código e agilidade no desenvolvimento.
+# Instruções
+Para compilar o código basta:
-## O que procuramos
+Ter nodejs instalado com versão 14 ou mais recente. Desenvolvedor M3
+
+ Blusas
+
+
+ Ordenar por:
+ Ordenar por:
+ Mais recentes
+ Menor preço
+ Maior preço
+
+
+
+
+
+
+
+ Blusas
+
+
+
+
+
+ Filtrar
+
+
+
+ Ordenar
+
+
+
+
Mais recentes
+
Menor preço
+
Maior preço
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ P
+
+
+
+ M
+
+
+
+ G
+
+
+
+ GG
+
+
+
+ U
+
+
+
+ 36
+
+
+ 38
+
+
+
+ 40
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Aplicar
+
+
+ Limpar
+
+
+
+
+
+
+
+
+ Cores
+
+
+
+
+
+
+
+
+
+
+ P
+
+
+
+ M
+
+
+
+ G
+
+
+
+ GG
+
+
+
+ U
+
+
+
+ 36
+
+
+ 38
+
+
+
+ 40
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-Desafio m3
+
diff --git a/src/js/index.js b/src/js/index.js
index d06b8286c..464e09d43 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -1 +1,878 @@
-console.log("Dev m3");
+const fetchProducts = () => {
+ const baseUrl = 'http://localhost:5000/products'
+
+ fetch(baseUrl).then(response => response.json())
+ .then(products => {
+ this.products
+
+
+ function CreateArray(dbArray) {
+
+ const productsCards = dbArray.reduce((acc, dbArray) => {
+
+ if (dbArray.id > 9) {
+
+
+ acc += `
+
+ ${dbArray.name}
+ R$ ${Math.floor(dbArray.price)},00
+ até ${dbArray.parcelamento[0]}x de R$${Math.ceil(dbArray.parcelamento[1])},00
+ Comprar
+
+ `
+ } else {
+ acc += `
+
+ ${dbArray.name}
+ R$ ${Math.floor(dbArray.price)},00
+ até ${dbArray.parcelamento[0]}x de R$${Math.ceil(dbArray.parcelamento[1])},00
+ Comprar
+
+ `
+
+ }
+ return acc
+
+ }, '')
+
+ const main = document.querySelector('.main')
+ main.innerHTML = productsCards
+ }
+ CreateArray(products)
+
+ document.getElementById('priceSort').addEventListener('change', SortArray)
+ function SortArray() {
+ const value = document.getElementById("priceSort").selectedIndex
+
+ if (value === 1) {
+
+ products.sort((a, b) => {
+ if (a.date > b.date) {
+ return -1;
+ if (a.date < b.date) {
+ return 1;
+ }
+ return 0
+ }
+ })
+ return CreateArray(products)
+
+ }
+ if (value === 2) {
+ products.sort((a, b) => {
+ if (a.price < b.price) {
+ return -1;
+ if (a.price > b.price) {
+ return 1;
+ }
+ return 0
+ }
+ })
+ return CreateArray(products)
+
+ }
+ if (value === 3) {
+ products.sort((a, b) => {
+ if (a.price > b.price) {
+ return -1;
+ if (a.price < b.price) {
+ return 1;
+ }
+ return 0
+ }
+ })
+ return CreateArray(products)
+ }
+ }
+
+
+ document.getElementById("mostRecentMobile").addEventListener('click', SortMostRecent)
+ function SortMostRecent() {
+ products.sort((a, b) => {
+ if (a.date > b.date) {
+ return -1;
+ if (a.date > b.date) {
+ return 1;
+ }
+ return 0
+ }
+ })
+ return CreateArray(products)
+ }
+
+
+ document.getElementById("lowestPriceMobile").addEventListener('click', SortLowestPrice)
+ function SortLowestPrice() {
+ products.sort((a, b) => {
+ if (a.price < b.price) {
+ return -1;
+ if (a.price > b.price) {
+ return 1;
+ }
+ return 0
+ }
+ })
+ return CreateArray(products)
+ }
+
+
+ document.getElementById("biggestPriceMobile").addEventListener('click', SortBiggestPrice)
+ function SortBiggestPrice() {
+ products.sort((a, b) => {
+ if (a.price > b.price) {
+ return -1;
+ if (a.price < b.price) {
+ return 1;
+ }
+ return 0
+ }
+ })
+ return CreateArray(products)
+ }
+
+
+ document.getElementById('yellow').addEventListener('click', YellowSort)
+ function YellowSort() {
+ function isYellow(value) {
+ if (value.color === "Amarelo") {
+ return value
+ }
+ }
+
+ const newFilter = products.filter(isYellow)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('yellowMobile').addEventListener('click', YellowSortMobile)
+ function YellowSortMobile() {
+ function isYellow(value) {
+ if (value.color === "Amarelo") {
+ return value
+ }
+ }
+
+ const newFilter = products.filter(isYellow)
+ return CreateArray(newFilter)
+
+ }
+
+
+
+ document.getElementById('blue').addEventListener('click', BlueSort)
+ function BlueSort() {
+
+ function isBlue(value) {
+ if (value.color === "Azul") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isBlue)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('blueMobile').addEventListener('click', BlueSortMobile)
+ function BlueSortMobile() {
+
+ function isBlue(value) {
+ if (value.color === "Azul") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isBlue)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('white').addEventListener('click', WhiteSort)
+ function WhiteSort() {
+
+ function isWhite(value) {
+ if (value.color === "Branco") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isWhite)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('whiteMobile').addEventListener('click', WhiteSortMobile)
+ function WhiteSortMobile() {
+
+ function isWhite(value) {
+ if (value.color === "Branco") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isWhite)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('gray').addEventListener('click', GraySort)
+ function GraySort() {
+
+ function isGray(value) {
+ if (value.color === "Cinza") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isGray)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('grayMobile').addEventListener('click', GraySortMobile)
+ function GraySortMobile() {
+
+ function isGray(value) {
+ if (value.color === "Cinza") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isGray)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('orange').addEventListener('click', OrangeSort)
+ function OrangeSort() {
+
+ function isOrange(value) {
+ if (value.color === "Laranja") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isOrange)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('orangeMobile').addEventListener('click', OrangeSortMobile)
+ function OrangeSortMobile() {
+
+ function isOrange(value) {
+ if (value.color === "Laranja") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isOrange)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('green').addEventListener('click', GreenSort)
+ function GreenSort() {
+
+ function isGreen(value) {
+ if (value.color === "Verde") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isGreen)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('greenMobile').addEventListener('click', GreenSortMobile)
+ function GreenSortMobile() {
+
+ function isGreen(value) {
+ if (value.color === "Verde") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isGreen)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('red').addEventListener('click', RedSort)
+ function RedSort() {
+
+ function isRed(value) {
+ if (value.color === "Vermelho") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isRed)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('redMobile').addEventListener('click', RedSortMobile)
+ function RedSortMobile() {
+
+ function isRed(value) {
+ if (value.color === "Vermelho") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isRed)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('black').addEventListener('click', BlackSort)
+ function BlackSort() {
+
+ function isBlack(value) {
+ if (value.color === "Preto") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isBlack)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('blackMobile').addEventListener('click', BlackSortMobile)
+ function BlackSortMobile() {
+
+ function isBlack(value) {
+ if (value.color === "Preto") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isBlack)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('pink').addEventListener('click', PinkSort)
+ function PinkSort() {
+
+ function isPink(value) {
+ if (value.color === "Rosa") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isPink)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('pinkMobile').addEventListener('click', PinkSortMobile)
+ function PinkSortMobile() {
+
+ function isPink(value) {
+ if (value.color === "Rosa") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isPink)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('wine').addEventListener('click', WineSort)
+ function WineSort() {
+
+ function isWine(value) {
+ if (value.color === "Vinho") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isWine)
+ return CreateArray(newFilter)
+
+ }
+
+
+ document.getElementById('wineMobile').addEventListener('click', WineSortMobile)
+ function WineSortMobile() {
+
+ function isWine(value) {
+ if (value.color === "Vinho") {
+ return value
+ }
+ }
+ const newFilter = products.filter(isWine)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('50').addEventListener('click', MoneySort)
+ function MoneySort() {
+
+ function isPrice50(value) {
+ if (value.price <= 50) {
+ return value
+ }
+ }
+ const newFilter = products.filter(isPrice50)
+ return CreateArray(newFilter)
+
+ }
+
+
+
+ document.getElementById('50Mobile').addEventListener('click', MoneySortMobile)
+ function MoneySortMobile() {
+
+ function isPrice50(value) {
+ if (value.price <= 50) {
+ return value
+ }
+ }
+ const newFilter = products.filter(isPrice50)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('150').addEventListener('click', MoneySort151)
+ function MoneySort151() {
+
+ function isPrice151(value) {
+ if (value.price > 50 && value.price <= 150) {
+ return value
+ }
+ }
+ const newFilter = products.filter(isPrice151)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('150Mobile').addEventListener('click', MoneySort151Mobile)
+ function MoneySort151Mobile() {
+
+ function isPrice151(value) {
+ if (value.price > 50 && value.price <= 150) {
+ return value
+ }
+ }
+ const newFilter = products.filter(isPrice151)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('300').addEventListener('click', MoneySort300)
+ function MoneySort300() {
+
+ function isPrice300(value) {
+ if (value.price > 150 && value.price <= 300) {
+ return value
+ }
+ }
+ const newFilter = products.filter(isPrice300)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('300Mobile').addEventListener('click', MoneySort300Mobile)
+ function MoneySort300Mobile() {
+
+ function isPrice300(value) {
+ if (value.price > 150 && value.price <= 300) {
+ return value
+ }
+ }
+ const newFilter = products.filter(isPrice300)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('500').addEventListener('click', MoneySort500)
+ function MoneySort500() {
+
+ function isPrice500(value) {
+ if (value.price > 300 && value.price <= 500) {
+ return value
+ }
+ }
+ const newFilter = products.filter(isPrice500)
+ return CreateArray(newFilter)
+ }
+
+ document.getElementById('500Mobile').addEventListener('click', MoneySort500Mobile)
+ function MoneySort500Mobile() {
+
+ function isPrice500(value) {
+ if (value.price > 300 && value.price <= 500) {
+ return value
+ }
+ }
+ const newFilter = products.filter(isPrice500)
+ return CreateArray(newFilter)
+ }
+
+ document.getElementById('moreThan500').addEventListener('click', MoneySortMoreThan500)
+ function MoneySortMoreThan500() {
+
+ function isMoreThan500(value) {
+ if (value.price > 500) {
+ return value
+ }
+ }
+ const newFilter = products.filter(isMoreThan500)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('moreThan500Mobile').addEventListener('click', MoneySortMoreThan500Mobile)
+ function MoneySortMoreThan500Mobile() {
+
+ function isMoreThan500(value) {
+ if (value.price > 500) {
+ return value
+ }
+ }
+ const newFilter = products.filter(isMoreThan500)
+ return CreateArray(newFilter)
+
+ }
+
+ document.getElementById('p').addEventListener('click', SizeSortP)
+ function SizeSortP() {
+
+ function isP(value) {
+ const teste = value.size
+ if (teste.includes('P')) {
+ return teste
+ }
+ }
+ const newCloths = products.filter(isP)
+ return CreateArray(newCloths)
+ }
+
+
+
+ document.getElementById('pMobile').addEventListener('click', SizeSortPMobile)
+ function SizeSortPMobile() {
+
+ function isP(value) {
+ const teste = value.size
+ if (teste.includes('P')) {
+ return teste
+ }
+ }
+ const newCloths = products.filter(isP)
+ return CreateArray(newCloths)
+ }
+
+
+ document.getElementById('m').addEventListener('click', SizeSortM)
+ function SizeSortM() {
+
+ function isM(value) {
+ const teste = value.size
+ if (teste.includes('M')) {
+ return teste
+ }
+ }
+ const newCloths = products.filter(isM)
+ return CreateArray(newCloths)
+ }
+
+ document.getElementById('mMobile').addEventListener('click', SizeSortMMobile)
+ function SizeSortMMobile() {
+
+ function isM(value) {
+ const teste = value.size
+ if (teste.includes('M')) {
+ return teste
+ }
+ }
+ const newCloths = products.filter(isM)
+ return CreateArray(newCloths)
+ }
+
+
+
+ document.getElementById('g').addEventListener('click', SizeSortG)
+ function SizeSortG() {
+
+ function isG(value) {
+ const teste = value.size
+ if (teste.includes('G')) {
+ return teste
+ }
+ }
+ const newCloths = products.filter(isG)
+ return CreateArray(newCloths)
+ }
+
+ document.getElementById('gMobile').addEventListener('click', SizeSortGMobile)
+ function SizeSortGMobile() {
+
+ function isG(value) {
+ const teste = value.size
+ if (teste.includes('G')) {
+ return teste
+ }
+ }
+ const newCloths = products.filter(isG)
+ return CreateArray(newCloths)
+ }
+
+
+ document.getElementById('gg').addEventListener('click', SizeSortGG)
+ function SizeSortGG() {
+
+ function isGG(value) {
+ const teste = value.size
+ if (teste.includes('GG')) {
+ return teste
+ }
+ }
+ const newCloths = products.filter(isGG)
+ return CreateArray(newCloths)
+ }
+
+ document.getElementById('ggMobile').addEventListener('click', SizeSortGGMobile)
+ function SizeSortGGMobile() {
+
+ function isGG(value) {
+ const teste = value.size
+ if (teste.includes('GG')) {
+ return teste
+ }
+ }
+ const newCloths = products.filter(isGG)
+ return CreateArray(newCloths)
+ }
+
+
+ document.getElementById('u').addEventListener('click', SizeSortU)
+ function SizeSortU() {
+
+ function isU(value) {
+ const teste = value.size
+ if (teste.includes('U')) {
+ return teste
+ }
+ }
+ const newCloths = products.filter(isU)
+ return CreateArray(newCloths)
+ }
+
+ document.getElementById('uMobile').addEventListener('click', SizeSortUMobile)
+ function SizeSortUMobile() {
+
+ function isU(value) {
+ const teste = value.size
+ if (teste.includes('U')) {
+ return teste
+ }
+ }
+ const newCloths = products.filter(isU)
+ return CreateArray(newCloths)
+ }
+
+ document.getElementById('thirtySix').addEventListener('click', SizeSortThirtySix)
+ function SizeSortThirtySix() {
+
+ function isThirtySix(value) {
+ const teste = value.size
+ if (teste.includes('36')) {
+ return teste
+ }
+ }
+
+ const newCloths = products.filter(isThirtySix)
+ return CreateArray(newCloths)
+ }
+
+
+ document.getElementById('thirtySixMobile').addEventListener('click', SizeSortThirtySixMobile)
+ function SizeSortThirtySixMobile() {
+
+ function isThirtySix(value) {
+ const teste = value.size
+ if (teste.includes('36')) {
+ return teste
+ }
+ }
+
+ const newCloths = products.filter(isThirtySix)
+ return CreateArray(newCloths)
+ }
+
+ document.getElementById('thirtyEight').addEventListener('click', SizeSortThirtyEight)
+ function SizeSortThirtyEight() {
+
+ function isThirtyEight(value) {
+ const teste = value.size
+ if (teste.includes('38')) {
+ return teste
+ }
+ }
+
+ const newCloths = products.filter(isThirtyEight)
+ return CreateArray(newCloths)
+ }
+
+
+
+ document.getElementById('thirtyEightMobile').addEventListener('click', SizeSortThirtyEightMobile)
+ function SizeSortThirtyEightMobile() {
+
+ function isThirtyEight(value) {
+ const teste = value.size
+ if (teste.includes('38')) {
+ return teste
+ }
+ }
+
+ const newCloths = products.filter(isThirtyEight)
+ return CreateArray(newCloths)
+ }
+
+ document.getElementById('forty').addEventListener('click', SizeSortForty)
+ function SizeSortForty() {
+
+ function isForty(value) {
+ const teste = value.size
+ if (teste.includes('40')) {
+ return teste
+ }
+ }
+
+ const newCloths = products.filter(isForty)
+ return CreateArray(newCloths)
+ }
+
+
+ document.getElementById('fortyMobile').addEventListener('click', SizeSortFortyMobile)
+ function SizeSortFortyMobile() {
+
+ function isForty(value) {
+ const teste = value.size
+ if (teste.includes('40')) {
+ return teste
+ }
+ }
+
+ const newCloths = products.filter(isForty)
+ return CreateArray(newCloths)
+ }
+
+
+ let count = 1;
+ function BuyItem() {
+ document.getElementById("cartItems").innerHTML = count;
+ ++count;
+ }
+
+ let buyButton = document.getElementsByClassName('buyButton');
+ for (var i = 0; i < buyButton.length; i++) {
+
+ (function (index) {
+ buyButton[i].addEventListener("click", function () {
+
+
+
+ BuyItem()
+
+
+ })
+ })(i);
+ }
+
+ document.getElementById("seeMoreColors").addEventListener('click', ShowColors)
+ function ShowColors() {
+
+ document.querySelectorAll('.form-control2').forEach(function (colors) {
+ const moreColors = document.getElementById("seeMoreColors")
+ colors.style.display = 'flex'
+ if (colors.style.display === 'flex') {
+ moreColors.style.display = 'none'
+ }
+ })
+
+ }
+
+ document.getElementById('loadBtn').addEventListener('click', SelectCards)
+ function SelectCards() {
+ const card = document.querySelectorAll('#cardList').forEach(function (card) {
+ card.style.display = 'block'
+ })
+ }
+
+ document.getElementById('clearFilter').addEventListener('click', ApplyFilter)
+ function ApplyFilter() {
+ onClickQuit()
+ return CreateArray(products)
+ }
+ })
+
+ document.getElementById('quitIcon').addEventListener('click', onClickQuit)
+ function onClickQuit() {
+ onClickFilter()
+
+ }
+ document.getElementById('quitSortIcon').addEventListener('click', onClickSortQuit)
+ function onClickSortQuit() {
+ onClickSort()
+
+ }
+
+
+ document.getElementById('filterMobile').addEventListener('click', onClickFilter)
+ function onClickFilter() {
+ document.getElementById('header').classList.toggle('invisible')
+ document.getElementById('mobileCloth').classList.toggle('invisible')
+ document.getElementById('mainCards').classList.toggle('invisible')
+ document.getElementById('footer').classList.toggle('invisible')
+ document.getElementById('loadBtn').classList.toggle('invisible')
+ document.getElementById('filterMobile').classList.toggle('invisible')
+ document.getElementById('sortMobile').classList.toggle('invisible')
+ document.getElementById('sidebarFilterMobile').classList.toggle('invisible')
+ document.getElementById('navMobile').classList.toggle('invisible')
+
+ ShowColorsMobile()
+ }
+
+ document.getElementById("colorsVectorMobile").addEventListener('click', ShowColorsMobile)
+ function ShowColorsMobile() {
+ document.querySelectorAll('.form-control2').forEach(function (colors) {
+
+ colors.classList.toggle('visible')
+ })
+
+ }
+
+ document.getElementById("SizesVectorMobile").addEventListener('click', ShowSizesMobile)
+ function ShowSizesMobile() {
+ document.getElementById('othSizes').classList.toggle('invisible')
+
+ }
+
+ document.getElementById("PriceVectorMobile").addEventListener('click', ShowPriceMobile)
+ function ShowPriceMobile() {
+ document.getElementById('pricesCheckbox').classList.toggle('invisible')
+
+ }
+
+ document.getElementById('applyFilter').addEventListener('click', ApplyFilter)
+ function ApplyFilter() {
+ onClickQuit()
+ }
+
+
+ document.getElementById('sortMobile').addEventListener('click', onClickSort)
+ function onClickSort() {
+ document.getElementById('header').classList.toggle('invisible')
+ document.getElementById('mobileCloth').classList.toggle('invisible')
+ document.getElementById('mainCards').classList.toggle('invisible')
+ document.getElementById('footer').classList.toggle('invisible')
+ document.getElementById('loadBtn').classList.toggle('invisible')
+ document.getElementById('filterMobile').classList.toggle('invisible')
+ document.getElementById('sortMobile').classList.toggle('invisible')
+ document.getElementById('sidebarSortMobile').classList.toggle('invisible')
+ document.getElementById('mobileComboBox').classList.toggle('invisible')
+
+ }
+
+
+
+
+
+
+}
+fetchProducts()
\ No newline at end of file
diff --git a/src/scss/main.scss b/src/scss/main.scss
index defff1d55..af8c92476 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -1 +1,603 @@
-@import "reset";
+*{
+ padding: 0;
+ margin: 0;
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+
+
+ --footer-height:33px;
+ --header-height:62px;
+
+ --section-height:149px;
+ --margin-left:162px;
+ --loadMore-height:175px;
+}
+
+/*
+ Layout
+*/
+
+body {
+ display:grid;
+ grid-template-columns: 25% 1fr;
+ grid-template-rows:
+ var(--header-height)
+ var(--section-height)
+ 1fr
+ var(--loadMore-height)
+ var(--footer-height);
+ grid-template-areas:
+ "header header"
+ "section section"
+ "nav main"
+ "loadMore loadMore"
+ "footer footer";
+
+ background: #fff;
+
+}
+
+/*
+ Header
+*/
+
+.header{
+ width: 100%;
+ grid-area: header;
+ display: flex;
+ justify-content:space-between;
+ border-bottom: 2px solid #C7C7C7;
+ gap:12px;
+
+}
+
+.header .logo{
+ margin-left: 162px;
+ padding: 16px 0 16px 0;
+
+}
+
+
+.header .cart{
+
+ margin-right: 166px;
+ padding: 24px 0 24px 0;
+
+}
+
+.header .cart img {
+ width:20px;
+}
+
+#figureContainer{
+ cursor: pointer;
+ display: inline-block;
+ position: relative;
+}
+
+#figureContainer figcaption{
+ position: absolute;
+ top:9px;
+ right:1px;
+ background: #00C0EE;
+ color: #FFFFFF;
+ padding: 0 3px 0 3px;
+ border-radius: 16px;
+ font-size: 8px;
+ line-height: 10px;
+}
+
+/*
+ Section
+*/
+
+.section{
+ grid-area: section;
+ display:flex;
+ justify-content:space-between;
+ align-items: center;
+ margin-left: var(--margin-left);
+ font-size: 32px;
+ line-height: 44px;
+
+
+}
+
+.section .comboBox {
+ margin-right: 162px;
+ width:142px;
+ height:42px;
+
+
+}
+
+.section .comboBox select{
+ padding: 10px 0 10px 10px;
+ font-size: 16px;
+ line-height: 22px;
+
+}
+
+
+/*
+ Navegation
+*/
+
+.nav{
+ grid-area: nav;
+ margin-left: var(--margin-left);
+
+}
+
+.colors{
+ font-size: 16px;
+ line-height: 22px;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+
+}
+
+input[type="radio"] {
+ cursor: pointer;
+ appearance: none;
+ background-color: #fff;
+ width: 1.15em;
+ height: 1.15em;
+ border: 1px solid rgba(0, 0, 0, 0.5);
+
+}
+
+
+input[type="radio"] {
+ display: grid;
+ place-content: center;
+}
+
+input[type="radio"]::before {
+ content: "";
+ width: 0.65em;
+ height: 0.65em;
+ transform: scale(0);
+ transition: 120ms transform ease-in-out;
+ box-shadow: inset 1em 1em var(--form-control-color);
+}
+
+input[type="radio"]:checked::before {
+ transform: scale(1);
+}
+
+input[type="radio"]::before {
+ background-color: #00C0EE;
+}
+
+.seeMoreColors{
+cursor: pointer;
+display:flex;
+align-items: center;
+font-size: 12px;
+line-height: 100%;
+text-decoration-line: underline;
+color: #666666;
+}
+
+.seeMoreColors img {
+
+ width:7px;
+ height:5px;
+}
+
+.moreColors{
+ display:none;
+}
+
+
+.colorsCheckbox {
+
+ margin-top: 17px;
+}
+
+.form-control {
+ margin-bottom:7px;
+ display:flex;
+ align-items: center;
+ gap:10px;
+
+}
+
+.form-control2 {
+ margin-bottom:7px;
+ display:none;
+ align-items: center;
+ gap:10px;
+
+}
+
+.colorsCheckbox label {
+ font-size: 14px;
+
+}
+
+.sizesHeader{
+ font-size: 16px;
+ line-height: 22px;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ padding: 24px 0 24px 0;
+}
+
+
+.sizes{
+ cursor: pointer;
+ display:grid;
+ grid-template-columns: 34px 34px 34px 34px;
+ row-gap: 8px;
+ column-gap: 8px;
+}
+
+.sizes > div{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid rgba(0, 0, 0, 0.5);
+ width:32px;
+ height:32px;
+
+}
+
+.sizes > div:active{
+ border: 1px solid #00C0EE;
+}
+
+.pricesHeader {
+ font-size: 16px;
+ line-height: 22px;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ padding: 24px 0 15px 0;
+}
+
+/*
+ Main
+*/
+
+
+.main{
+ align-items: center;
+ grid-area: main;
+ display:grid;
+ row-gap:43px;
+ column-gap:10px;
+ grid-template-columns: 33% 33% 33%;
+ margin-right: 370px;
+}
+
+.card{
+ text-align: center;
+}
+
+.cardTitle{
+ font-size: 14px;
+ line-height: 19px;
+ text-transform: uppercase;
+ margin-top:10px;
+}
+
+.cardPrice{
+ margin-top:10px;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 22px;
+}
+
+.cardInstallment{
+ font-size: 16px;
+ line-height: 22px;
+ color: #666666;
+}
+
+.buyButton{
+ cursor: pointer;
+ margin-top: 14px;
+ width:195px;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ text-transform: uppercase;
+ background: #000000;
+ color: #FFFFFF;
+ padding: 7px 49px;
+}
+#cardList{
+ display:none;
+}
+
+
+.main li {
+ list-style-type: none;
+}
+
+.sectionLoadMore{
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ grid-area: loadMore;
+}
+
+.loadMoreBtn{
+ cursor: pointer;
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ background: #00C0EE;
+ color: #FFFFFF;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ text-transform: uppercase;
+ width:175px;
+ height:35px;
+}
+
+/*
+ Footer
+*/
+
+
+.footer{
+ width:100%;
+ grid-area: footer;
+ display:flex;
+ justify-content:center;
+ align-items:center;
+ font-size: 14px;
+ line-height: 19px;
+ color: #FFFFFF;
+ background: #000000;
+}
+
+.invisible{
+ display:none;
+}
+
+.visible {
+ display:flex;
+}
+
+/*
+ Mobile
+*/
+
+.mobileNav{
+ grid-area: mobileNav;
+ display:none;
+}
+
+.mobileSection{
+ grid-area: mobileSection;
+ display:none;
+
+}
+
+
+.titleSidebarMobile{
+ font-size: 28px;
+ margin-left:16px;
+ line-height: 38px;
+ text-transform: uppercase;
+ color: #666666;
+}
+#sidebarContainerMobile{
+
+ display:flex;
+ padding:16px 0 16px 0;
+ border-bottom: 1px solid #666666;
+ justify-content: space-between;
+ align-items: center;
+}
+
+#sidebarContainerMobile img {
+ cursor: pointer;
+ width:30px;
+ margin-right: 16px;
+
+}
+
+
+
+/*
+ media queries
+*/
+@media (max-width:1400px) {
+
+ .main{
+ grid-template-columns: 50% 50%;
+ }
+
+}
+
+
+
+@media (max-width: 1360px){
+ .section{
+ margin-left:30px;
+
+ }
+
+ .nav{
+ margin-left: 30px;
+ }
+
+ .header .logo{
+ margin-left:30px;
+ }
+
+
+
+}
+
+@media (max-width:850px){
+
+ .mobileNav{
+ display:flex;
+ align-items:center;
+ justify-content:center;
+
+ }
+
+ .loadMoreBtn{
+ margin-top:48px;
+ margin-bottom:44px;
+ }
+
+ .mobileNav > div{
+ cursor: pointer;
+ margin-top:12px;
+ border: 1px solid #666666;
+ font-size: 24px;
+ line-height: 33px;
+ color: #666666;
+ }
+
+
+ .sortMobile{
+ padding: 8px 30px 8px 46px;
+ }
+
+ .filterMobile{
+ padding: 8px 53px 8px 53px;
+ }
+
+ .mobileSection{
+ display:flex;
+ align-items: center;
+ font-size: 32px;
+ line-height: 44px;
+ justify-content:center;
+ }
+
+ .section{
+ display:none;
+ }
+
+ .nav{
+ display:none;
+ }
+
+ .navMobile {
+ flex-direction: column;
+ margin-left:16px;
+ }
+
+ .MobileContainer{
+ margin-top: 24px;
+ display:flex;
+ justify-content:space-between;
+ align-items:center;
+ font-size: 24px;
+ line-height: 33px;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: #666666;
+ }
+
+ .VectorMobile img{
+ cursor: pointer;
+ width:30px;
+ margin-right: 16px;
+
+ }
+
+ .form-control2:nth-child(1){
+ margin-top: 21px;
+ }
+
+ #othSizes{
+ margin-top: 20px;
+ }
+
+ .pricesCheckbox{
+ margin-top:20px;
+ }
+
+ .applyOrCleanContainer{
+ margin-top: 30px;
+ display:flex;
+ justify-content:space-between;
+ align-items: center;
+
+ }
+ .apply{
+ cursor: pointer;
+ background: #00C0EE;
+ padding:8px 53px 8px 53px;
+ font-size: 14px;
+ line-height: 19px;
+ text-transform: uppercase;
+ color: #FFFFFF;
+ }
+
+ .clean{
+ cursor: pointer;
+ margin-right: 16px;
+ border: 1px solid #666666;
+ font-size: 14px;
+ line-height: 19px;
+ padding: 8px 55px 8px 55px;
+ text-transform: uppercase;
+ }
+
+ .sortItem{
+ cursor: pointer;
+ margin-top:30px;
+ margin-left: 16px;
+ font-size:22px;
+ line-height:30px;
+ }
+
+
+ .main{
+ min-height: calc(100vh - 343px);
+ margin-top:35px;
+ margin-right: 0;
+ }
+
+ .header{
+
+ justify-content: space-between;
+ }
+ .header .logo{
+ margin-left: 30px;
+ }
+
+ .header .cart{
+ margin-right: 30px;
+ }
+
+ .footer{
+ height:33px;
+ }
+ body {
+ min-width: 375px;
+ display:grid;
+ grid-template-columns: 1fr;
+ grid-template-rows:
+ var(--header-height)
+ var(--section-height)
+ var(--mobileNav-height)
+ 1fr
+ var(--loadMore-height)
+ var(--footer-height);
+ grid-template-areas:
+ "header"
+ "mobileSection"
+ "mobileNav"
+ "main"
+ "loadMore"
+ "footer";
+
+ background: #fff;
+
+ }
+}
+
diff --git a/src/scss/teste.html b/src/scss/teste.html
new file mode 100644
index 000000000..3a0bf3bcd
--- /dev/null
+++ b/src/scss/teste.html
@@ -0,0 +1,524 @@
+
+
+
+
+ Desenvolvedor M3
+
+
+ Blusas
+
+
+ Ordenar por:
+ Ordenar por:
+ Mais recentes
+ Menor preço
+ Maior preço
+
+
+
+
+
+
+
+ Cores
+
+
+
+
+
+
+
+
+
+
+ P
+
+
+
+ M
+
+
+
+ G
+
+
+
+ GG
+
+
+
+ U
+
+
+
+ 36
+
+
+ 38
+
+
+
+ 40
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
+
+ 
+ 