From 90f79f7c730a6cdf4222d0890a3ca376ce1a3051 Mon Sep 17 00:00:00 2001 From: Sabrina Sampaio Date: Sat, 26 Feb 2022 18:12:48 -0300 Subject: [PATCH 01/21] finished initial layout --- src/index.html | 135 +++++++++++++++++++++++++++++++- src/js/index.js | 74 ++++++++++++++++++ src/scss/main.scss | 190 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 398 insertions(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index 0c692ca6e..7fb6979e5 100644 --- a/src/index.html +++ b/src/index.html @@ -7,13 +7,146 @@ Desenvolvedor M3 + + + + +
+ + +
+
+
+

Blusas

+

CORES

+ +
+
+
+
+

Amarelo

+
+ +
+
+
+
+

Azul

+
+ +
+
+
+
+

Branco

+
+ +
+
+
+
+

Cinza

+
+ +
+
+
+
+

Laranja

+
+ + Ver todas as cores + +

TAMANHOS

+
+ + + + +
+
+ + + + +
+
+ + + +
+ +

FAIXA DE PREÇO

+ +
+
+
+
+

de R$0 até R$50

+
+ +
+
+
+
+

de R$51 até R$150

+
+ +
+
+
+
+

de R$151 até R$300

+
+ +
+
+
+
+

de R$301 até R$500

+
+ +
+
+
+
+

a partir de R$501

+
+ + +
+ +
+
+ +
+
+ +
+ +
+ +
+ Agência M3 - Agência de Performance Digital +
-

Desafio m3

+ \ No newline at end of file diff --git a/src/js/index.js b/src/js/index.js index d06b8286c..261e910f1 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1 +1,75 @@ console.log("Dev m3"); +getProducts(); +checkbox(); +selector(); + + +function checkbox(){ + var btn = Array.from(document.querySelectorAll(".checkbox")); + btn.map(elem => { + elem.onclick = function (e) { + e.preventDefault(); + var checked = elem.firstElementChild; + if(checked.style.display === 'block'){ + checked.style.display = 'none'; + }else{ + checked.style.display = 'block'; + } + }; + }); +} + +function selector(){ + var btn = document.getElementById('selector'); + var options = document.querySelector('.options'); + btn.onclick = function(){ + if(options.style.display === 'block'){ + options.style.display = 'none'; + }else{ + options.style.display = 'block'; + } + } + + let op = Array.from(document.querySelectorAll(".op")); + + op.map(elem => { + elem.onclick = function (e) { + e.preventDefault(); + let text = elem.childNodes[0].data; + btn.childNodes[0].data = elem.childNodes[0].data + }; + }); +} + +function getProducts(){ + var requestURL = ' http://localhost:5000/products'; + var request = new XMLHttpRequest(); + request.open('GET', requestURL); + request.responseType = 'json'; + request.send(); + request.onload = function() { + var products = request.response; + showProducts(products); + } +} + +function showProducts(products){ + products = products.slice(0,9); + products.map(elem => { + console.log(elem); + let listAllProducts = document.getElementById("products"); + let htmlInsert = ` +
+ erro +

${elem.name.toUpperCase()}

+ R$${Number(elem.price).toFixed(2)} + até ${elem.parcelamento[0]}x de R$${Number(elem.parcelamento[1]).toFixed(2)} + +
+ ` + + listAllProducts.insertAdjacentHTML('beforeend', htmlInsert); + }); +} diff --git a/src/scss/main.scss b/src/scss/main.scss index defff1d55..705bfb5c0 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -1 +1,191 @@ @import "reset"; + +$blue-color: #00c0ee; +$lightgray-color: #808080; +$gray-color: #666666; +$black-color: #000000; + +* { + margin: 0; + padding: 0; + font-family: 'Open Sans' sans-serif; +} + +.header{ + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 20px 100px; + border-bottom: 2px solid $lightgray-color; +} + +.main-container{ + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 30px 100px; + + .filters{ + width: 70%; + + h3{ + padding: 30px 0px 5px 0px; + } + + .sizes{ + display: flex; + flex-direction: row; + justify-content: flex-start; + width: 100%; + + .checkbox-btn{ + width: 34px; + height: 34px; + border: 1.5px solid $lightgray-color; + border-radius: 0px; + color: $lightgray-color; + background-color: white; + margin: 0px 10px 10px 0px; + } + } + + .color-option{ + display: flex; + flex-direction: row; + margin: 10px 0px; + + p{ + margin: 0px 0px 0px 5px; + padding: 0px; + } + + .checkbox{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 14px; + height: 14px; + border: 1px solid $black-color; + + .checked{ + display: none; + width: 10px; + height: 10px; + background-color: $blue-color; + } + } + + } + } + + .catalog{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .test{ + display: flex; + justify-content: flex-end; + align-items: flex-end; + width: 100%; + + .testezin{ + + .selector{ + border: 1px solid $black-color; + padding: 8px 8px; + background-color: white; + border-radius: 0px; + } + + .options{ + display: none; + position: absolute; + top: 130px; + width: auto; + height: auto; + list-style: none; + border: 1px solid $black-color; + background-color: white; + border-top: 0px; + z-index: 1; + + li{ + position: relative; + display: block; + margin: 0px; + padding: 0px; + + a{ + padding: 8px 36px 8px 8px; + display: block; + height: auto; + white-space: nowrap; + text-align: left; + } + + a:hover{ + background-color: $blue-color; + color: white; + } + } + } + } + + } + + + .products{ + display:flex; + flex-direction: row; + align-self: stretch; + justify-content:space-between; + margin-top: 40px; + flex-wrap: wrap; + + .product{ + display: flex; + flex-direction:column; + justify-content:space-between; + align-items: center; + margin-bottom: 40px; + + h3{ + margin:10px 0px; + } + span{ + margin-bottom: 10px; + } + + .add{ + padding: 10px 70px; + border: none; + border-radius: 0px;; + background-color: $black-color; + color: white; + } + } + } + + .load-more-btn{ + padding: 15px 40px; + border: 0px; + border-radius: 0px; + background-color: $blue-color; + color: white; + + } + } +} + +.footer{ + display: flex; + justify-content: center; + background-color: $black-color; + color: white; + padding: 5px 0px; + +} + From f30aceb697cd1c8600478b924400fc1e36f98689 Mon Sep 17 00:00:00 2001 From: Sabrina Sampaio Date: Sat, 26 Feb 2022 20:29:40 -0300 Subject: [PATCH 02/21] fixed fonts and mobile view --- src/index.html | 12 +++++-- src/js/index.js | 5 +-- src/scss/main.scss | 81 ++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 87 insertions(+), 11 deletions(-) diff --git a/src/index.html b/src/index.html index 7fb6979e5..63cf45f23 100644 --- a/src/index.html +++ b/src/index.html @@ -19,9 +19,17 @@ -
+
+
+

Blusas

+
+ + +
+
+
-

Blusas

+

Blusas

CORES

diff --git a/src/js/index.js b/src/js/index.js index 261e910f1..9639b22ce 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -4,6 +4,7 @@ checkbox(); selector(); + function checkbox(){ var btn = Array.from(document.querySelectorAll(".checkbox")); btn.map(elem => { @@ -62,8 +63,8 @@ function showProducts(products){
erro

${elem.name.toUpperCase()}

- R$${Number(elem.price).toFixed(2)} - até ${elem.parcelamento[0]}x de R$${Number(elem.parcelamento[1]).toFixed(2)} + R$${Number(elem.price).toFixed(2)} + até ${elem.parcelamento[0]}x de R$${Number(elem.parcelamento[1]).toFixed(2)} diff --git a/src/scss/main.scss b/src/scss/main.scss index 705bfb5c0..91a3f52d7 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -5,11 +5,12 @@ $lightgray-color: #808080; $gray-color: #666666; $black-color: #000000; -* { +body{ margin: 0; padding: 0; - font-family: 'Open Sans' sans-serif; + font-family: 'Open Sans', sans-serif; } + .header{ display: flex; @@ -24,10 +25,18 @@ $black-color: #000000; flex-direction: row; justify-content: space-between; padding: 30px 100px; + + .mobile-filters{ + display: none; + } .filters{ width: 70%; + h1{ + font-size: revert-layer; + } + h3{ padding: 30px 0px 5px 0px; } @@ -90,26 +99,28 @@ $black-color: #000000; justify-content: flex-end; align-items: flex-end; width: 100%; + margin-top: 5px; .testezin{ - + .selector{ border: 1px solid $black-color; - padding: 8px 8px; + padding: 8px 10px; background-color: white; border-radius: 0px; + font-size: 12px; } .options{ display: none; position: absolute; - top: 130px; + top: 134px; width: auto; height: auto; list-style: none; border: 1px solid $black-color; background-color: white; - border-top: 0px; + z-index: 1; li{ @@ -119,11 +130,12 @@ $black-color: #000000; padding: 0px; a{ - padding: 8px 36px 8px 8px; + padding: 8px 38px 8px 8px; display: block; height: auto; white-space: nowrap; text-align: left; + font-size: 12px; } a:hover{ @@ -189,3 +201,58 @@ $black-color: #000000; } +@media (max-width: 600px) +{ + + .header{ + padding: 20px 20px ; + } + .main-container{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 20px 0px; + + .mobile-filters{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + h1{ + font-size: revert-layer; + margin-bottom: 20px; + } + + .filter-order-buttons{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + .mobile-button{ + padding: 15px 70px; + background-color: white; + border: 1px solid $lightgray-color; + color: $lightgray-color; + } + } + + + + } + + .filters{ + display: none; + } + + .catalog{ + .test{ + display: none; + } + } + } + +} + From 61d87317b93ce429906f8ded83af192811bda097 Mon Sep 17 00:00:00 2001 From: Sabrina Sampaio Date: Sun, 27 Feb 2022 13:12:10 -0300 Subject: [PATCH 03/21] order function working --- src/index.html | 32 +++++++++++++++++++------------- src/js/index.js | 38 ++++++++++++++++++++++++++++++++++---- src/scss/main.scss | 20 ++++++++++++++++++++ 3 files changed, 73 insertions(+), 17 deletions(-) diff --git a/src/index.html b/src/index.html index 63cf45f23..18b48045b 100644 --- a/src/index.html +++ b/src/index.html @@ -2,21 +2,27 @@ - - - - Desenvolvedor M3 - - - - - + + + + Desenvolvedor M3 + + + + + + +
- +
+ shopping_bag +
0
+
+
@@ -135,9 +141,9 @@

FAIXA DE PREÇO

Ordenar por: diff --git a/src/js/index.js b/src/js/index.js index 9639b22ce..7ee75a7b2 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -3,7 +3,7 @@ getProducts(); checkbox(); selector(); - +var productsArray; function checkbox(){ var btn = Array.from(document.querySelectorAll(".checkbox")); @@ -20,6 +20,7 @@ function checkbox(){ }); } + function selector(){ var btn = document.getElementById('selector'); var options = document.querySelector('.options'); @@ -37,7 +38,36 @@ function selector(){ elem.onclick = function (e) { e.preventDefault(); let text = elem.childNodes[0].data; - btn.childNodes[0].data = elem.childNodes[0].data + btn.childNodes[0].data = elem.childNodes[0].data; + let orderType = elem.getAttribute("ordertype"); + var orderedArray = productsArray; + + if(orderType == "recent"){ + orderedArray.sort(function compare(a, b) { + if (a.date < b.date) return -1; + if (a.date > b.date) return 1; + return 0; + }) + document.getElementById("products").innerHTML = ""; + showProducts(orderedArray); + }else if(orderType == "low-price"){ + orderedArray.sort(function compare(a, b) { + if (a.price < b.price) return -1; + if (a.price > b.price) return 1; + return 0; + }) + document.getElementById("products").innerHTML = ""; + showProducts(orderedArray); + }else{ + orderedArray.sort(function compare(a, b) { + if (a.price > b.price) return -1; + if (a.price < b.price) return 1; + return 0; + }) + document.getElementById("products").innerHTML = ""; + showProducts(orderedArray); + + } }; }); } @@ -49,8 +79,8 @@ function getProducts(){ request.responseType = 'json'; request.send(); request.onload = function() { - var products = request.response; - showProducts(products); + productsArray = request.response; + showProducts(productsArray); } } diff --git a/src/scss/main.scss b/src/scss/main.scss index 91a3f52d7..87f8661f2 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -18,6 +18,26 @@ body{ justify-content: space-between; padding: 20px 100px; border-bottom: 2px solid $lightgray-color; + + .cart-icon{ + position: relative; + width: 35px; + .qtd{ + display: block; + position: absolute; + bottom: 0; + right: 0; + border-radius: 20px; + height: 15px; + width: 15px; + background-color: $blue-color; + color: white; + text-align: center; + font-size: 12px; + font-weight: 600; + padding: 3px 2px 0px 2px; + } + } } .main-container{ From c4b26e953f666f3f41d03dc5de57c53c2de3e56b Mon Sep 17 00:00:00 2001 From: Sabrina Sampaio Date: Sun, 27 Feb 2022 14:22:15 -0300 Subject: [PATCH 04/21] fixed select width --- src/index.html | 2 +- src/js/index.js | 3 ++- src/scss/main.scss | 12 +++++++++--- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/index.html b/src/index.html index 18b48045b..7592a65bb 100644 --- a/src/index.html +++ b/src/index.html @@ -138,7 +138,7 @@

FAIXA DE PREÇO

  • - Ordenar por: + Ordenar por:
    • Mais recentes diff --git a/src/js/index.js b/src/js/index.js index 7ee75a7b2..7fa0d9f0f 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -37,6 +37,7 @@ function selector(){ op.map(elem => { elem.onclick = function (e) { e.preventDefault(); + options.style.display = 'none'; let text = elem.childNodes[0].data; btn.childNodes[0].data = elem.childNodes[0].data; let orderType = elem.getAttribute("ordertype"); @@ -73,7 +74,7 @@ function selector(){ } function getProducts(){ - var requestURL = ' http://localhost:5000/products'; + var requestURL = 'http://localhost:5000/products'; var request = new XMLHttpRequest(); request.open('GET', requestURL); request.responseType = 'json'; diff --git a/src/scss/main.scss b/src/scss/main.scss index 87f8661f2..887c1c647 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -124,23 +124,29 @@ body{ .testezin{ .selector{ + display: block; + width: 107.5px; border: 1px solid $black-color; - padding: 8px 10px; + padding: 8px; background-color: white; border-radius: 0px; font-size: 12px; + + i{ + float: right; + + } } .options{ display: none; position: absolute; - top: 134px; + top: 137px; width: auto; height: auto; list-style: none; border: 1px solid $black-color; background-color: white; - z-index: 1; li{ From 30193e81672300ae5460e59c184d849a6f00f998 Mon Sep 17 00:00:00 2001 From: Sabrina Sampaio Date: Sun, 27 Feb 2022 16:53:39 -0300 Subject: [PATCH 05/21] created order function --- src/js/index.js | 46 ++++++++++++++++++++++------------------------ 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/src/js/index.js b/src/js/index.js index 7fa0d9f0f..cf5f5139e 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -20,6 +20,25 @@ function checkbox(){ }); } +function orderProducts(type, asc){ + var orderedArray = productsArray; + if(asc){ + orderedArray.sort(function compare(a, b) { + if (a[type] < b[type]) return -1; + if (a[type] > b[type]) return 1; + return 0; + }) + }else{ + orderedArray.sort(function compare(a, b) { + if (a.price > b.price) return -1; + if (a.price < b.price) return 1; + return 0; + }) + } + document.getElementById("products").innerHTML = ""; + showProducts(orderedArray); +} + function selector(){ var btn = document.getElementById('selector'); @@ -38,36 +57,15 @@ function selector(){ elem.onclick = function (e) { e.preventDefault(); options.style.display = 'none'; - let text = elem.childNodes[0].data; btn.childNodes[0].data = elem.childNodes[0].data; let orderType = elem.getAttribute("ordertype"); - var orderedArray = productsArray; if(orderType == "recent"){ - orderedArray.sort(function compare(a, b) { - if (a.date < b.date) return -1; - if (a.date > b.date) return 1; - return 0; - }) - document.getElementById("products").innerHTML = ""; - showProducts(orderedArray); + orderProducts("date",true); }else if(orderType == "low-price"){ - orderedArray.sort(function compare(a, b) { - if (a.price < b.price) return -1; - if (a.price > b.price) return 1; - return 0; - }) - document.getElementById("products").innerHTML = ""; - showProducts(orderedArray); + orderProducts("price",true); }else{ - orderedArray.sort(function compare(a, b) { - if (a.price > b.price) return -1; - if (a.price < b.price) return 1; - return 0; - }) - document.getElementById("products").innerHTML = ""; - showProducts(orderedArray); - + orderProducts("price",false) } }; }); From 7aee49f845013353ae36fadfcadcc4c325063d09 Mon Sep 17 00:00:00 2001 From: Sabrina Sampaio Date: Sun, 27 Feb 2022 20:13:25 -0300 Subject: [PATCH 06/21] added cart functionality --- src/index.html | 2 +- src/js/index.js | 29 ++++++++++++++++++++++++++--- src/scss/main.scss | 2 +- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/src/index.html b/src/index.html index 7592a65bb..30bf89acf 100644 --- a/src/index.html +++ b/src/index.html @@ -20,7 +20,7 @@
      shopping_bag -
      0
      +
      0
diff --git a/src/js/index.js b/src/js/index.js index cf5f5139e..ad306a22f 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,7 +1,9 @@ console.log("Dev m3"); getProducts(); +localStorage.clear(); checkbox(); selector(); +// setTimeout(() => { addToCart(); }, 500); var productsArray; @@ -86,7 +88,6 @@ function getProducts(){ function showProducts(products){ products = products.slice(0,9); products.map(elem => { - console.log(elem); let listAllProducts = document.getElementById("products"); let htmlInsert = `
@@ -94,12 +95,34 @@ function showProducts(products){

${elem.name.toUpperCase()}

R$${Number(elem.price).toFixed(2)} até ${elem.parcelamento[0]}x de R$${Number(elem.parcelamento[1]).toFixed(2)} -
` - listAllProducts.insertAdjacentHTML('beforeend', htmlInsert); + listAllProducts.insertAdjacentHTML('beforeend', htmlInsert); + addToCart(); + }); +} + +function addToCart(){ + let productToAdd = Array.from(document.querySelectorAll(".add")); + productToAdd.map(elem => { + elem.onclick = function (e) { + e.preventDefault(); + + let id = elem.getAttribute('productId'); + let price = elem.getAttribute('price'); + localStorage.setItem(`${id}`,`${price}`); + let qtdDisplay = document.querySelector(".qtd"); + + if(localStorage.length === 1){ + qtdDisplay.style.display = 'block'; + qtdDisplay.innerText = localStorage.length; + }else{ + qtdDisplay.innerText = localStorage.length; + } + } }); } diff --git a/src/scss/main.scss b/src/scss/main.scss index 887c1c647..38d5449fe 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -23,7 +23,7 @@ body{ position: relative; width: 35px; .qtd{ - display: block; + display: none; position: absolute; bottom: 0; right: 0; From b963af74042ea1d8bb9af64d617e5ed6e581c820 Mon Sep 17 00:00:00 2001 From: Sabrina Sampaio Date: Mon, 28 Feb 2022 12:49:22 -0300 Subject: [PATCH 07/21] fixed mobile view --- src/index.html | 303 +++++++++++++++++++++++++-------------------- src/js/index.js | 71 ++++++++++- src/scss/main.scss | 31 ++++- 3 files changed, 267 insertions(+), 138 deletions(-) diff --git a/src/index.html b/src/index.html index 30bf89acf..7b27c50a0 100644 --- a/src/index.html +++ b/src/index.html @@ -16,148 +16,187 @@ -
- -
- shopping_bag -
0
-
- +
+
+

ORDENAR

+ close +
+ Mais recentes + Menor preço + Maior preço +
-
-
-

Blusas

-
- - -
-
- -
-

Blusas

-

CORES

- -
-
-
+
+
+ +
+ shopping_bag +
0
-

Amarelo

-
- -
-
-
+ +
+ +
+
+

Blusas

+
+ + +
+
+ +
+

Blusas

+

CORES

+ +
+
+
+
+

Amarelo

+
+ +
+
+
+
+

Azul

+
+ +
+
+
+
+

Branco

+
+ +
+
+
+
+

Cinza

+
+ +
+
+
+
+

Laranja

+
+ +
+
+
+
+
+

Rosa

+
+ +
+
+
+
+

Preto

+
+ +
+
+
+
+

Vinho

+
+
+ + Ver todas as cores + + + +

TAMANHOS

+
+ + + + +
+
+ + + + +
+
+ + + +
+ +

FAIXA DE PREÇO

+ +
+
+
+
+

de R$0 até R$50

-

Azul

-
- -
-
-
+ +
+
+
+
+

de R$51 até R$150

-

Branco

-
- -
-
-
+ +
+
+
+
+

de R$151 até R$300

-

Cinza

-
- -
-
-
-
-

Laranja

-
- - Ver todas as cores - -

TAMANHOS

-
- - - - -
-
- - - - -
-
- - - -
- -

FAIXA DE PREÇO

- -
-
-
-
-

de R$0 até R$50

-
- -
-
-
-
-

de R$51 até R$150

-
- -
-
-
-
-

de R$151 até R$300

-
- -
-
-
-
-

de R$301 até R$500

-
- -
-
-
-
-

a partir de R$501

-
- -
- -
-
-
+ +
+
+ - - + +
+
+ +
+ +
+ +
+ Agência M3 - Agência de Performance Digital
-
- -
- -
- -
- Agência M3 - Agência de Performance Digital
+ diff --git a/src/js/index.js b/src/js/index.js index ad306a22f..d3f92a877 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,9 +1,5 @@ console.log("Dev m3"); -getProducts(); -localStorage.clear(); -checkbox(); -selector(); -// setTimeout(() => { addToCart(); }, 500); +main(); var productsArray; @@ -22,6 +18,21 @@ function checkbox(){ }); } +function getAdditionalColors(){ + var link = document.getElementById('see-more'); + var div = document.querySelector(".additional-colors") + link.onclick = function (e) { + e.preventDefault(); + if(div.style.display === 'block'){ + div.style.display = 'none'; + link.innerHTML = `Veja todas as cores ` + }else{ + div.style.display = 'block'; + link.innerHTML= `Veja menos cores ` + } + }; +} + function orderProducts(type, asc){ var orderedArray = productsArray; if(asc){ @@ -126,3 +137,53 @@ function addToCart(){ } }); } + +function orderMobile(){ + var btn = document.getElementById("order-mobile"); + var divOrder = document.querySelector(".div-mobile-order"); + var divDesktop = document.querySelector(".desktop"); + btn.onclick = function (e) { + e.preventDefault(); + if(divOrder.style.display === 'flex'){ + divOrder.style.display = 'none'; + divDesktop.style.display = 'block'; + }else{ + divOrder.style.display = 'flex'; + divDesktop.style.display = 'none'; + document.getElementById("back-icon").onclick = function (e){ + e.preventDefault(); + divOrder.style.display = 'none'; + divDesktop.style.display = 'block'; + } + } + }; + + let op = Array.from(document.querySelectorAll(".op")); + + op.map(elem => { + elem.onclick = function (e) { + e.preventDefault(); + let orderType = elem.getAttribute("ordertype"); + divOrder.style.display = 'none'; + divDesktop.style.display = 'block'; + + if(orderType == "recent"){ + orderProducts("date",true); + }else if(orderType == "low-price"){ + orderProducts("price",true); + }else{ + orderProducts("price",false) + } + }; + }); + +} + +function main(){ + getProducts(); + localStorage.clear(); + checkbox(); + selector(); + getAdditionalColors(); + orderMobile(); +} diff --git a/src/scss/main.scss b/src/scss/main.scss index 38d5449fe..9db5ef469 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -10,6 +10,24 @@ body{ padding: 0; font-family: 'Open Sans', sans-serif; } + +.div-mobile-order{ + display: none; + flex-direction: column; + z-index: 1; + background-color: white; + + .op{ + display: block; + padding: 15px 20px; + } + + .op:hover{ + background-color: $blue-color; + color: white; + } + +} .header{ @@ -61,6 +79,16 @@ body{ padding: 30px 0px 5px 0px; } + a{ + font-size: 12px; color: gray; + border-bottom: 1px solid gray; + cursor: pointer; + } + + .additional-colors{ + display: none; + } + .sizes{ display: flex; flex-direction: row; @@ -203,6 +231,7 @@ body{ border-radius: 0px;; background-color: $black-color; color: white; + cursor: pointer; } } } @@ -229,7 +258,6 @@ body{ @media (max-width: 600px) { - .header{ padding: 20px 20px ; } @@ -262,6 +290,7 @@ body{ background-color: white; border: 1px solid $lightgray-color; color: $lightgray-color; + cursor: pointer; } } From a3e2753246963b417d8508d050d8f26b5ceed3b6 Mon Sep 17 00:00:00 2001 From: Sabrina Sampaio Date: Tue, 1 Mar 2022 20:25:23 -0300 Subject: [PATCH 08/21] added filters --- src/index.html | 33 +++++++++++++------------ src/js/index.js | 60 ++++++++++++++++++++++++++++++++++++++++++++-- src/scss/main.scss | 7 ++++-- 3 files changed, 79 insertions(+), 21 deletions(-) diff --git a/src/index.html b/src/index.html index 7b27c50a0..8097685cc 100644 --- a/src/index.html +++ b/src/index.html @@ -21,10 +21,9 @@

ORDENAR

close
- Mais recentes - Menor preço - Maior preço - + Mais recentes + Menor preço + Maior preço
@@ -51,35 +50,35 @@

Blusas

CORES

-
+

Amarelo

-
+

Azul

-
+

Branco

-
+

Cinza

-
+

Laranja

@@ -87,21 +86,21 @@

CORES

-
+

Rosa

-
+

Preto

-
+

Vinho

@@ -134,35 +133,35 @@

TAMANHOS

FAIXA DE PREÇO

-
+

de R$0 até R$50

-
+

de R$51 até R$150

-
+

de R$151 até R$300

-
+

de R$301 até R$500

-
+

a partir de R$501

diff --git a/src/js/index.js b/src/js/index.js index d3f92a877..8b08197ab 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -2,6 +2,48 @@ console.log("Dev m3"); main(); var productsArray; +var filteredProducts = new Array; +var filtersApplyed = new Array; + +function filterPrice(product, key){ + if(key == "0-to-50"){ + return (product.price>= 0 && product.price<=50) ? true : false; + }else if (key == "51-to-150"){ + return (product.price>= 51 && product.price<=150) ? true : false; + }else if (key == "151-to-300"){ + return (product.price>= 151 && product.price<=300) ? true : false; + }else if(key == "301-to-500"){ + return (product.price>= 301 && product.price<=500) ? true : false; + }else{ + return (product.price<500) ? true : false; + } +} + +function applyFilter(filtersApplyed){ + filteredProducts = new Array + filtersApplyed.forEach(elem => { + if(elem[0] == 'color'){ + filteredProducts = filteredProducts.concat(productsArray.filter(produto => produto.color == elem[1])); + }else if(elem[0] == 'size'){ + filteredProducts = filteredProducts.concat(productsArray.filter(produto => produto.size == elem[1])); + }else{ + filteredProducts = filteredProducts.concat(productsArray.filter(elem => filterPrice(elem, elem[0]))); + } + }); + document.getElementById("products").innerHTML = ""; + showProducts(filteredProducts) +} + +function removeFilter(param){ + filtersApplyed = filtersApplyed.filter(filter => filter[1] !== param[1]) + console.log(filtersApplyed.length) + if(filtersApplyed.length === 0){ + document.getElementById("products").innerHTML = ""; + showProducts(productsArray) + }else{ + applyFilter(filtersApplyed) + } +} function checkbox(){ var btn = Array.from(document.querySelectorAll(".checkbox")); @@ -10,9 +52,21 @@ function checkbox(){ e.preventDefault(); var checked = elem.firstElementChild; if(checked.style.display === 'block'){ - checked.style.display = 'none'; + checked.style.display = 'none'; + if(elem.getAttribute("id")=='color'){ + removeFilter([elem.getAttribute("id"), elem.getAttribute("color")]) + }else{ + removeFilter([elem.getAttribute("price")]) + } }else{ checked.style.display = 'block'; + if(elem.getAttribute("id")=='color'){ + filtersApplyed.push([elem.getAttribute("id"), elem.getAttribute("color")]) + applyFilter(filtersApplyed) + }else{ + filtersApplyed.push(["price", elem.getAttribute("price")]) + applyFilter(filtersApplyed) + } } }; }); @@ -97,6 +151,7 @@ function getProducts(){ } function showProducts(products){ + console.log("entrou aqui",products) products = products.slice(0,9); products.map(elem => { let listAllProducts = document.getElementById("products"); @@ -113,6 +168,7 @@ function showProducts(products){ ` listAllProducts.insertAdjacentHTML('beforeend', htmlInsert); + filteredProducts = productsArray addToCart(); }); } @@ -158,7 +214,7 @@ function orderMobile(){ } }; - let op = Array.from(document.querySelectorAll(".op")); + let op = Array.from(document.querySelectorAll(".op-mobile")); op.map(elem => { elem.onclick = function (e) { diff --git a/src/scss/main.scss b/src/scss/main.scss index 9db5ef469..edee3764a 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -17,12 +17,13 @@ body{ z-index: 1; background-color: white; - .op{ + .op-mobile{ display: block; padding: 15px 20px; + cursor: pointer; } - .op:hover{ + .op-mobile:hover{ background-color: $blue-color; color: white; } @@ -159,6 +160,7 @@ body{ background-color: white; border-radius: 0px; font-size: 12px; + cursor: default; i{ float: right; @@ -190,6 +192,7 @@ body{ white-space: nowrap; text-align: left; font-size: 12px; + cursor: default; } a:hover{ From 928f5f440720453a63f95c49fa701acdbcf59f12 Mon Sep 17 00:00:00 2001 From: Sabrina Sampaio Date: Wed, 2 Mar 2022 18:30:29 -0300 Subject: [PATCH 09/21] fixed filters --- src/index.html | 26 ++++---- src/js/index.js | 156 ++++++++++++++++++++++++++++++++++++--------- src/scss/main.scss | 12 ++-- 3 files changed, 147 insertions(+), 47 deletions(-) diff --git a/src/index.html b/src/index.html index 8097685cc..1589769b2 100644 --- a/src/index.html +++ b/src/index.html @@ -113,21 +113,21 @@

CORES

TAMANHOS

- - - - + + + +
- - - - + + + +
- - - + + +

FAIXA DE PREÇO

@@ -186,7 +186,9 @@

FAIXA DE PREÇO

- +
+ +
diff --git a/src/js/index.js b/src/js/index.js index 8b08197ab..be262ded9 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,11 +1,11 @@ -console.log("Dev m3"); main(); var productsArray; -var filteredProducts = new Array; +var filtered = new Array; +var ordered = new Array; var filtersApplyed = new Array; -function filterPrice(product, key){ +function filterPrice(product, key){ if(key == "0-to-50"){ return (product.price>= 0 && product.price<=50) ? true : false; }else if (key == "51-to-150"){ @@ -15,28 +15,67 @@ function filterPrice(product, key){ }else if(key == "301-to-500"){ return (product.price>= 301 && product.price<=500) ? true : false; }else{ - return (product.price<500) ? true : false; + return (product.price>501) ? true : false; } } +function filterSize(product, key){ + if(product.size.indexOf(key) == -1) + return false; + else + return true; +} + function applyFilter(filtersApplyed){ - filteredProducts = new Array + filteredProducts = new Array + var price = false; + var size = false; + var color = false; + + filtersApplyed.sort(function compare(a, b) { + if (a[0] < b[0]) return -1; + if (a[0] > b[0]) return 1; + return 0; + }) + filtersApplyed.forEach(elem => { - if(elem[0] == 'color'){ - filteredProducts = filteredProducts.concat(productsArray.filter(produto => produto.color == elem[1])); + if(elem[0] == 'color'){ + color = true; + if(price || size){ + filteredProducts = filteredProducts.filter(produto => produto.color == elem[1]); + }else{ + filteredProducts = filteredProducts.concat(productsArray.filter(produto => produto.color == elem[1])); + } }else if(elem[0] == 'size'){ - filteredProducts = filteredProducts.concat(productsArray.filter(produto => produto.size == elem[1])); + size = true; + if(price || color){ + filteredProducts = filteredProducts.filter(element =>filterSize(element, elem[1])); + }else{ + filteredProducts = filteredProducts.concat(productsArray.filter(element =>filterSize(element, elem[1]))); + } }else{ - filteredProducts = filteredProducts.concat(productsArray.filter(elem => filterPrice(elem, elem[0]))); + price = true; + if(size || color){ + filteredProducts = filteredProducts.filter(element => filterPrice(element, elem[1])); + }else{ + filteredProducts =filteredProducts.concat(productsArray.filter(element => filterPrice(element, elem[1]))); + } } }); - document.getElementById("products").innerHTML = ""; - showProducts(filteredProducts) + + filtered = filteredProducts; + + if(ordered.length == 0){ + document.querySelector(".products").innerHTML = ""; + showProducts(filteredProducts) + + }else{ + orderProducts(ordered[0][0], ordered[0][1]) + } } -function removeFilter(param){ - filtersApplyed = filtersApplyed.filter(filter => filter[1] !== param[1]) - console.log(filtersApplyed.length) +function removeFilter(param){ + filtersApplyed = filtersApplyed.filter(filter => filter[1] != param[1]) if(filtersApplyed.length === 0){ document.getElementById("products").innerHTML = ""; showProducts(productsArray) @@ -56,7 +95,7 @@ function checkbox(){ if(elem.getAttribute("id")=='color'){ removeFilter([elem.getAttribute("id"), elem.getAttribute("color")]) }else{ - removeFilter([elem.getAttribute("price")]) + removeFilter([elem.getAttribute("id"), elem.getAttribute("price")]) } }else{ checked.style.display = 'block'; @@ -72,6 +111,26 @@ function checkbox(){ }); } +function checkboxBtn(){ + var btn = Array.from(document.querySelectorAll(".checkbox-btn")); + btn.map(elem => { + elem.onclick = function (e) { + if(elem.getAttribute('active')=='false'){ + elem.setAttribute('active','true'); + elem.style.border = "1.5px solid #00c0ee"; + filtersApplyed.push(["size",elem.getAttribute('size')]) + applyFilter(filtersApplyed) + }else{ + elem.setAttribute('active','false'); + elem.style.border = "1.5px solid gray"; + removeFilter(['size', elem.getAttribute("size")]) + } + }; + }); + + +} + function getAdditionalColors(){ var link = document.getElementById('see-more'); var div = document.querySelector(".additional-colors") @@ -88,7 +147,8 @@ function getAdditionalColors(){ } function orderProducts(type, asc){ - var orderedArray = productsArray; + var orderedArray = filtered.length === 0 ? orderedArray : filtered; + if(asc){ orderedArray.sort(function compare(a, b) { if (a[type] < b[type]) return -1; @@ -102,6 +162,7 @@ function orderProducts(type, asc){ return 0; }) } + document.getElementById("products").innerHTML = ""; showProducts(orderedArray); } @@ -126,12 +187,18 @@ function selector(){ options.style.display = 'none'; btn.childNodes[0].data = elem.childNodes[0].data; let orderType = elem.getAttribute("ordertype"); - + ordered.length = 0; if(orderType == "recent"){ - orderProducts("date",true); + //ordered.length = 0; + ordered.push(["date",false]); + orderProducts("date",false); }else if(orderType == "low-price"){ + //ordered.length = 0; + ordered.push(["price",true]); orderProducts("price",true); }else{ + //ordered.length = 0; + ordered.push(["price",false]); orderProducts("price",false) } }; @@ -139,19 +206,24 @@ function selector(){ } function getProducts(){ - var requestURL = 'http://localhost:5000/products'; - var request = new XMLHttpRequest(); - request.open('GET', requestURL); - request.responseType = 'json'; - request.send(); - request.onload = function() { - productsArray = request.response; - showProducts(productsArray); - } + fetch('http://localhost:5000/products') + .then(res => res.json()) + .then((res) => { + productsArray = res; + showProducts(productsArray); + }) + .catch((error) => { + console.log(error); + }); } -function showProducts(products){ - console.log("entrou aqui",products) +function showProducts(products){ + if(products.length > 9){ + showMoreProducts(products) + document.querySelector(".load-more-btn").style.display = 'block' + }else{ + document.querySelector(".load-more-btn").style.display = 'none' + } products = products.slice(0,9); products.map(elem => { let listAllProducts = document.getElementById("products"); @@ -168,11 +240,32 @@ function showProducts(products){ ` listAllProducts.insertAdjacentHTML('beforeend', htmlInsert); - filteredProducts = productsArray - addToCart(); + addToCart(); }); } +function showMoreProducts(products){ + products = products.slice(9,-1); + document.querySelector(".load-more-btn").onclick = function(){ + products.map(elem => { + let listAllProducts = document.getElementById("products"); + let htmlInsert = ` +
+ erro +

${elem.name.toUpperCase()}

+ R$${Number(elem.price).toFixed(2)} + até ${elem.parcelamento[0]}x de R$${Number(elem.parcelamento[1]).toFixed(2)} + +
+ ` + listAllProducts.insertAdjacentHTML('beforeend', htmlInsert); + }); + document.querySelector(".load-more-btn").style.display = 'none'; + } +} + function addToCart(){ let productToAdd = Array.from(document.querySelectorAll(".add")); productToAdd.map(elem => { @@ -239,6 +332,7 @@ function main(){ getProducts(); localStorage.clear(); checkbox(); + checkboxBtn(); selector(); getAdditionalColors(); orderMobile(); diff --git a/src/scss/main.scss b/src/scss/main.scss index edee3764a..5a34af84a 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -70,7 +70,7 @@ body{ } .filters{ - width: 70%; + width: 30%; h1{ font-size: revert-layer; @@ -97,6 +97,7 @@ body{ width: 100%; .checkbox-btn{ + display: block; width: 34px; height: 34px; border: 1.5px solid $lightgray-color; @@ -140,8 +141,9 @@ body{ .catalog{ display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; align-items: center; + width: 70%; .test{ display: flex; @@ -220,7 +222,7 @@ body{ justify-content:space-between; align-items: center; margin-bottom: 40px; - + h3{ margin:10px 0px; } @@ -240,12 +242,12 @@ body{ } .load-more-btn{ + display: none; padding: 15px 40px; border: 0px; border-radius: 0px; background-color: $blue-color; color: white; - } } } @@ -306,9 +308,11 @@ body{ } .catalog{ + width: 100%; .test{ display: none; } + } } From 74e91c7a77d18f119150b8bd84f8cac2bc40f4c2 Mon Sep 17 00:00:00 2001 From: Sabrina Sampaio Date: Thu, 3 Mar 2022 13:22:06 -0300 Subject: [PATCH 10/21] added mobile filters --- src/index.html | 134 +++++++++++++++++++++++++++++++++++----- src/js/index.js | 87 +++++++++++++++++++++++--- src/scss/main.scss | 151 ++++++++++++++++++++++++++++++--------------- 3 files changed, 296 insertions(+), 76 deletions(-) diff --git a/src/index.html b/src/index.html index 1589769b2..98dba7d6b 100644 --- a/src/index.html +++ b/src/index.html @@ -19,13 +19,113 @@

ORDENAR

- close + close
Mais recentes Menor preço Maior preço
+
+
+

FILTRAR

+ close +
+
+

CORES

+ add +
+
+
+
+
+
+

Amarelo

+
+ +
+
+
+
+

Azul

+
+ +
+
+
+
+

Branco

+
+ +
+
+
+
+

Cinza

+
+ +
+
+
+
+

Laranja

+
+ +
+
+
+
+

Rosa

+
+ +
+
+
+
+

Preto

+
+ +
+
+
+
+

Vinho

+
+
+
+

TAMANHOS

+ add +
+
+
+ + + + +
+
+ + + + +
+
+ + + +
+
+
+

FAIXA DE PREÇO

+ add +
+ +
+ + +
+
+
@@ -40,7 +140,7 @@

ORDENAR

Blusas

- +
@@ -49,35 +149,35 @@

Blusas

Blusas

CORES

-
+

Amarelo

-
+

Azul

-
+

Branco

-
+

Cinza

-
+
@@ -85,21 +185,21 @@

CORES

-
+

Rosa

-
+

Preto

-
+
@@ -132,35 +232,35 @@

TAMANHOS

FAIXA DE PREÇO

-
+

de R$0 até R$50

-
+

de R$51 até R$150

-
+

de R$151 até R$300

-
+

de R$301 até R$500

-
+
@@ -171,8 +271,8 @@

FAIXA DE PREÇO

-
-