Skip to content

Feito o E-commerce faltando uma funcionalidade, entrega final #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ghost wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Feito o E-commerce faltando uma funcionalidade, entrega final #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<meta name="theme-color" content="#000000" />
<meta
name="description"
Expand All @@ -26,7 +27,7 @@
-->
<title>React App</title>
</head>
<body>
<body style="background-color: #1c1d24;">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
Expand Down
184 changes: 145 additions & 39 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,158 @@
import React from 'react';
import './App.css';
import Produtos from './components/Produtos.js'
import Carrinho from './components/Carrinho.js'
import Filtros from './components/Filtros.js'
import IconCompra from './Imagens/compra.png'
import Filtros from './components/Filtros'
import styled from 'styled-components'
import IconCompra from './Imagens/compra.png'

const DivPai = styled.div`
display: flex;
justify-content: space-between;
height: 95vh;
margin: 5px;
width:100%;
const DivComCarrinho = styled.div`
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: white;
display: grid;
grid-template-columns: 20% 60% 20%;
grid-template-rows: 1fr;
height: 98%;
width: 98%;
box-sizing: border-box;
margin: 1%;
`

const FormactCar = styled.img`
height: 40px;
const DivSemCarrinho = styled.div`
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: white;
display: grid;
grid-template-columns: 25% 75%;
grid-template-rows: 1fr;
height: 98%;
width: 98%;
box-sizing: border-box;
margin: 1% 0 1% 1%;
`

