From 852bf8a5400d5c74f51bc3cb6f1be2cb72db52bf Mon Sep 17 00:00:00 2001 From: WBernardo Date: Fri, 8 Jan 2021 16:43:49 -0300 Subject: [PATCH 1/2] =?UTF-8?q?Estiliza=C3=A7=C3=A3o=20e=20Filtro=20de=20B?= =?UTF-8?q?usca?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 97 +++++++++++++---------- src/Components/Carrinho/Carrinho.js | 12 +-- src/Components/Filtro/Filtro.js | 13 ++- src/Components/Home/FiltroPreco.js | 0 src/Components/Home/Header.js | 50 ++++++++++++ src/Components/Home/Home.js | 33 ++++++-- src/Components/Home/QuantidadeProdutos.js | 26 ------ 7 files changed, 142 insertions(+), 89 deletions(-) create mode 100644 src/Components/Home/FiltroPreco.js create mode 100644 src/Components/Home/Header.js delete mode 100644 src/Components/Home/QuantidadeProdutos.js diff --git a/src/App.js b/src/App.js index c20200c..1f06e6b 100644 --- a/src/App.js +++ b/src/App.js @@ -3,74 +3,88 @@ import styled from 'styled-components' import Carrinho from './Components/Carrinho/Carrinho'; import Filtro from './Components/Filtro/Filtro'; import Home from './Components/Home/Home' -import QuantidadeProdutos from './Components/Home/QuantidadeProdutos'; +import Header from './Components/Home/Header'; const Loja = styled.div` -display: flex; -flex-direction: column; -border: 1px solid black; -margin: 1vw; -height: 99vh; +display: grid; +grid-template-columns: 1fr 1fr 1fr; +background-color: #1C1C1C; width: 100vw; ` const ContainerProdutos = styled.div ` display: grid; +grid-template-columns: 1fr 1fr 1fr 1fr; +grid-template-rows: 1fr 1fr; +text-align: center; +color: white; ` export default class App extends Component { - produtos = [{ + state= { + produtos: [{ id: 1, - name: "Foguete da Missão Apollo 11", - value: 10000.0, - imageUrl: "https://picsum.photos/200/200", + name: "Esqui em Urano", + value: 51000, + imageUrl: "https://cdn.pixabay.com/photo/2012/01/09/10/56/uranus-11625_960_720.jpg", }, { id: 2, - name: "Foguete da Missão Apollo 11", - value: 10000.0, - imageUrl: "https://picsum.photos/200/200", + name: "Campos Brilhantes Lunares", + value: 36000, + imageUrl: "https://cdn.pixabay.com/photo/2011/12/13/16/24/moon-11026_960_720.jpg", }, { id: 3, - name: "Foguete da Missão Apollo 11", - value: 10000.0, - imageUrl: "https://picsum.photos/200/200", + name: "Núpcias em Vênus", + value: 25000, + imageUrl: "https://cdn.pixabay.com/photo/2011/12/13/14/39/venus-11022_960_720.jpg", }, { id: 4, - name: "Foguete da Missão Apollo 11", - value: 10000.0, - imageUrl: "https://picsum.photos/200/200", + name: "Monte Olímpo de Marte", + value: 20000, + imageUrl: "https://cdn.pixabay.com/photo/2011/12/13/14/30/mars-11012_960_720.jpg", }, { id: 5, - name: "Foguete da Missão Apollo 11", - value: 10000.0, - imageUrl: "https://picsum.photos/200/200", + name: "Manchas de Júpiter", + value: 32000, + imageUrl: "https://cdn.pixabay.com/photo/2012/10/26/02/44/moon-63136_960_720.jpg", }, { id: 6, - name: "Foguete da Missão Apollo 11", - value: 10000.0, - imageUrl: "https://picsum.photos/200/200", + name: "Anéis de Saturno", + value: 43000, + imageUrl: "https://cdn.pixabay.com/photo/2012/11/28/10/54/saturn-67671_960_720.jpg", }, { id: 7, - name: "Foguete da Missão Apollo 11", - value: 10000.0, - imageUrl: "https://picsum.photos/200/200", + name: "Bate-Volta em Mercúrio", + value: 57000, + imageUrl: "https://cdn.pixabay.com/photo/2012/01/09/09/33/mercury-11591_960_720.png", }, { id: 8, - name: "Foguete da Missão Apollo 11", - value: 10000.0, - imageUrl: "https://picsum.photos/200/200", + name: "Kitesurf em Netuno", + value: 74000, + imageUrl: "https://cdn.pixabay.com/photo/2012/11/28/09/17/neptune-67537_960_720.jpg", }, - ] + ], + textoInput: '' +} +onChangeTextoInput = (e) =>{ + this.setState({textoInput:e.target.value}) + } +filtraProdutosBusca = () => { + return this.state.produtos.filter(produto => produto.name.includes(this.state.textoInput) ) +} + render() { - const componentProduto = this.produtos.map((produto) => { + const listaFiltrada = this.filtraProdutosBusca() + + const componentProduto = listaFiltrada.map((produto) => { return (
- - -
- +
+
+ + + {componentProduto} -
- + +
) } -} - +} \ No newline at end of file diff --git a/src/Components/Carrinho/Carrinho.js b/src/Components/Carrinho/Carrinho.js index 2378586..ac18bca 100644 --- a/src/Components/Carrinho/Carrinho.js +++ b/src/Components/Carrinho/Carrinho.js @@ -2,24 +2,24 @@ import React, { Component } from 'react' import styled from 'styled-components' const Cart = styled.div` -border: 1px solid black; margin-top: 1vw; +margin-left: 1.5vw; padding-left: 1vw; padding-right: 1vw; +border: 1px solid white; height: 95vh; -width: 13vw; -position: relative; +width: 15vw; +color: white; ` - export default class Carrinho extends Component { render() { return ( -

Carrinho

+

Carrinho

1x Produto

1x Produto

Total: R$ 396.00

 ) } -} +} \ No newline at end of file diff --git a/src/Components/Filtro/Filtro.js b/src/Components/Filtro/Filtro.js index 1307fa7..9ccd171 100644 --- a/src/Components/Filtro/Filtro.js +++ b/src/Components/Filtro/Filtro.js @@ -5,25 +5,24 @@ const BoxFiltro = styled.div` margin-top: 1vw; padding-left: 1vw; padding-right: 1vw; -border: 1px solid black; +border: 1px solid white; height: 95vh; -width: 22vw; +width: 15vw; +color: white; ` - export default class Filtro extends Component { render() { return (

Filtros

+

- + this.props.filtraProdutosBusca(e)} /> ) } -} - - +} \ No newline at end of file diff --git a/src/Components/Home/FiltroPreco.js b/src/Components/Home/FiltroPreco.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Home/Header.js b/src/Components/Home/Header.js new file mode 100644 index 0000000..b30e1fa --- /dev/null +++ b/src/Components/Home/Header.js @@ -0,0 +1,50 @@ +import React, { Component } from 'react' +import styled from 'styled-components' + +const Cabecalho = styled.div` +width: 100vw; +display: grid; +grid-template-columns: auto auto auto; +align-items: center; +background-color: #363636; +` + +const HeaderLeft = styled.p` +text-align: left; +padding-left: 30px; +color: white; + +` + +const Titulo = styled.a` +text-align: center; +` + +const HeaderRight = styled.p` +text-align: right; +padding-right: 30px; +color: white; + +` + + +export default class Header extends Component { + + render() { + return ( + + Quantidade de Produtos: + +

LABECOMMERCE 5

 + + + + + + + ) + } +} diff --git a/src/Components/Home/Home.js b/src/Components/Home/Home.js index 4074d5e..390ec28 100644 --- a/src/Components/Home/Home.js +++ b/src/Components/Home/Home.js @@ -1,18 +1,35 @@ import React, { Component } from 'react' import styled from 'styled-components' +const Produto = styled.div` +border: 1px dotted white; +background-color: green; +margin-left: 0.2vw; +margin-right: 0.2vw; +margin-bottom: 0.3vw; +margin-top: 0.3vw; +` -export default class Home extends Component { +const Button = styled.button` +padding: 2vh 2.6vw; +background-color: black; +color: white; +` + +const Imagem = styled.img` +width: 200px; +height: 200px; +` +export default class Home extends Component { render() { return ( - -
- + +

{this.props.name}

-

{this.props.value}

- -
+

R${this.props.value},00

+ + ) } -} +} \ No newline at end of file diff --git a/src/Components/Home/QuantidadeProdutos.js b/src/Components/Home/QuantidadeProdutos.js deleted file mode 100644 index a2168d8..0000000 --- a/src/Components/Home/QuantidadeProdutos.js +++ /dev/null @@ -1,26 +0,0 @@ -import React, { Component } from 'react' -import styled from 'styled-components' - -const Quantidade = styled.div` -margin-top: 1vw; -padding-left: 1vw; -padding-right: 1vw; -border: 1px solid black; -height: 15vh; -width: 56vw; -` - -export default class QuantidadeProdutos extends Component { - render() { - return ( - -

Quantidade de Produto:

- - - - ) - } -} From 401c6cfdcf7170ef846095ec91aa438cd3865d71 Mon Sep 17 00:00:00 2001 From: WBernardo Date: Sun, 10 Jan 2021 21:58:36 -0300 Subject: [PATCH 2/2] =?UTF-8?q?Finaliza=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 294 +++++++++++++++----- src/Components/Carrinho/ContainerProduto.js | 30 ++ src/Components/Carrinho/ProdutoCarrinho.js | 53 ++++ src/Components/Filtro/Filtro.js | 2 +- src/Components/Home/Header.js | 26 +- src/Components/Home/Home.js | 7 - 6 files changed, 316 insertions(+), 96 deletions(-) create mode 100644 src/Components/Carrinho/ContainerProduto.js create mode 100644 src/Components/Carrinho/ProdutoCarrinho.js diff --git a/src/App.js b/src/App.js index 1f06e6b..9ef25cb 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,9 @@ import React, { Component } from 'react'; -import styled from 'styled-components' -import Carrinho from './Components/Carrinho/Carrinho'; +import styled from 'styled-components'; +import ContainerProdutoCarrinho from './Components/Carrinho/ContainerProduto'; +import ProdutoCarrinho from './Components/Carrinho/ProdutoCarrinho'; import Filtro from './Components/Filtro/Filtro'; -import Home from './Components/Home/Home' +import Home from './Components/Home/Home'; import Header from './Components/Home/Header'; const Loja = styled.div` @@ -11,101 +12,240 @@ grid-template-columns: 1fr 1fr 1fr; background-color: #1C1C1C; width: 100vw; ` -const ContainerProdutos = styled.div ` +const ContainerProdutos = styled.div` display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; text-align: center; color: white; ` +const Button = styled.button` +padding: 2vh 2.6vw; +background-color: black; +color: white; +` -export default class App extends Component { - state= { - produtos: [{ - id: 1, - name: "Esqui em Urano", - value: 51000, - imageUrl: "https://cdn.pixabay.com/photo/2012/01/09/10/56/uranus-11625_960_720.jpg", - }, - { - id: 2, - name: "Campos Brilhantes Lunares", - value: 36000, - imageUrl: "https://cdn.pixabay.com/photo/2011/12/13/16/24/moon-11026_960_720.jpg", - }, - { - id: 3, - name: "Núpcias em Vênus", - value: 25000, - imageUrl: "https://cdn.pixabay.com/photo/2011/12/13/14/39/venus-11022_960_720.jpg", - }, - { - id: 4, - name: "Monte Olímpo de Marte", - value: 20000, - imageUrl: "https://cdn.pixabay.com/photo/2011/12/13/14/30/mars-11012_960_720.jpg", - }, - { - id: 5, - name: "Manchas de Júpiter", - value: 32000, - imageUrl: "https://cdn.pixabay.com/photo/2012/10/26/02/44/moon-63136_960_720.jpg", - }, - { - id: 6, - name: "Anéis de Saturno", - value: 43000, - imageUrl: "https://cdn.pixabay.com/photo/2012/11/28/10/54/saturn-67671_960_720.jpg", - }, - { - id: 7, - name: "Bate-Volta em Mercúrio", - value: 57000, - imageUrl: "https://cdn.pixabay.com/photo/2012/01/09/09/33/mercury-11591_960_720.png", - }, - { - id: 8, - name: "Kitesurf em Netuno", - value: 74000, - imageUrl: "https://cdn.pixabay.com/photo/2012/11/28/09/17/neptune-67537_960_720.jpg", - }, - ], - - textoInput: '' +const BotaoRemover = styled.button` +&:hover { + background-color: green; } -onChangeTextoInput = (e) =>{ - this.setState({textoInput:e.target.value}) +width: 16vw; +height: 8vh; +background-color: black; +color: white; +font-size: 18px; +margin-left: auto; +margin-right: auto +` + +let valorTotal = 0 + +export default class App extends Component { + state = { + produtos: [{ + id: 1, + name: "Esqui em Urano", + value: 5100, + imageUrl: "https://cdn.pixabay.com/photo/2012/01/09/10/56/uranus-11625_960_720.jpg", + quantidade: 0 + }, + { + id: 2, + name: "Campos Brilhantes Lunares", + value: 3600, + imageUrl: "https://cdn.pixabay.com/photo/2011/12/13/16/24/moon-11026_960_720.jpg", + quantidade: 0 + }, + { + id: 3, + name: "Núpcias em Vênus", + value: 2500, + imageUrl: "https://cdn.pixabay.com/photo/2011/12/13/14/39/venus-11022_960_720.jpg", + quantidade: 0 + }, + { + id: 4, + name: "Monte Olímpo de Marte", + value: 2000, + imageUrl: "https://cdn.pixabay.com/photo/2011/12/13/14/30/mars-11012_960_720.jpg", + quantidade: 0 + }, + { + id: 5, + name: "Manchas de Júpiter", + value: 3200, + imageUrl: "https://cdn.pixabay.com/photo/2012/10/26/02/44/moon-63136_960_720.jpg", + quantidade: 0 + }, + { + id: 6, + name: "Anéis de Saturno", + value: 4300, + imageUrl: "https://cdn.pixabay.com/photo/2012/11/28/10/54/saturn-67671_960_720.jpg", + quantidade: 0 + }, + { + id: 7, + name: "Bate-Volta em Mercúrio", + value: 5700, + imageUrl: "https://cdn.pixabay.com/photo/2012/01/09/09/33/mercury-11591_960_720.png", + quantidade: 0 + }, + { + id: 8, + name: "Kitesurf em Netuno", + value: 7400, + imageUrl: "https://cdn.pixabay.com/photo/2012/11/28/09/17/neptune-67537_960_720.jpg", + quantidade: 0 + }, + ], + + textoInput: '', + + produtosCarrinho: [ + ], + + inputCrescente: "Crescente" + } + + selecionarProduto = (id) => { + const produtoSelecionado = this.state.produtos.forEach((produto) => { + if (id === produto.id && produto.quantidade === 0) { + valorTotal += produto.value + produto.quantidade = 1 + const novoProduto = { + imagem: produto.imageUrl, + id: produto.id, + quantidade: produto.quantidade, + nome: produto.name, + valor: produto.value + } + const novaListaDeProdutos = [...this.state.produtosCarrinho, novoProduto] + this.setState({ produtosCarrinho: novaListaDeProdutos }) + this.setState({ total: valorTotal }) + return novoProduto + } else if (id === produto.id) { + valorTotal += produto.value + produto.quantidade += 1 + const novaLista = this.state.produtosCarrinho.filter((produto) => { + if (produto.id !== id) { + return produto.id + } + }) + const novoProdutoQuantidade = { + ...produto, + imagem: produto.imageUrl, + quantidade: produto.quantidade, + nome: produto.name, + valor: produto.value * produto.quantidade + } + const novaListaDeProdutos = [...novaLista, novoProdutoQuantidade] + this.setState({ produtosCarrinho: novaListaDeProdutos }) + this.setState({ total: valorTotal }) + return produto + } else { + return produto + } + }) + } + + removerProduto = (id) => { + const novaLista = this.state.produtosCarrinho.filter((produto) => { + if (produto.id === id) { + valorTotal -= produto.valor + return !produto.id + } if (produto.id !== id) { + return produto.id + } + }); + this.setState({ produtosCarrinho: novaLista }); + } + + onChangeCrescente = (e) => { + this.setState({ inputCrescente: e.target.value }); + switch (this.state.inputCrescente) { + case "Crescente": + return this.setState({ + ListaProdutos: this.state.produtos.sort(function (a, b) { + return b.value - a.value; + }), + }); + case "Decrescente": + return this.setState({ + ListaProdutos: this.state.produtos.sort(function (a, b) { + return a.value - b.value; + }), + }); + default: + return true; + } + } + + onChangeTextoInput = (e) => { + this.setState({ textoInput: e.target.value }) + } + + filtraProdutosBusca = () => { + return this.state.produtos.filter(produto => produto.name.includes(this.state.textoInput)) } -filtraProdutosBusca = () => { - return this.state.produtos.filter(produto => produto.name.includes(this.state.textoInput) ) -} - render() { + + const componentCarrinho = this.state.produtosCarrinho.map((produto) => { + return ( +
+ + this.removerProduto(produto.id)}>Remover Produto +
+ ) + }) + const listaFiltrada = this.filtraProdutosBusca() const componentProduto = listaFiltrada.map((produto) => { return (
+
+ ) - }) - return( + }) + + return (
-
- - - - {componentProduto} - - - +
+ + + + {componentProduto} + +
+ + + Total: RS{valorTotal},00 +
+
) } -} \ No newline at end of file +} diff --git a/src/Components/Carrinho/ContainerProduto.js b/src/Components/Carrinho/ContainerProduto.js new file mode 100644 index 0000000..f07f072 --- /dev/null +++ b/src/Components/Carrinho/ContainerProduto.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react' +import styled from 'styled-components' + +const ContainerProduto = styled.div` +border: 1px solid black; +margin-top: 1vw; +margin-left: 2vw; +padding-left: 1vw; +padding-right: 1vw; +height: 80vh; +width: 15vw; +background-color: gray; +display: flex; +justify-content: center; +` +const ContainerProdutos = styled.div` +height: 90vh; +` +export default class ContainerProdutoCarrinho extends Component { + render() { + return ( + +

Carrinho:

+ +
{this.props.produtoCarrinho}
+ + + ) + } +} \ No newline at end of file diff --git a/src/Components/Carrinho/ProdutoCarrinho.js b/src/Components/Carrinho/ProdutoCarrinho.js new file mode 100644 index 0000000..e7839c2 --- /dev/null +++ b/src/Components/Carrinho/ProdutoCarrinho.js @@ -0,0 +1,53 @@ +import React, { Component } from 'react' +import styled from 'styled-components' + +const Produto = styled.div` +margin: 0; +padding: 0; +height: 25vh; +display: flex; +flex-direction: column; +` +const Imagem = styled.img` +width: 5vw; +` +const Teste = styled.div` +display: flex; +flex-direction: column; +height: 10.6vh; +` +const DivImagem = styled.div` +width: 15vw; +heigth: 13vh; +` +const Teste2 = styled.div` +display: flex; +height: 15vh; +width: 15vw; +padding-top: 0.5vh; +margin-left: auto; +margin-right: auto; +` +const Valor = styled.div` +font-size: 30px; +text-align: center; +` +const Nome = styled.p` +width: 11vw; +` +export default class ProdutoCarrinho extends Component { + render() { + return ( + + + + +

{this.props.quantidade}x

+ {this.props.name} + + + R${this.props.value},00 + + ) + } +} \ No newline at end of file diff --git a/src/Components/Filtro/Filtro.js b/src/Components/Filtro/Filtro.js index 9ccd171..db2cfe4 100644 --- a/src/Components/Filtro/Filtro.js +++ b/src/Components/Filtro/Filtro.js @@ -17,7 +17,7 @@ export default class Filtro extends Component {

Filtros



- + this.props.ValorMinimo(e)} /> diff --git a/src/Components/Home/Header.js b/src/Components/Home/Header.js index b30e1fa..0d7e6b3 100644 --- a/src/Components/Home/Header.js +++ b/src/Components/Home/Header.js @@ -30,20 +30,24 @@ color: white; export default class Header extends Component { + render() { return ( - Quantidade de Produtos: - -

LABECOMMERCE 5

 - - - - - + Quantidade de produtos: {this.props.quantidade} + +

LABECOMMERCE 5

 + + + + + ) } diff --git a/src/Components/Home/Home.js b/src/Components/Home/Home.js index 390ec28..82f802f 100644 --- a/src/Components/Home/Home.js +++ b/src/Components/Home/Home.js @@ -10,12 +10,6 @@ margin-bottom: 0.3vw; margin-top: 0.3vw; ` -const Button = styled.button` -padding: 2vh 2.6vw; -background-color: black; -color: white; -` - const Imagem = styled.img` width: 200px; height: 200px; @@ -28,7 +22,6 @@ export default class Home extends Component {

{this.props.name}

R${this.props.value},00

- ) }