const DivCar = styled.div`
background-color: #FFFF;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 0px 0px 5px 1px gray;
position: fixed;
bottom: 10px;
right: 10px;
const IconeCarrinho = styled.img`
height: 40px;
`
const DivApareceCarrinho = styled.div`
background-color: #FFFF;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 0px 0px 2px 4px #32ad27;
position: fixed;
bottom: 20px;
left: 20px;
:hover{
box-shadow: 0px 0px 2px 4px green;
cursor: pointer;
}
`

class App extends React.Component {
state = {
produtos: [
{id:1, nome: "Produto 1", valor: 100.0, imagemProd: "https://picsum.photos/150/150?ramdon=1"},
{id:2, nome: "Produto 2", valor: 150.0, imagemProd: "https://picsum.photos/150/150?ramdon=2"},
{id:3, nome: "Produto 3", valor: 300.0, imagemProd: "https://picsum.photos/150/150?ramdon=3"},
{id:4, nome: "Produto 4", valor: 400.0, imagemProd: "https://picsum.photos/150/150?ramdon=4"},
{id:5, nome: "Produto 5", valor: 500.0, imagemProd: "https://picsum.photos/150/150?ramdon=5"},
{id:6, nome: "Produto 6", valor: 600.0, imagemProd: "https://picsum.photos/150/150?ramdon=6"},
{id:7, nome: "Produto 7", valor: 700.0, imagemProd: "https://picsum.photos/150/150?ramdon=7"},
{id:8, nome: "Produto 8", valor: 800.0, imagemProd: "https://picsum.photos/150/150?ramdon=8"}
],
carrinho: false,
maxValor: "",
minValor: "",
buscaProduto: "",
seletorOrdem: "cresc"
}

addProdutoCarrinho = (prodid) => {
const itensCarrinho = this.state.produtos.filter((item) => {
if(prodid === item.id){
return true
}else{
return false
}
})
console.log(this.state.itensCarrinho)
}
onChangeInputMax = (event) => {
this.setState({ maxValor: event.target.value });
};
onChangeInputMin = (event) => {
this.setState({ minValor: event.target.value });
};
onChangeInputBusca = (event) => {
this.setState({ buscaProduto: event.target.value });
};
onChangeFilter = (event) => {
this.setState({ seletorOrdem: event.target.value })
}
renderizaCarrinho = ()=>{
this.setState({carrinho: !this.state.carrinho});
}

function App() {
mensagem = this.state.produtos.length


return (
<DivPai className="App">
<Filtros />
<Produtos />
{/* <Carrinho /> */}
<DivCar>
<FormactCar src={IconCompra}/>
</DivCar>
</DivPai>
);
render(){
if(this.state.carrinho){
return (
<DivComCarrinho className="App">
<Filtros arrayProd = {this.state.produtos}
max = {this.state.maxValor}
min = {this.state.minValor}
busca = {this.state.buscaProduto}
imax = {this.onChangeInputMax}
imin = {this.onChangeInputMin}
ibusca = {this.onChangeInputBusca}
/>
<Produtos
msg = {this.mensagem}
arrayProd = {this.state.produtos}
maxValor = {this.state.maxValor}
minValor = {this.state.minValor}
buscaProduto = {this.state.buscaProduto}
seletorOrdem = {this.state.seletorOrdem}
onChangeFilter = {this.onChangeFilter}
addProduto = {this.addProdutoCarrinho}
/>
<Carrinho
itensCarrinho = {this.state.itensCarrinho}
/>
<DivApareceCarrinho onClick={this.renderizaCarrinho}>
<IconeCarrinho src={IconCompra} />
</DivApareceCarrinho>
</DivComCarrinho>
)
}
return (
<DivSemCarrinho className="App">
<Filtros arrayProd = {this.state.produtos}
max = {this.state.maxValor}
min = {this.state.minValor}
busca = {this.state.buscaProduto}
imax = {this.onChangeInputMax}
imin = {this.onChangeInputMin}
ibusca = {this.onChangeInputBusca}
/>
<Produtos
msg = {this.mensagem}
arrayProd = {this.state.produtos}
maxValor = {this.state.maxValor}
minValor = {this.state.minValor}
buscaProduto = {this.state.buscaProduto}
seletorOrdem = {this.state.seletorOrdem}
onChangeFilter = {this.onChangeFilter}
addProduto = {this.addProdutoCarrinho}
/>
<DivApareceCarrinho onClick={this.renderizaCarrinho}>
<IconeCarrinho src={IconCompra} />
</DivApareceCarrinho>
</DivSemCarrinho>
);
}
}

export default App;
export default App;
17 changes: 10 additions & 7 deletions src/components/Carrinho.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,26 @@ import React from 'react'
import styled from 'styled-components'

const Cart = styled.div`
border: 1px solid black;
text-align: left;
min-width: 20%;
height: 95vh;
border: 1px solid #2b303a;
border-radius: 2px;
box-shadow: 0px 0px 5px 0.1px #2b303a;
width: 100%;
height: 100%;
> * {
margin-left: 10px;
}
`


class Carrinho extends React.Component{
render(){

return(
<Cart>
<h3>Carrinho:</h3>

<p>Total: R$</p>
{this.props.itensCarrinho}
</Cart>
)
}
}

export default Carrinho
60 changes: 31 additions & 29 deletions src/components/Filtros.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,48 @@ import React from 'react'
import styled from 'styled-components'

const DivFilter = styled.div`
border: solid 1px black;
justify-content: left;
min-width: 20%;
height: 95vh;
text-align: center;
border: solid 1px #2b303a;
border-radius: 2px;
box-shadow: 0px 0px 5px 0.1px #2b303a;
width: 100%;
height: 100%;
> * {
margin-left: 10px;
}
`

const DivTeste = styled.div`
display: flex;
padding: 10px;
const Espaco = styled.div`
margin: 32px 10px;
&:nth-child(2){
margin-top: 50px;
}
`

const InputProd = styled.input`
width: 60%;
height: 15px;
margin: 0px 0px 0px 10px;
display:block;
width: 80%;
height: 16px;
border-radius: 2px;
border: none;
`


class Filtros extends React.Component{
class Filtros extends React.Component{
render(){
return(
<DivFilter>
<h3>Filtros:</h3>
<br/>
<DivTeste>
<span>Valor Mínimo:</span>
<InputProd type="Number"/>
</DivTeste>
<DivTeste>
<span>Valor Máximo:</span>
<InputProd type="Number"/>
</DivTeste>
<DivTeste>
<span>Busca Produto:</span>
<InputProd type="text"/>
</DivTeste>
<Espaco>
<span>Valor Mínimo:</span>
<InputProd type="number" value={this.props.min} onChange={this.props.imin}/>
</Espaco>
<Espaco>
<span>Valor Máximo:</span>
<InputProd type="number" value={this.props.max} onChange={this.props.imax}/>
</Espaco>
<Espaco>
<span>Busca Produto:</span>
<InputProd type="text" value={this.props.busca} onChange={this.props.ibusca}/>
</Espaco>
</DivFilter>
)
}
}

export default Filtros
Loading