Projeto do zero ao deploy com HTML, CSS, TailwindCSS, JavaScript - AULA 02

Fala Turma seja muito bem-vindo a nossa segunda aula aqui onde a gente vai finalizar e fazer aqui a parte de dar vida para esse projeto aqui do nosso cardup online né um projeto onde cara tá sensacional primeiro passo antes da gente ver as funcionalidades rev um pouquinho aqui bora rodar esse projeto Então se a gente lembrar preciso vir aqui dentro ó dentro do nosso arquivo dentro do do vs code index.html.gz [Música] tá então o que a gente vai fazer aqui é vou vir no meu CMD Então abre o CMD dentro da pasta do seu projeto

e roda né o nosso npm Run espaço Dev lembra que o CMD tem que estar dentro da pasta do seu projeto no meu caso eu chamei de cardápio tá então tá rodando aqui já deixa ele só buildar aqui beleza deu um Don posso Minimizar Vou atualizar aqui ó e perfeito né então aqui a gente já deixou ele responsivo criou a estrutura Com HTML cara tá sensacional ó mobile Zão legal demais show de bola agora o que que falta né Mateus agora falta a gente tornar isso aqui dinâmico porque quando eu clico ou quando eu clico

em abrir o carrinho nada acontece E aí o que a gente precisa fazer de fato é tornar isso dinâmico usando JavaScript então primeiro algumas funcionalidades que a gente vai fazer aqui tá primeira coisa a gente já tá listando os produtos concorda perfeito né a gente então tem Que adicionar o produto no carrinho verificar e os itens no carrinho pela home ou seja quando eu adicionar por exemplo duas vezes o Hambúrger Smash ao invés de eu adicionar dois itens duplicado uma coisa que a gente já tem que fazer na lógica que a gente vai implementar é

olha eu quero a quantidade por exemplo ao invés de um quero quantidade dois aqui ó tá eu quero então que ele seja inteligente o nosso algoritmo para fazer esse filtro aí e a Gente vai aplicar tá eu quero então que ele possa remover também então vamos começar isso aqui primeiro que a gente vai começar é Vou atualizar quando eu clicar aqui em Veja meu carrinho eu quero abrir o nosso modal eu quero também mostrar o nosso modal vamos começar então ó pega o seu café Opa foi até pro lado aqui e bora começar eu vou

vir aqui vou diminuir pra gente começar no mobile vou minimizar aqui pra gente poder começar Então a gente tem o nosso Arquivo Zinho HTML vou aumentar aqui ele um pouquinho e dentro aqui dele ó aqui na raiz mesmo vou criar um New file e vou chamar ele de script.js Então a gente vai começar criando vou dar um console pon log teste teste pra gente saber se ele tá sendo executado então se eu salvar isso aqui por enquanto a gente só cria um arquivo de script Agora eu preciso falar olha a gente vai chamar ele dentro

aqui do nosso index.html.gz também dessa forma ó antes Do fechamento da tag do body ó antes do fechamento da tag do Body eu vou dar aqui uma tag de script 2. src E aí eu vou importar o nosso arquivo que a gente chamou de script.js então a gente pode vir aqui chamar o nosso script.js e nessa parte aqui então eu posso salvar o nosso código salvei aqui salva aqui o HTML e antes da gente continuar aqui ó lembra de curtir aqui embaixo pega aí esse projeto a gente que tá na segunda aula Compartilha esse projeto

aí com seu Amigo que tá começando compartilha no seu linked compartilha no seu Instagram para ajudar para mais pessoas fazer esse projeto aprender também e evoluir então pega esse projeto aqui se inscreve no nosso canal do YouTube também dessa forma você ajuda a gente trazer mais conteúdo para vocês aqui beleza então faz isso aí e aí vamos continuar então a gente fez o qu importou o script dentro do nosso aqui HTML então agora a gente tá falando para ele executar esse Arquivo aqui então quando a gente abrir o index HTML se eu abrir aqui o

inspecionar ó botão direito inspecionar console e eu atualizar ó quando abre a minha aplicação ele executa o nosso console ó o teste de teste aqui ó perfeito né maravilha agora o que que a gente precisa fazer eu preciso entender que agora eu vou manipular a nossa árvore de elementos que é conhecida como Dom né então a gente vai manipular o dom para fazer o quê quando você clicar por Exemplo num item que é abrir o meu carrinho eu quero pegar o clique desse cara ou pegar qual que é o item que você tá clicando e

manipular nossa árvore de elementos por exemplo olha peguei o clique que Você clicou nesse item que tem esse ID aqui agora abre ou adiciona alguma propriedade em outro item como é que a gente pode fazer isso né então a gente já sabe que quando a gente construiu lá o nosso carrinho olha só a gente construiu aqui o nosso modal aqui Ó do carrinho que esse modal ele tá como ele tá escondido né e ele só vai aparecer quando a gente adicionar aqui ao invés do rine a gente adicionar um Flex se eu adicionar aqui o

Flex ó deixa eu puxar aqui um pouquinho ó diminuir aqui ó vou Minimizar quando eu adicionar o Flex aqui dentro do nosso modal cart e eu salvar ele vai aparecer o nosso modal Então beleza né Mateus Se você falou que você adicionando o Flex ele aparece ele começa como hiding recorda então salvei Aqui ó então quando eu clicar no Veja meu carrinho eu quero ir lá nesse nosso div aqui ó e adicionar essa classe tá então o que a gente vai fazer é vou até dar um enter aqui ó eu vou criar aqui um ID

para esse cara eu vou chamar ele aqui de cart tro cart TR modal Vou salvar aqui salvei então a gente deu um ID ou seja um identificador uma forma da gente Identificar qual que é esse cara ou seja essa dívida o nosso carrinho vamos lá então agora vou vir no nosso script e a Gente vai começar a manipular então primeiro passo que eu quero fazer é eu quero pegar também o nosso Diva inteira do menu porque se a gente lembrar ó a gente tem aqui ó vamos subir tudo aqui ó sobe sobe tudo a gente

tem uma div ó vou clicar aqui para minimizar ó toda ela é o nosso menu tá vendo início e fim menu dentro do menu a gente tem aqui o Main a nossa Grid onde tem os produtos né as bebidas Então esse essa div tem um a de menu então a gente pode pegar ela também Então vou criar aqui uma con chamada menu igual a document.get Element by ID Cuidado que o e do Element aqui o e do Element aqui ó é maiúsculo o b e o i aqui é maiúsculo tem que ser maiúsculo tá E

aqui então nada mais é do que eu falando olha pega dentro da nossa árvore ou seja dentro dos elementos da nossa página HTML Um item que tenha algum ID Qual o ID eu quero pegar o ID por exemplo menu tá Olha que bacana salvei Então dentro aqui se a gente der um Console pon log nesse nosso menu Olha que bacana salvei se eu atualizar isso aqui vamos fazer passo a passo né se a gente abrir aqui o inspecionar novamente para ver o retorno do console e a gente abriu o inspecionar vou aqui no console ele

fala para mim que a gente pegou Então dentro desse menuzinho a gente tem um elemento HTML ó e dentro desse HTML Eu tenho todas as propriedades ó olha que bacana eu tenho aqui os Children que nada mais é do que a Main lembra que a Gente tem uma m a gente tem outra div ó quando eu passo o mouse em cima dele ele marca no HTML também ó presta atenção vou passar o mouse em cima da M ó olha só só deixei o mouse em cima da M ele marcou ali na direita onde que é

m Se eu colocar div Se eu colocar aqui o menu então ele tem tudo aqui ó tá vendo a gente pode acessar mais paraa frente cada item eu posso acessar qualquer as classes que tem dentro ó tá vendo os itens ó que tem dentro os textos ó tá Vendo a gente consegue acessar tudo já já a gente vai manipular pelo JavaScript então Além de eu pegar o menu eu quero pegar também o conch vou chamar de cart btn igual document.get Element by ID eu vou pegar aqui ó a gente tem aqui também o nosso botãozinho

do carrinho né então se a gente olhar aqui ó lá embaixo lá a gente tem aqui no nosso footer ó nosso foter tá aqui a gente tem nesse botão aqui ó buton um ID também ó do Veja meu carrinho chamado cart btn Então vou Copiar ele aqui e eu vou pegar esse cara também tá então vamos primeiro pegar todos os itens que a gente vai querer manipular como adicionar aqui no carrinho Abrir também o botão vamos pegar todos esses itens aqui para depois a gente manipular Então vou pegar aqui um conch cart modal igual a

document.get Element byid eu quero pegar aqui também além do cart aqui eu quero também pegar o nosso modal né então em cima aqui a gente acabou de dar um cart modal que é Referente quando a gente quiser acessar a dívida modal Então vamos colocar aqui aqui ó cart modal con também quero pegar aqui o nosso cart items container igual a document p get Element by ID o Card items container a gente pode pegar os itens tem no container ou seja os itens que vão estar dentro do nosso carrinho Então dentro do nosso modal cart a

gente vai ter uma div ó que a gente já deu um ID para ela chamado cart items vamos pegar ela também então colocar ela aqui Ó então quando eu acessar esse cart items container a gente vai estar acessando ou seja os itens que a gente vai colocar dentro do carrinho beleza perfeito né depois disso vamos pegar aqui também ó conch cart Total total igual a document pon get Element by ID Vamos pegar lá então aqui eu quero seja o texto do total né então onde que tá o total O total eu quero que ele apareça

aqui ó lembra que a gente colocou eu também já dei um ID para ele Ó então vou Pegar aqui o ID que eu dei Vou colocar aqui dentro ó cart Total perfeito né cont que mais que a gente vai ter a gente vai ter também um checkout checkout btn com b maiúsculo igual a document.get Element by ID Agora vamos pegar o botãozinho de checkout que aquele de finalizar o carrinho então a gente tem aqui também ó nosso botãozinho de checkout que é o finalizar o pedido né então a gente tem aqui Um ID chamado checkout

btn que foi o ID que a gente Criou na aula na primeira aula então vou colocar ele aqui ó Então pegamos ele aqui também vamos pegar mais um Então conch vamos pegar aqui o nosso Close modal btn iG document.get Element by ID a gente também deu Aqui ó o botãozinho fechar que eu também tenho um ID para ele que é o nosso Close modal VTN Vamos colocar aqui ó perfeito Maravilha const a gente também tem o nosso Card Counter que que é cart Counter é basicamente um número Zinho que aqui embaixo vai Aparecer né onde

eu quero que apareça aqui ó tá então cart Counter ig a document.get Element by ID E aí a gente pode lá no nosso footer vamos olhar aqui ó temos o nosso footer tá vendo que o nosso foter entre os parenteses a gente tem um spam que aqui dentro Eu quero colocar a quantidade e a gente tem um ID para ela ó cart cart count Então vou pegar aqui o ID que a gente deu para esse spam e vou colocar aqui então quando eu acessar esse cara aqui a gente Tá manipulando Exatamente esse elemento h M

Beleza então colocamos aqui tá faltando mais algum tá faltando também a gente colocar aqui o nosso input do do nosso endereço né que faltou aqui ó e o nosso alerta também então aqui no nosso input a gente já deu aqui um ID para ele de address Então vou pegar aqui também ó cont vou chamar de address input com e maiúsculo igual document.get Element by ID vou pegar aqui o nosso ID conch E aí a gente também tem um address warn que é Aquele aviso Zinho então document.get Element by id e a gente vai ter também

ó lembra que a gente colocou a classe aqui quando ele não digitar o endereço e tentar enviar a gente escondeu ele mas ele tá aqui ó digita se endereço completo A gente colocou um ID para ele chamado address address warn Então vou copiar do jeito que eu coloquei lá e vou pegar aqui então aqui a gente pegou as referências que a gente vai precisar manipular Qualquer coisa a gente vai Modificando Fica tranquilo tá primeiro passo então que a gente quer é abrir o modal do nosso carrinho quando eu clicar aqui no Veja meu carrinho tá

então vamos lá primeiro passo que eu quero fazer então é abrir esse cara como é que eu vou saber onde que eu tenho que clicar bom o nosso botão se a gente olhar aqui embaixo ó cart aqui é o cara que tem um Button que tem um ID chamado cart btn se a gente vem aqui ó cart btn a gente criou a referência então se eu acessar o O cart btn eu estou acessando exatamente o nosso botãozinho aqui o elemento HTML então eu posso vir aqui criar uma cart btn ponto né então tô acessando esse

elemento aqui que é o nosso footer pon add event listener Então vou criar um event listener que tipo eu Eu quero um tipo clique Então quando você clicar sobre a gente recebe aqui uma function ou seja uma função que vai fazer alguma coisa pra gente e aqui dentro o que eu quero fazer é acessar o nosso modal Ou Seja a gente não tem aqui o nosso modal do carrinho certo que tem um ID cart traço modal onde é que tá a referência cart traço modal tá aqui ó então quando eu acessar esse cart modal Eu

quero acessar o cart modal ponto eu quero acessar o nosso Style ou seja os estilos que ele tem ponto display e eu quero colocar um display lembra que ele tá escondido eu quero colocar aquele Play Flex tá então se eu salvar isso aqui quando eu clicar no cart btn Ou seja Quando eu clicar no botãozinho aqui embaixo o que a gente vai fazer é acessar lá o nosso elemento HTML cart modal pon Style pon display ou seja mudar lá o estilo dele e colocar esse nosso Flex então se eu salvar isso aqui e eu atualizar

Cliquei no botão abri o carrinho Parece Mágica né Parece Mágica mas não a Gente Tá acessando ou seja o nosso cart btn aquele botãozinho lá embaixo e quando eu clico nele então eu acesso agora o nosso modal e eu pego Coloco o estilo dentro agora de display só pra gente olhar pra gente fazer passo a passo antes da gente começar a acelerar um pouquinho a velocidade eu vou atualizar isso aqui ó vamos lá de novo ó presta atenção comigo aqui para um pouquinho aí tá então a gente tem aqui ó modal cart tá vendo que

ele tá aqui ó esse item é o nosso carrinho percebe que ele tá invisível ó ele tá com Hidden aqui a gente não tá enxergando legal quando eu clicar aqui Veja meu carrinho cliquei a gente faz o quê a gente adiciona no modal um estilo chamado display com o Flex se a gente olhar aqui agora dentro do HTML deixa eu abrir aqui aqui de novo ó tá vendo que o nosso modal tá aqui ó e olha o que que a gente fez a gente adicionou via JavaScript uma propriedade Style que tem o display que tem

a propriedade Flex ou seja lembra que quando a gente adiciona aquele Flex ele começa a ser visível Então como a gente adicionou através de Um evento programação né de JavaScript a gente falou olha clicou a gente adiciona um estilo Flex ali dentro basicamente isso que a gente tá fazendo essa é a lógica que a gente tá fazendo né Essa essa função essa função aí beleza mas a gente pode melhorar isso isso aqui né quando eu clicar fora aqui ó na na parte preta eu quero fechar esse cara também então quando a gente vir aqui por

enquanto a gente tá abrindo né então aqui ó eu vou colocar só porque depois a Gente vai ter bastante função então abrir o modal do carrinho beleza só pra gente lembrar então vou comentar o código só pra gente lembrar o que que é essa função depois vocês podem tirar e agora eu quero criar uma função então quando fechar o modal quando clicar fora e aí como é que a gente pode fazer eu vou acessar aqui o nosso modal então cart modal então tô acessando o nosso modal ex examente essa div que tem o modal que

tem a parte Black né então Cart modal ponto cart modal é o nome que eu dei aqui ó cuidado que tem que ser do jeito que você declarou tá ponto add event listener quando você também clicar fora o que que a gente vai fazer function aqui a gente recebe essa função e também eu recebo aqui ó um evento tá esse evento aqui de clique eu vou dar aqui um console P log só pra gente ver o que que a gente recebe nesse evento E aí eu vou salvar Tá então vamos lá ó vou atualizar aqui

tá abre aqui o console Então lembra que que a gente salvou o código coloquei um console então vou abrir o console aqui ó e vou dar um F5 percebe agora que quando eu clicar ele vai abrir agora quando eu clicar sobre o nosso item então cart modal quando eu clicar em qualquer lugar do nosso carrinho eu falei que a gente vai ter um evento de clique Ou seja quando você clicar em qualquer lugar beleza ele vai chamar essa função aqui e a gente vai dar o console nesse evento que O Event Listener manda pra gente

vamos lá o que que eu recebo Então deixa eu abrir o console console tá aqui do lado cliquei fora olha só ele mandou pra gente um Pointer E dentro dele a gente tem uma propriedade chamada target Então vamos achar target que é o evento de alvo que Você clicou ele fala que eu cliquei no nosso cart modal mas se eu clicar dentro do carrinho ó cliquei no nosso H1 aqui ó deixa eu voltar no console deixa eu Minimizar isso aqui ó ó cliquei no nosso H1 cliquei no H1 mon de vez ele disparou um evento

se a gente olhar aqui o target beleza ó ele fala que agora eu cliquei no H2 que agora eu cliquei no título então agora a gente consegue filtrar Quando você clicar apenas nessa área do carrinho fora eu quero fechar se você clicar ficar dentro Eu não quero fazer nada então a gente pode fazer o quê eu vou fazer aqui um if ou seja se o event. target ou seja se o evento que Você clicou for apenas essa parte de fora ou Seja se for apenas o item que tem o ID chamado cart modal se for

apenas essa essa parte preta então se for igual apenas o cart modal aí o que eu vou fazer é fechar o modal então cart modal tô acessando ele aqui novamente ponto Style pon display lembra que a gente pode adicionar o display igual a gente fez aqui com Flex mas agora a invés do Flex vou tirar eu vou adicionar um display n então display nonone aqui ó beleza salvei aqui ó então a gente tá Fechando o modal beleza salvei então se eu atualizar cliquei para abrir se eu clicar aqui no meu H2 ó nada acontece tá

agora se eu clicar num item onde o target for igual ao cart modal ou seja igual essa área escura aqui ó cliquei aí ele fecha Então agora eu consigo abrir fechar Abrir fechar perfeito tá então se eu clicar fora eu fecho que mais que falta no botãozinho fechar né o botãozinho fechar a gente tem que fechar esse modal também então a gente pode Também criar esse evento aí para fechar o modal como é que a gente pode fazer a gente tem o nosso botãozinho aqui ó chamado fechar que a gente deu um ID de Close

modal btn vamos lá Cadê ele aqui ó Close modal btn tá aqui ó Então eu preciso acessar essa nossa Close modal btn que basicamente eu estou acessando esse botão aqui que a gente colocou no HTML então se eu colocar aqui ó Close modal btn pad event list por exemplo queera um evento de clique também Recebemos uma function se você clicar vou dar aqui um Alert clicou só pra gente ver eu vou salvar isso aqui tá então vou atualizar se eu clicar aqui posso fechar agora se eu clicar no botãozinho fechar ó cliquei olha lá o

nosso Alerta tá então quando eu acesso o nosso Close modal btn que é oot é o botãozinho fechar aqui ó eu posso fazer alguma coisa no nosso caso eu quero fechar o modal é a mesma coisa que a gente fez aqui ó é só adicionar o nosso Estilo n Então vou copiar aqui ó eu posso apenas adicionar esse nosso estilo None aqui para fechar então Ó coloquei aqui ó cart modal pon Style display non ou seja esconde da tela para mim salvei isso aqui se eu atualizar tá cliquei aqui se eu clicar no fechar ele

fecha se eu clicar fora também ó fecha Só não vai fechar se eu clicar dentro aqui né se eu clicar aqui nesses itens dentro não faz nada então a gente já tá começando a caminhar isso aqui maravilha né que mais Que tá faltando Mateus agora a gente pode fazer o item de adicionar no nosso carrinho concorda vamos lá então a primeira coisa que eu quero fazer é eu quero saber se você clicou nesse botãozinho aqui E esse botãozinho aqui todos eles estão dentro da nossa div vamos subir o HTML aqui ó pra gente fazer bem

tranquilo todos estão dentro dessa div com o ID menu ó todo o nosso menu tá aqui dentro então como é que eu posso pegar a gente criou uma div com ID Menu e também cada botãozinho desse carrinho aqui ó se a gente olhar cada botão ele tem aqui o data name que é o nome do item ele tem o data Price e ele também tem uma classe que a gente criou chamada add to cart btn pra gente identificar que Você clicou no item que é o item de adicionar no carrinho legal entendido isso agora vamos

lá pro nosso JavaScript então primeira coisa que eu quero fazer é pegar o nosso item que tem o AD menu que dentro dele a gente tem os Nossos produtos então eu vou vir aqui a gente já pegou aqui o nosso referência chamado de menu Então vou vir aqui ó menu pad event listener Então quando você clicar em algum lugar do menu então Click function maravilha a function manda pra gente um event que a gente já conheceu ele manda um evento pra gente e eu posso ver aqui ó console.log nosso event. target que é para pegar

o elemento que você tá clicando tá dentro do menu então se eu salvar isso aqui e Eu atualizar deixa eu AB aqui o nosso inspecionar de novo presta atenção que dessa forma a gente consegue ver qual é o item que Você clicou então se eu clicar no console e eu voltar aqui ó e eu clicar ó se eu clicar fora aqui em cima no reader nada acontece percebe que aqui ó não mostra nada agora se eu clicar eu vou clicar aqui no Hamburger Smash ó cliquei aqui no título percebe que eu cliquei no título e

ele mostrou para mim o item que eu cliquei Ou seja a Gente deu um console no event. target ou seja qual que é o item que Você clicou então foi o parágrafo aqui ó ele devolve pra gente o elemento HTML legal se eu clicar no nosso botãozinho ó Cliquei no botão ele devolve aqui ó no botãozinho de adicionar né ele devolve exatamente aqui o nosso ícone ó se eu clicar fora um pouquinho do ícone aqui do lado ó cliquei ele devolve o botão inteiro que dentro tem um ícone Maravilha e é o que eu quero

eu quero saber se você clicou E Se o elemento que Você clicou é o botão ou é o item dentro né que é o o ícone do carrinho pode ser também se Você clicou num desses aqui eu quero adicionar no carrinho esse item perfeito e então entendido a nossa lógica eu sei como pegar o item agora agora vamos fazer alguma ação eu vou comentar o console aqui né Vou dar duas Barrinhas só para não ficar rodando esse console Então vamos lá o que eu vou fazer é let vou chamar de parent Button igual a event

P Target pclose ST aqui ó dessa forma aqui tá Cuidado para não escrever errado aqui às vezes ele não dá uma sugerida show de bola então aqui dentro Eu quero falar olha qual que é o item que a gente tá tá vendo se Ele clicou ali dentro é que tem ele ou perto dele né o parente dele ou ou seja se Você clicou no botão que dentro tem um ícone ou se Você clicou no no item que o pai dele o elemento em volta dele é aquele elemento que tem aquela classe btn que a gente

quer a Classe que a gente chamou de Edit to cart btn né Ou seja eu vou verificar se Você clicou no ícone exatamente ele vai devolver o HTML e aí esse nosso Close aqui que a gente tá passando basicamente aqui ele vai verificar se Você clicou nele e o pai dele tem esse nosso esse nossa classe aqui ou se Você clicou no item e ele tem essa classe Então a gente vai fazer essas duas verificações tá então a gente vai fazer isso aqui copia aqui o nome da classe ó para você não Escrever errado a

classe que a gente deu né dentro desse nosso botãozinho que tem o ícone do carrinho tá então vou pegar aqui ó lembra que a classe tá dentro do botão tá e não dentro do ícone tá então agora vou colocar aqui ó add to cart btn beleza vamos dar um console aqui ó console.log nesse nosso parent Button vamos ver o que que tá acontecendo aqui também salvei aqui vamos abrir inspecionar de novo vamos no console e eu vou atualizar ó se eu clicar fora tá Vendo que quando eu clico em qualquer lugar fora sem ser no

ícone ó cliquei ele devolve nulo ou seja ele não encontrou esse cara e de fato não existe né porque eu tô clicando em outro lugar agora se eu vier aqui e eu clicar no menuzinho ó cliquei no ícone de adicionar cliquei cliquei e ele devolveu nulo para mim por que que ele devolveu nulo porque a gente tá tentando achar uma classe então ele não achou a classe vamos ver o porquê a gente tá tentando Achar uma classe e classes sempre começam com ponto e ID sempre começam com hashtag então se eu quero olhar uma classe

em específica eu tenho que dar um ponto aqui né senão ele não vai achar essa classe então então agora a gente tá procurando essa classe aqui então se eu salvar isso aqui de novo voltar aqui atualizar vamos olhar de novo ó cliquei no título devolveu nulo perfeito que não é o item vou clicar no nosso iconz de adicionar cliquei Opa é o item que tem Essa classe ou é um item parente dele basicamente é isso né que a gente tá olhando e ele fala pra gente aqui ó ele devolveu o botão né agora se eu

clicar no iconeinstagram Beleza então ele devolve o botão o botão que tem aquela classe que a gente tá monitorando aqui que que eu quero é isso que eu quero mesmo então perfeito a gente já tá pegando esse cara aqui agora então agora eu vou verificar uma coisa if Se Você clicou no item que É esse parent Button ou seja se você clicar fora no título não quero que faça nada mas se você clicar nesse item aqui aí quer dizer que você quer adicionar no carrinho então se você clicar no item que tem um parent Button

ou seja clicou no nosso botão de adicionar então aqui o que a gente vai fazer É de fato pegar as propriedades como o data name e o data Price então eu posso vir aqui da seguinte forma con vou chamar de name ig a parent Button então tô acessando o Nosso elemento que é HTML lembra que ele devolve o elemento HTML ele devolve o elemento o botão dentro do botão ó eu tenho o data name e eu tenho data Price Então vou acessar o nosso parent buton que é o elemento ponto get attribute attribute aqui ó

cuidado que é com 2 t eu quero pegar qual atributo eu quero pegar o data traço name lembra que o nome do atributo a gente chamou de data name e data trao Price Então vou pegar o dat name vou duplicar aqui também ó e o Próximo eu vou chamar de Price eu quero pegar aqui o data Price tá vamos dar um console nesses dois caras vou dar aqui um console P log no nosso name opa e eu vou duplicar aqui e vou dar um console no nosso Price vamos ver se a gente tá recebendo os

valores né Vamos lá ó salvei isso aqui e vamos lá vou abrir aqui o inspecionar de novo por enquanto né a gente tá fazendo um pouco mais devagar mas entendendo importante é entender a lógica aquilo que a gente tá Fazendo então vou atualizar vou no console se eu clicar fora ó nada acontece mais ó tá vendo agora vou clicar no nosso adicionar cliquei no adicionar ó olha que sensacional né a gente clicou no adicionar ele devolveu Hamburger Smash e o valor perfeito se a gente clicar aqui no Hambúrger duplo ou vou V vamos pegar aqui

o Coca lata ó cliquei no coca lata coloca a lata e o valor aqui embaixo perfeito né então a gente já tá pegando o item que Você Clicou o próximo passo agora vou Minimizar isso aqui deixa eu tirar minha cara da frente é esses dados sempre vem como um texto né uma string então o nome ele é um texto perfeito mas como a gente vai fazer conta de calcular o valor e se tiver mais de um item então o price aqui ó se eu col eu quero que ele venha como um número então eu vou

copiar aqui o nosso data Price e eu vou converter o retorno para um float então parse float abre fecha parênteses eu vou colocar Aqui dentro de parênteses esse cara então o retorno do Price ó tá vendo que se eu coloco o mouse em cima aqui do Price Ele já fala que ele vai retornar um número pra gente então ele vai converter o valor que ele tá recebendo em um número então vou tirar os consoles que agora quando eu acessar o name e o price eu tenho o valor dos do hambúrguer que Você clicou agora o

próximo passo que eu quero é adicionar no carrinho então agora a gente vai fazer o quê Adicionar no carrinho né então a gente precisa ter alguma funcionalidade no nosso sistema para adicionar no carrinho tá então vou criar aqui fora ó fora de tudo eu vou criar aqui uma função função para adicionar no carrinho tá depois vocês apagam os comentários aí é só para vocês entenderem então aqui a gente vai criar uma function add to cards que é a nossa função eu quero que você me mande Qual que é o name do item que você quer

adicionar e o price dele e aqui eu vou Dar por exemplo um Alert no no nome então vou dar aqui um alerta por exemplo no Name e eu vou dar aqui vou dar até colocar aqui ó o item é eu vou dar aqui um espaço mais name só pra gente visualizar tá se eu tô recebendo o name aqui beleza então criamos uma função que aqui vai ficar a lógica de adicionar no carrinho agora eu vou chamar ela aonde eu vou chamar ela aqui ó então depois que eu peguei os itens vou tirar esse comentário aqui

então eu vou chamar o Nosso add to cart que é uma função Então eu estou chamando uma funcionalidade que dentro dela vai ter a lógica que a gente vai fazer e para ela eu falei ó Olha me passa dois parâmetros você vai passar o name e o price que eu preciso para utilizar Então eu vou passar aqui ó a propriedade name que também a gente recebe aqui por mesmo nome e vou mandar o price para ela então estou mandando o name e o price para essa função aqui ela vai ser executada e aqui dentro por

Enquanto só mais mostrar um alerta na tela vamos testar isso aqui para ver se já tá funcionando essa nossa lógica ó deixa eu apagar os espaços salvei aqui e bora testar deixa eu apagar aqui cliquei aqui para atualizar vou clicar aqui por exemplo ó no Vou colocar aqui o hambúrguer da casa ó cliquei o item é hambúrguer da casa Então olha que massa quando eu clico em adicionar ele já chama uma função e dentro dela por enquanto a gente mostra um alerta Perfeito maravilha agora o que que eu preciso fazer né agora a gente precisa

pensar que a lógica que a gente vai ter é o meu carrinho de compras ele é uma lista certo é uma lista de itens onde cada item vai ter um nome um preço pode ter uma quantidade ele pode ter o valor pode ter qualquer coisa ali dentro então uma uma Array que a gente chama no JavaScript uma Array uma lista de itens uma lista de produtos certo então a gente não tem uma lista onde armazenar Né a gente só tem uma função que mostra um alerta Então o que eu vou fazer como essa lista eu

quero que qualquer um consiga acessar ela eu vou criar aqui fora aqui em cima em cima de tudo embaixo do das declarações eu vou criar aqui um let eu vou chamar aqui de cart eu vou começar ela com um arrei vazio porque por enquanto se eu clicar no modal começa vazio né não adicionou nada então ele começa sempre a nossa lista carrinho que eu vou chamar de cart aqui Ó com um arrei vazio beleza e agora vamos lá fazer primeira coisa que eu preciso fazer é se você clicar no nosso adicionar carrinho vamos lá de

novo V tiar esse Alerta aqui o que eu quero fazer é adicionar o item com o name e o price que você me mandou dentro da lista concorda Então o que a gente pode fazer aqui é eu vou acessar aqui por exemplo cards então T acessando nosso carrinho ponto push então tô adicionando abro Chaves aqui dentro tô adicionando um Objeto dentro do nosso carrinho dentro dessa lista com a propriedade name com a propriedade Price vírgula com a propriedade por exemplo quantity opa quant que basicamente seria a quantidade ou qtd pode ser 2.1 né porque como

é a primeira vez que você tá clicando no item ele vai começar sempre com a quantidade um concorda perfeito né então salvei isso aqui então quando você clicar em adicionar no carrinho ele vai adicionar na nossa lista Um item com Esse nome com esse Price e com essa quantidade de um salvei isso aqui e vamos testar Vou atualizar vou abrir o inspecionar e vou abrir aqui o nosso console por enquanto a gente nem colocou console mas olha só que bacana vamos lá então vou abrir aqui o nosso console aqui de novo se eu vier aqui

como eu consigo manipular o nosso JavaScript pelo console eu posso acessar aqui o cart só para mim ver ó tá vendo que se eu digito cart que é o nome do nosso da Nossa lista ele devolve vazio porque tá vazio ainda a gente nem clicou em nada só para mostrar que ela tá limpa mesmo eu vou vir aqui no no hambúrguer duplo ó cliquei no hambúrguer duplo Beleza a gente não colocou nenhum Alerta né A gente só mostrou aqui legal então ele tem que ter adicionado agora esse cara vamos ver se ele adicionou mesmo vou

vir aqui vou vir aqui no console ó não dei F5 nem nada eu vou vou digitar aqui ó cart e vou dar um enter Opa agora dentro Da nossa lista se eu abrir ele tem um objeto um ou seja o zero né ele tem o nosso primeiro item se eu abrir ele ó name Hamburger duplo o price e a quantidade legal né se eu vier aqui clicar no Smash agora cliquei no Smash Beleza vou clicar aqui nesse bloqueado aqui ó só para limpar e eu vou digitar aqui cart novamente eu vou dar um enter Olha

que bacana agora a minha lista tem dois itens se eu abrir eu tenho Hamburger dup perfeito e o Smash Olha Que legal né então a gente já tá populando a nossa lista toda vez que eu clico ele pega os propriedades e adiciona dentro dessa lista ali legal então a gente já fez a primeira parte da lógica né agora tem um problema o que que é esse problema né a gente já tem um hambúrguer duplo o que que vai acontecer se eu vi aqui no Hambúrger duplo de novo e eu clicar no mais de novo ó

cliquei no mais e eu vou vir aqui e vou digitar cart de novo vou dar um enter aqui ó Agora ele colocou que eu tenho três itens na minha lista ó hambúrguer duplo Smash e duplo não faz sentido né quando a gente tem dois itens aqui Mateus pô vamos mudar a quantidade de um para dois concorda e vamos adicionar um duplicado pô não faz sentido Então vamos fazer isso aqui então Ó vou diminuir um pouquinho aqui e vamos lá tá então deixa eu Minimizar minha cara daqui a gente vai fazer uma verificação antes de já

sair adicionando né a gente pode fazer o Quê eu quero verificar se esse item que você que Você clicou já tá na lista como é que eu posso fazer isso então primeira coisa ó conch vou procurar aqui por chamar de has item ou existing item por exemplo para verificar né se existe esse item Vou acessar o nosso carrinho então Card pon find abra aqui dentro do find eu recebo aqui o item e e esse find aqui eu recebo cada item ou seja o find ele é um método do JavaScript que ele vai percorrer a nossa

lista então ele vai Passar em todos os itens da lista então ele passa no primeiro a gente dentro dessa propriedade item aqui ó que eu declarei eu tenho a propriedade name Price quantidade tá ele vai passar pro próximo E aí ele vai então ele vai passar por toda a nossa lista e a gente pode verificar alguma condição E se ele encontrar condição ele devolve esse item Então posso fazer aqui olha eu quero verificar o qu eu quero verificar se o item pon name for igual ao name que você Tá me mandando aqui ó Desse nosso

dessa nossa função como propriedade O que que você tá fazendo aqui Mateus quando você chamar essa função eu recebo o nome do item que Você clicou eu vou lá na minha lista cart e eu vou dar um find ou seja vou buscar dentro dela se dentro dela tem algum item pon name ou seja se dentro dela já existe algum item adicionado com esse nome que é igual a esse que você tá tentando adicionar a mais se existir ou seja se ele encontrar Algum ele vai devolver dentro dessa variável aqui e aí eu posso verificar olha

if existe item ou seja ele vai encontrar só vai cair dentro do IF se existir então se ele encontrar algum lá quer dizer que esse item já tá na sua lista então ele vai entrar dentro do IF E aí então Ó vou até comentar aqui ó se o item já existe aumenta aumenta apenas a quantidade mais um né É isso que a gente quer fazer então como é que eu posso fazer se esse nosso console aqui ó Vamos dar um console nele ó console pon log vou dar um exist item aqui só pra gente visualizar

tá salvei e vou dar até um return aqui para ele parar a execução do nosso wif aqui perfeito salvei Vou atualizar aqui e vamos lá Vou atualizar aqui eu vou atualizar minha lista Então vem aqui no seu projeto e dá um F5 tá para ele zerar Nossa lista vou no console cliquei no primeiro Smash ó não devolveu nada no console ou seja ele não entrou no wif por quê Porque é a Primeira vez que ele tá adicionando agora se eu vier depois no meu Smash novamente ó cliquei opa ele encontrou se eu se eu clicar

de novo ó tá vendo que agora tá duplicado então ele tá entrando dentro do IF aí o que eu quero fazer é apenas mudar a quantidade então eu posso daqu ó existing item ponto quantity mais igual a 1 que que é esse mais igual nada mais é do que eu pegar quantidade já existente Então se já tem um é 1 + 1 se já tem dois é 2 + 1 ou então ele pega a Quantidade que já tem mais um Sempre beleza se eu salvar isso aqui vamos verificar salvei vamos lá vou puxar aqui deixa

eu abrir o console Vou atualizar vou dar um F5 aqui para zerar a nossa lista e vamos lá então agora se eu clicar no Smash cliquei é a primeira vez que ele tá adicionando ele pula o if porque é a primeira quantidade né A primeira vez agora se eu vier de novo no Smash clicar de novo ó cliquei aí ele fez o quê ele deve ter entrado no nosso If e mudado a quantidade vamos ver se ele mudou a quantidade Então como é que eu vou ver eu vou vir aqui no nosso console e vou

digitar aqui cart pra gente ver os itens que tem na minha lista cart e vou abrir aqui e ó Hambúrger Smash tem o valor quantidade dois perfeito né agora se eu vier aqui adicionar por exemplo uma guaraná lata cliquei para adicionar eu vou vir aqui na minha no meu console vou digitar cart e eu vou dar um enter Agora eu tenho Dois itens porque eu tenho dois Hambúrger Smash e eu tenho que ter uma uma guaraná então Ó aqui quantidade dois e o guaraná quantidade um perfeito né se eu clicar no guaraná de novo ó

cliquei no guaraná de novo e eu vim aqui buscar o nosso cart Agora eu tenho dois itens na minha lista do mesmo jeito só que como eu já tinha um guaraná ao invés de adicionar um a mais mais um item Eu só mudei a quantidade ó olha aqui o guaraná dois ó perfeito né então agora a gente Já tá fazendo o quê se já tiver o item Maravilha muda sua quantidade se não tiver adiciona Um item novo tá Ou seja quando ele abre aqui ele verifica se já tem se já tem então só muda a

quantidade para mais um se não tem ele vai pular o if e vai adicionar um item com a quantidade um Beleza então vamos lá pra gente ver aqui o que a gente já fez ó a gente já tá fazendo o qu então adicionando produtos no carrinho verificando os carrinhos pela home a Gente ainda não tá fazendo e acessar os detalhes dele então vamos lá primeira coisa então quando eu adiciono por enquanto se eu clico aqui ó nada muda visualmente então agora vamos montar ele visualmente na tela eu adiciono no carrinho Mas além de adicionar no

carrinho eu quero mostrar ele construir ele visualmente caso você abra aqui então o que a gente vai fazer fora aqui a gente pode separar numa função vou até comentar aqui por exemplo atualiza o Carrinho tá vamos chamar essa função de function vamos chamar de update Card modal Beleza então aqui o que a gente vai fazer é mudar ele visualmente ali dentro tá então quando você adicionar no carrinho eu quero chamar essa função para ser executada então quando eu adicionar no carrinho ó dentro da função do Edit cart depois que ele adicionar fazer tudo aqui ó

o que a gente quer fazer é eu quero atualizar esse cara aqui a gente pode fazer de seguinte Forma eu posso chamar aqui o update aqui dessa forma só que aí ele só vai ser chamado em uma ocasião Ou seja quando ele passar pelo if ele vai rodar aqui o quantidade mais um e vai usar o return para parar execução do código aqui então quando a gente mudar a quantidade ele não vai atualizar você tem duas possibilidades aqui tirar o if tirar o return daqui e pode usar se quiser o else não tá errado é

um if else aqui e aí fazer dessa forma aqui ó traz o nosso Card para dentro dentro do else que vai funcionar sem problema nenhum tá então aqui o que a gente tá fazendo ó deixa eu só dar um espaço legal aqui para vocês ó tá deixa eu tirar esse espaço daqui o que que a gente tá fazendo aqui se ele entrar dentro do IF ou seja se entrar no IF ele muda a quantidade mais um se não ele vai adicionar apenas a quantidade um tá é isso que a gente tá fazendo E aí depois

que ele fazer essas execuções aqui ou seja adicionar a quantidade mais Um ou adicionar esse item com a quantidade de um no carrinho se for um item novo ele vai depois chamar a função update cart modal que a gente criou aqui fora tá E aí aqui dentro a gente vai montar como é que a gente quer exibir esse item lá dentro do carrinho vamos lá então como é que a gente pode montar isso aqui se a gente voltar dentro do nosso carrinho ó vamos lá dentro ó vamos lá dentro do nosso modal cadê cadê Vamos

descer lá Embaixo Aqui ó modal cart tá se a gente olhar aqui ó dentro dela a gente colocou um ID um cart modal mas dentro Eu coloquei uma AD ó chamada cart items e aqui dentro que eu quero colocar os itens que você adicionar então a gente até pegou ela aqui ó chamada vamos pegar ela aqui ó cart items e eu dei o nome para ela de cart items container então a gente pode acessar esse esse elemento para acessar essa div aqui ó quando a gente acessar esse elemento aqui Basicamente eu estou acessando pelo JavaScript

essa div dentro do nosso modal Tá então vamos lá vou pegar ela aqui deixa eu copiar e vamos lá dentro então quando a gente chamar essa função update aqui eu vou fazer cart container piner HTML ou seja dentro do HTML dentro dessa div eu vou zerar tudo que tiver ali dentro vou criar aqui uma vari varzinha let Total igual a zero pra gente começar total em zero depois que a gente tiver mais itens por exemplo aqui Ó tem dois aqui tem mais um aqui aqui embaixo eu quero mostrar o total também aqui não tá aparecendo

mas aqui a gente vai mostrar o total lembra que quando eu clicar aqui ó eu vou ter um total então também quero ter o total Então vou criar uma variável Total vou começar ela com zero e agora aqui a gente pode fazer o mapeamento então como é uma lista de itens que vai ter mais de um a gente pode percorrer a lista e montar o HTML como eu quiser aqui dentro Vamos Diminuir e vamos lá diminuir aqui também ó Então vamos lá eu vou acessar o nosso cart que é o nosso carrinho ponto for each

o for each é um loop basicamente né uma função pra gente percorrer a nossa lista e fazer alguma coisa então por exemplo item tá dentro aqui do item abre e fecha os Chaves então aqui eu posso fazer o que eu quiser por exemplo console.log em cada item só pra gente ver tá Vou salvar isso aqui então agora deixa eu abrir aqui o inspecionar quando Eu clicar em adicionar no carrinho ele já vai chamar o update cart modal vamos lá testar vou clicar no Smash cliquei Ó lá ele já mostrou o console se eu clicar agora

na Coca lata ele vai clicar vai mostrar o console do Smash e da Coca lata então a gente tá percorrendo aqui dentro do item eu tenho acesso a cada propriedade Pensa que eu tô percorrendo a minha lista de carrinho Ou seja eu tô percorrendo e dentro do item eu posso acessar a propriedade name Price e Quantidade aqui dentro e aí ele vai passar pro próximo item name Price e quantidade a gente pode acessar sem problema nenhum então agora eu posso montar a nossa div vamos lá então vou vir aqui vou dar um con cart vou

chamar de item Element ig a document só que agora ao invés de pegar um elemento eu quero criar um elemento que é uma div Então vou dar um Create Create Element então tô criando um elemento HTML via JavaScript que eu quero que crie uma div Então agora quando eu acessar esse item aqui ó cart item Element eu estou basicamente acessando essa nova div que eu acabei de criar E aí dentro dela eu quero colocar os meus itens então cart item Element ponto Inner HTML ou seja quero colocar dentro dessa html igual vou abrir Aquela nossa

aspas deitadas que é Aquela nossa nossa template string do JavaScript então asinhas deitadas aqui tá cuidado com isso dentro dela vou dar um monte de enter aqui ó eu quero Colocar então uma div abre e fecha a nossa div beleza e dentro dessa div aqui ó eu quero colocar o quê se a gente olhar aqui do lado como é que a gente quer montar né Eu quero colocar basicamente Vamos abrir aqui ó eu quero colocar uma div dentro dessa div eu quero colocar mais um título uma descrição Zinha e o valor e aqui do lado

eu quero mais uma div tá que vai ter basicamente o botãozinho de remover e em volta a gente tem uma div central é Basicamente isso que a gente vai fazer então a gente já criou a nossa div em volta agora eu posso criar duas dives então vou criar mais uma div aqui ó mais uma div fecha a div aqui para não esquecer então essa div aqui é onde a gente vai ter os conteúdos né os nome descrição Então dentro dela vou criar aqui um parágrafo que aqui vai ser o nome Então fecha aqui o nosso

parágrafo cifrão abre e fecha os Chaves pra gente colocar uma variável já que a gente tá Usando a nossa aspas deitadas e eu posso acessar lembra o nosso item então aqui dentro ó item ponto posso acessar a propriedade name que é o nome do do item que você tá dentro do carrinho eu quero mais um aqui ó quero um p aqui Fecha aqui a tag P eu quero agora cifrão abre fecha o chave item ponto quantidade tá que é o nosso inglês que a gente colocou aqui e eu quero também ter mais um parágrafo aqui

né fecha o parágrafo que é o valor ou seja R cifrão E eu vou colocar aqui por exemplo cifrão abre fech Chaves item pon Price só pra gente gente visualizar isso aqui tá vamos testar isso aqui salvei Ah e fora aqui falta o botãozinho né então Depois dessa div eu vou criar mais uma div aqui só pra gente não esquecer e essa div aqui ó vai ter o botãozinho de fechar tá então essa div a gente vai ter um buton abre e fecha o nosso buton aqui E esse botãozinho aqui que a gente vai chamar

de remover tá salvei aqui vamos testar Isso aqui então depois que eu criei o nosso HTML o que que eu quero fazer eu tenho que inserir ele dentro do nosso contêiner Ou seja eu tenho que inserir ele aqui dentro então eu Criei um elemento criei Conforme eu quero esse HTML dentro dessa div que a gente acabou de criar agora eu vou inserir vou colocar ele dentro do nosso cart items container ou seja dentro lá do nosso contêiner do nosso carrinho então ainda dentro do for it ó dentro do for it a Gente vai dar aqui

cart items container Ou seja a Gente Tá acessando aqui fora o nosso HTML do container ponto append child ou seja vou colocar um item dentro que é o nosso cart que é esse que a gente criou aqui ó cart item Element Então a gente vai colocar esse elemento com com essa estrutura aqui dentro lá do nosso modal do carrinho lá tá então feito isso vou salvar e a gente pode testar isso aqui salvei Vou atualizar quando agora eu clicar em Hamburger Smash cliquei aqui para abrir o meu modal e Olha que bacana né a gente

tem sem nenhuma estilização ainda tá então se eu atualizar aqui ó e eu clicar na Coca lata e eu clicar no salada vou clicar duas vezes no salada e eu abri aqui ó uma coca lata duas vezes o salada aqui tem o isso a gente ainda não tá recalculando as coisas não estamos mostrando modal mas a gente já tá mostrando eles aqui vamos entender o que que a gente fez aqui pra gente poder Prosseguir E aí formatar isso aqui certinho então vamos lá uma coisa que a gente pode fazer aqui antes da gente entender é

toda vez que você abrir aqui o seu carrinho também eu quero atualizar garantir que ele vai est atualizado o nosso cart então eu também quero chamar essa função cart modal aqui para mapear ela então vamos fazer isso então vou vir aqui ó Toda vez que você abrir o seu carrinho aqui no nosso onde a gente abre o carrinho ó abrir o modal do carrinho Eu também quero chamar essa função update cart modal então ele sempre vai atualizar aí o nosso carrinho beleza até vou até colocar em cima aqui ó perfeito salvei aqui então Toda vez

que você adicionar aqui ó clicar em abrir o nosso modal ó por enquanto tá vazio se eu clicar quando eu clico aqui em ver meu carrinho ele também atualiza tá então ó adicionei se eu abrir aqui tá vendo que ele tem um Hamburger Smash se eu fechar e vou clicar mais uma vez no Hamburger Smash e eu abr de novo ó quantidade agora tá dois então sensacional então o que que a gente tá fazendo pra gente poder entender antes de continuar seguindo então quando eu clico no adicionar carrinho ele chama esse update cart modal essa

função ela é responsável por o quê Ela é responsável por acessar o nosso cart items container que que esse cart items container é dentro do nosso carrinho aqui do modal ele tem essa div aqui ó então ele Tá acessando Nada mais é do que essa div aqui eu estou inserindo dentro dessa div ou seja os itens do carrin E aí como é que eu faço isso a gente acessa a a nossa variável chamada Card que lembra que dentro dela a gente vai ter a nossa Nossa lista Então dentro da variável cart eu tenho uma lista

um Array o for e a gente vai fazer o quê A gente vai basicamente percorrer a nossa lista Então eu vou passar por todas as nossas listas todos os objetos e cada objeto eu Tenho acesso à propriedade item quantidade e e Price então ele vem aqui no fortnit passa a primeira vez vamos supor que Você clicou a primeira vez aqui no Hambúrger Smash então só tem um Hamburger Smash passou no for e ele veio aqui dentro criamos um elemento div dentro dessa div que a gente acabou de criar aqui a gente coloca lá dentro do

HTML uma outra div colocamos lá o item que é o nome do item que Você clicou a quantidade e o preço depois que a gente Adicionou ele adiciona esse elemento aqui essa div dentro do HTML lá desse nosso contêiner ou seja ele adiciona aqui ó passou pro próximo ele vai verificar o for each ele é uma é um loop ou seja ele percorre toda a nossa lista então ele passou primeiro colocou as quantidades vai pro próximo se tem mais item na lista dentro aqui da propriedade item eu tenho acesso a cada iten Zinho então se

eu por exemplo aqui ó No meu caso eu tenho dois Eu Tenho Um item na Minha lista ó eu tenho se eu abrir aqui ó Um item na minha lista eu vou voltar se eu clicar em adicionar aqui a bebida ó adicionei a coca e eu abri de novo agora eu tenho o Smash e eu tenho a coca então o nosso for it o que que ele faz ele percorre a lista agora ele viu que a minha lista de carrinho o meu cart aqui quando eu acessei tem dois itens então ele percorre o primeiro e

monta aqui dentro ó se a gente abrir aqui o HTML ó ele vai montar aqui dentro dentro do Cart items ó tá vendo dentro do cart items ele monta uma div ó uma dizinha que dentro dessa div vai ter o primeiro item que o primeiro item é o smat depois ele colocou outra div que é a bebida ó se a gente abrir aqui ó vamos lá coloca lata Tá então agora vamos melhorar a estilização desse cara vamos lá então aqui dentro eu posso vir aqui ó para esse elemento que a gente tá criando eu posso

dar aqui cart item Element P classlist poned Então vou adicionar uma Classe para ele eu quero adicionar a classe Flex vírgula Quero adicionar a classe também justify TR between para cada um ficar lá no seu canto cuidado na escrita vírgula abro aspas de novo eu quero dar um MB de qu para dar um distanciamento embaixo vírgula eu quero também adicionar um Flex Call para cada item do meu carrinho ficar sempre um abaixo do outro então se eu salvar isso aqui e eu adicionar um item no carrinho e eu abrir de novo já tá ele aqui

agora Dentro de cada elemento ou seja cada elemento é cada produto né cada item do meu for it é cada produto então cada produto eu quero adicionar também aqui uma Class abro aqui aspas duplas vou adicionar um Flex items Center justify traço between para cada um ficar lá no seu canto aqui no nosso item aqui que é o nome eu vou dar aqui uma Class eu quero dar um fonte traço bold ou medium né para não ficar tão aí aqui na quantidade a gente não precisa passar Estilo só que eu quero que minha quantidade Apareça

aqui ó qtd dois pontos que vai ser a quantidade né espaço aqui e aqui vai aparecer o valor da quantidade aqui no nosso valor aqui que é o price a gente pode dar aqui uma Class fonte traço medium e vou dar um MT de dois ou seja para distanciar um pouquinho aqui da quantidade da um espaçamento externo salvei aqui e no nosso botãozinho se quiser a gente pode até colocar o botão direto não precisa Nem da essa div aqui ó a gente tem a div aqui dentro tem o botão vou deixar o botão direto beleza

ó vou dar um botão direto e aí a gente deixa o botãozinho remover Então vou salvar isso aqui vamos testar Vou atualizar vou clicar aqui no alguns hambúrguers ó adicionei e Olha que bacana ele já mostra aqui ó um hambúrguer quantidade e o valor aqui tá então Maravilha e o remover tá aqui né então se eu aumentar ó olha que bacana né então ficou muito massa se quiser Deixar ele aqui também o nome do do item desse cara você pode ao invés de fonte medium pode dar um fonte bold ó pro nome aqui então salvei

vou adicionar um aqui ó Aí fica o nome negrit é fica bold né eu vou deixar medium aqui que fica mais bacana medium aqui ó salvei Vou atualizar então agora a gente já tá adicionando ó posso verificar e Olha que bacana já consigo ver o item aqui maravilha o valor e uma coisa que a gente pode fazer é como o valor o price Ele é um Number ele é um número eu quero garantir que ele vai ter no máximo duas casas decimais tá então no máximo ele vai fazer duas casas decimais aí então eu posso

item pon Price eu posso daqui o ponto to fixed E aí eu vou colocar dois ou seja eu quero que tenha duas casas decimais apenas no valor aqui se eu salvar e eu atualizar aqui ó vou adicionar dois itens e eu abri agora sempre vai ter duas casas decimais tá é uma coisa bem legal qual que é o próximo Passo Mateus é a gente calcular o total Então vamos lá pra gente calcular o total aqui ó antes da gente dar append aqui dentro do forat Ó tudo isso tá dentro do for dentro aqui então a

gente vai fazer acessar a nossa variável total mais igual Então vou somar pegar o valor que ela já tem igual aqui é o item pon Price vezes o item pon quantidade então o total nada mais é do que a soma total dos itens do carrinho concorda então se eu salvar isso aqui e eu abrir aqui ó e Eu atualizar o que que a gente tá fazendo vou colocar dois itens aqui ó Então olha só pensa que o for it ele percorre a nossa lista então a variável Total aqui a gente tá fazendo o quê o

que eu quero fazer É somar todos os itens e colocar o total então eu posso somar todos os itens Apenas não dá por quê Porque aqui ó tá vendo que a quantidade tá dois então é duas vezes esse valor aqui então o que eu vou fazer aqui na no total eu vou pegar o preço do Item vezes a quantidade então se for vezes um então é o preço do item vezes 1 se for vezes dois então vai ser vezes do Então vou colocar o valor dentro da variável Total o mais igual quer dizer que eu

vou pegar o valor que já tem no total então o valor que já tem no total por exemplo se passou a primeira vez no forat aqui ele vai fazer 18.90 x 2 que é a quantidade e vai colocar dentro da variável Total aqui o 1890 o for it como ele percorre a lista ele vai passar pro Próximo chegou no próximo item ele vai fazer ó 35.990 x 1 então é 35.90 né e ele vai somar com o total que já tem que seria as duas vezes o 1890 tá então ele vai colocar dentro da do

total agora só falta a gente colocar aqui dentro para aparecer Então como é que a gente pode colocar aqui lembra que a gente tem aqui ó o nosso Total Cadê Total aqui ó Total a gente tem um ID cart Total A gente já pegou a referência aqui em cima também ó Cadê vamos achar aqui o cart cart total Tal aqui ó cart Total só a gente acessar essa cart Total aqui que a gente vai acessar esse item aqui para manipular o valor aqui dentro então vamos lá então depois que eu coloquei o total aqui dentro

agora fora do for it ó fora do for it ainda dentro da nossa função do do update cart modal fora do for it a gente vai pegar aqui vamos adicionar cart Total ponto text content eu vou colocar um texto ali dentro desse cara e eu vou colocar por exemplo o total Então Vou colocar nossa variável Total ali dentro Beleza então se eu salvar isso aqui ó e eu atualizar e eu adicionar alguns itens e eu abrir olha só que legal Total já deu 54.8 e uma coisa que a gente pode fazer é usar o JavaScript

para formatar isso aqui como já uma moeda né um real aqui então o total Como é o número ponto to local string e aqui eu vou falar olha eu quero do tipo PTBR combr maiúsculo vírgula abre e fecha os Chaves e eu Quero que você formate com o Style de moeda então tipo currence vírgula eu quero passar também que a currence ou seja o tipo é BRL tem que ser maiúsculo aqui tá então ele vai formatar o retorno pra gente então salvei se eu atualizar isso aqui e eu adicionar alguns itens e eu colocar olha

só que bacana ele já adiciona né como ele formata ele já adiciona pra gente o cifrão aqui o R cifrão e o valor aqui ó 54 e80 então ó 54 e80 vou clicar aqui fora eu vou Adicionar mais um item e vou abrir de novo ó 90 aqui olha que bacana Então se a gente pegar 35 90 ó 90 x 2 né porque é a quantidade Então vai dar aqui ó 71 e80 mais 18,90 vou fazer aqui ó mais aqui 18 e90 aqui ó vai dar R 90,70 exatamente então a gente coloca o total aqui

beleza então maravilha né então isso a gente já tá fazendo o próximo passo a gente pode também mudar aqui embaixo Já o nosso iten Zinho aqui né o o compador aqui de item no carrinho Então o que eu posso Fazer aqui é eu vou pegar aqui o nosso computador que a gente já colocou aqui que é o Car o Card Counter aqui ó Card Counter Então vou acessar ele ó vamos lá vou acessar ele aqui embaixo também Card Counter pon innertext eu vou pegar aqui igual ou seja dentro dele eu vou colocar o nosso cart

pon Len ou seja o nosso Len é acessar a quantidade de itens que tem dentro da nossa lista pra gente saber quantos itens eu tenho no meu carrinho então cart p l pra gente ter a Quantidade então salvei se eu pegar aqui ó por enquanto não mostra eu posso adicionar ele já começa a mostrar aqui então toda vez que a gente chama o nosso cart essa função que vai mapear aqui ele também já adiciona dentro do nosso cart Counter dentro do HTML Qual que é a quantidade de itens no arrei então se eu atualizar aqui

ó toda vez que eu começo a adicionar ó tá vendo que aqui embaixo já tenho três itens ó olha que legal né se eu abrir eu tenho três itens aqui e Claro se eu adicionar um com mais quantidade ele só vai mudar a quantidade ó quantidade dois aqui então ficou sensacional né então a gente já tem aqui perfeito já tá calculando aqui o total então eu posso ficar adicionando vários ó beleza ó o total aqui cinco coca lata maravilha então ficou muito massa o próximo passo é remover o item né se eu clicar em remover

ele não remove Eu quero remover uma quantidade se tiver uma quantidade Eu quero remover esse Cara se tiver mais de uma quantidade Opa eu quero remover menos uma quantidade como é que a gente pode fazer isso aqui vamos lá então aqui basicamente ó a gente finalizou a parte do nosso update cart modal então toda vez que eu adiciono Um item no carrinho eu posso verificar já tá aqui mostrando que ficou muito massa ó posso adicionar vários aqui no meu carrinho já ficou muito legal e agora eu quero remover Então bora lá então aqui embaixo vou

criar Aqui fora mesmo ó função para para remover o item do carrinho como é que a gente pode fazer isso né Aonde que tá esse botãozinho de de remover então aqui ó se a gente voltar na div que é a forma que a gente monta o conteúdo a gente colocou os títulos e a gente tem o botão remover que por enquanto não faz nada então como é que eu posso pegar a ação de Quando você clicar aqui eu posso colocar uma classe por exemplo para identificar eu posso passar aqui para Ele um Class vou chamar

aqui de remove traço from traço cart por exemplo traço btn colocar um nome aqui pode ser remove btn também tem problema então coloquei esse nome e eu quero também passar o data traço name que é o nome do item tá então a abra aqui aspas duplas cifrão abre e fecha os Chaves e eu quero passar nessa propriedade data traço name o item pon name que é o nome do item que você tá clicando tá então salvei agora a gente criou aqui para ele como é que a Gente pode acessar Então vou copiar o nome da

classe que eu dei e a gente vai aqui embaixo ó embaixo Aqui da da função eu posso criar aqui um cart items container ou seja Vou acessar também aqui o nosso cart items container que é o nosso item dentro do modal E dentro dele eu posso dar aqui um ponto add event listener Vamos criar um event listener de tipo Click vírgula function eu vou criar aqui e aqui dentro a gente recebe o evento E aí eu posso Verificar por exemplo if se o evento clicado pon target p classlist p contains ou seja se ele contém

ali dentro essa nossa classe aqui que a gente deu dentro do botão basicamente Eu Tô verificando se dentro do botão aqui ó se ele tem essa classe aqui então cuidado para escrever a a classe corretamente tá então se ele tiver aqui dentro abre ou fecho Chaves do nosso if E aí aqui dentro então eu quero dar aqui um cons name ig a event. Target pget Attribute Então a gente vai pegar o atributo que você mandou aqui dentro do data traço name ó então eu quero pegar um atributo chamado data traço name tá E aí eu

vou colocar aqui só no console só pra gente ver tá se eu tô recebendo salvei aqui então vamos testar salvei atualiza aqui ó e agora que que a gente tá fazendo Quando você clicar Deixa eu só diminuir aqui quando você clicar aqui ó no item a gente tá clicando e criando o evento Lister no Card items container Ou seja dentro do contêiner aqui se for o item que se chama remove ou seja lá do nosso botãozinho se for o item de remover eu vou ver aqui e pegar o atributo lá ou seja o nome que

a gente colocou Quando você clicar aqui no no seu botão eu também tô mandando uma propriedade data TR name com o nome do item Então olha que bacana né então se eu salvar isso aqui vamos adicionar aqui vários itens vou abrir aqui tenho vários aqui e ó vou abrir aqui o nosso Console abrir o console aqui ó e eu vou clicar em remover no Hambúrger dupla ó cliquei Olha que legal ele devolveu o nome do item ó Hambúrger duplo se eu clicar aqui no selet por exemplo cliquei Ó lá salada Beleza então a gente já

tá pegando agora o que que eu quero fazer é achar esse item com esse nome na minha lista e verificar se a quantidade for maior que um eu removo a quantidade senão eu removo esse item da minha lista Então bora lá então bem tranquilo também Vamos fazer isso aqui para não ficar tão grande aqui a lógica eu posso até criar uma função separada que vai fazer essa forma de remover e só chamar aqui então eu posso por exemplo criar aqui uma função vou chamar ela aqui de remove item Card vou mandar o name lá para

essa função e agora eu vou criar essa função aqui embaixo então fora aqui eu vou criar uma function function remove item Card vou receber o name que você tá me mandando e agora a gente pode fazer a Lógica então primeiro vou tentar encontrar o index dele a posição que ele tá na minha lista então con index igual a cart ou seja acessar o nosso carrinho find index Então vou tentar encontrar o index do item então item pon name que for igual a esse name que você tá me mandando Ou seja eu vou clicar aqui no

duplo Quando você clicar aqui eu vou fazer o quê índex aqui ó eu vou buscar na minha lista se tem a posição dele Aonde que tá esse a posição aonde o item Pname ou seja o o nome da desse item na minha lista é igual ao nome que você tá me mandando igual a esse nome aqui ó então se ele encontrar ele vai me mandar dentro desse índex aqui a posição que ele tá na sua lista E aí eu posso fazer uma verificação if se o índex for diferente de men1 esse F index só devolve

os1 quando ele não encontra um item na lista então se for diferente de os1 quer dizer que ele encontrou esse item na minha lista então se ele Encontrou esse item na minha lista aqui eu posso fazer a verificação então con item Então vou pegar o item igual a cart só que ao invés de acessar toda a minha lista eu quero apenas acessar o item que Você clicou então cart abre fecho coachs aqui e eu vou pegar aqui o index então eu passo a posição dele aqui ó com isso eu tô pegando apenas o item da

nossa lista e colocando dentro da variável item olha só que bacana vou dar um console pon log nesse nosso item aqui Pra gente verificar aqui dentro então se eu salvar isso aqui ó vamos vamos testar de novo olha só que bacana vou abrir o console vou abrir aqui ó vou clicar no Hamburger duplo e eu vou clicar em remover ele ó cliquei em remover Olha que bacana ele devolve exatamente o objeto do item que eu cliquei Ó dentro da minha lista o name o price e a quantidade então quando eu clico em remover ele chama

a nossa função remove item cart passo o nome aqui eu acho a Posição que ele tá na minha lista lá do cart E aí eu busco aqui dentro ó eu pego qual Aonde que tá esse item apenas esse objeto e a gente deu o console Então eu tenho acesso nesse item a toda a propriedade então aqui o que eu quero manipular é eu preciso fazer uma verificação aqui concorda se if se o item ponto quantidade né a quantity aqui for maior que um ou seja se ele não tem se ele tem maior do que um

quer dizer que ele tem mais de um item adicionado Aqui aí o que eu quero fazer é remover apenas um uma quantidade se você clicar em remover Então vou vir aqui vou dar um item ponto quantity menos igual a 1 ou seja eu vou pegar a quantidade que tem e vou tirar men1 tá isso que a gente tá fazendo perfeito e aí o que a gente pode fazer é chamar a nossa função update cart modal para ele refazer aqui né ou seja montar novamente a nossa lista aqui com a aparência que a gente quer então

vou copiar o nome da função então depois Que ele remover a quantidade eu vou chamar o nosso update cart modal e eu vou dar um return aqui dentro do IF então ele para a execução então eu acho o item na minha lista se a quantidade for maior que um eu diminuo a os1 a quantidade atualizo o Nossa lista de carrinho Beleza agora se ele não entrou no IF quer dizer que a quantidade não não é maior que um E aí o que eu quero fazer é eu quero apenas dar um cart P Splice vou passar

o index que é a Posição dele e um que é o item que eu quero remover ou seja o Splice nada mais é do que ele vai remover esse item da minha lista então o Splice Ele pega a posição que a gente tá mandando e remove esse item ou seja esse objeto da minha lista é isso que a gente faz aqui e aí depois que eu atualizar Eu também quero chamar a função update cart modal para ele atualizar a nossa lista visual ali ou seja atualizar a forma que ele vai exibir né a quantidade o

nome então ele Vai atualizar isso aqui beleza então a gente chama aqui então se eu salvar isso aqui olha que bacana né então se eu atualizar e eu abr aqui o Smash deixa eu clicar aqui ó salada vou abrir vários ó olha que bacana vou pegar aqui ó o salada eu vou clicar várias vezes então se a gente olhar aqui ó olha que bacana quoc lata Eu tenho um salada Eu tenho seis aqui que eu cliquei e o Smash Eu tenho um se eu clicar na minha coca lata em remover ele remove da minha lista

Porque ele faz o quê ele chama a função pega a posição é maior que um Não não é maior que um porque eu só tinha uma coca lata então o que ele faz é uso spli ele remove o item da minha lista pode ver que ele já removeu Agora aqui na nossa salada que eu tenho a quantidade deixa eu abrir aqui de novo a quantidade seis ele vai entrar dentro do IF verificando ó é maior que um se é maior que um então diminui a quantidade apenas isso aí não faz nada mais e atualiza a

lista então Se eu clicar aqui em remover ó olha que bacana ele só vai removendo ó olha que legal até Claro chegar a um se chegou a um e você clicar em remover aí ele remove da sua lista e aí já era né então ficou muito massa Então dessa forma a gente já cria ó se eu remover tudo aí ele zera ó mar Maravilha demais então ficou sensacional tá o próximo passo agora é pegar o que você digita aqui dentro desse Campo aqui do endereço de entrega vamos lá então pra gente fazer Isso ó aqui

dentro a gente tem o nosso input Zinho ó temos o input que é para você digitar o campo a gente passou o endereço um ID aqui para ele address se a gente olhar dentro lá do nosso cara a gente tem o address aqui ó Também cadê Aqui ó pegamos a referência com esse nome aqui ó address input então aqui dentro quando eu acessar esse cara eu estou acessando o item aqui do input ou seja esse input Zinho esse campo aqui pra gente digitar e aí o que eu quero Fazer então é a gente vai voltar

aqui deixa eu diminuir aqui do lado né Deixa eu deixar aberto o nosso carrinho aqui então fora dessa função aqui né Vamos criar aqui fora a gente vai criar então ação para pegar o que você digitar então address input ponto add event listener do tipo input aqui vírgula a gente tem uma function aqui também dentro dessa function O Event listener do TIP input manda um evento pra gente e aí aqui eu posso pegar o valor que você digitou Então let input value input value iG event P target para pegar o item pon eu tenho acesso

ao valor ali e aqui dentro a gente pode fazer uma verificação né quando a gente clicar em finalizar pedido eu posso verificar se você tá tentando enviar ele vazio e aí quando você clicar em finalizar se ele tiver vazio o que eu quero fazer é mostrar a nossa bordinha né Agora se ele for diferente aqui de vazio eu quero fazer o quê eu quero esconder a nossa nosso Aviso lá então vou deixar isso aqui pra gente fazer por último pra gente ver a parte visual e o próximo passo é finalizar o carrinho Então vou até

criar junto aqui pra gente fazer isso a lógica bem parecida para não conexo tá então vou criar aqui também o Nossa lógica de finalizar o carrinho pra gente finalizar o carrinho Eu já peguei aqui do a gente já pegou também o ID ó a gente tem aqui o finalizar pedido que é do checkout btn Então se a gente olhar aqui ó checkout Btn é só a gente acessar essa esse nome que a gente deu aqui então lá embaixo também eu vou criar fora aqui ó checkout PTN event listener do tipo Click né quando clicar no

botão a gente tem uma função dentro dessa função aqui eu não preciso pegar o evento que eu não quero manipular o evento aí o que eu quero verificar é if se o o cart pon length for igual a zero ou seja se você clicar em finalizar pedido sem ter nenhum item no carrinho Eu não quero fazer nada Então vou dar um return aqui então não quero fazer nada agora if se você clicar em finalizar pedido e o seu address input ponto value ou seja o valor dentro do digitado do input for igual a zero ou

seja igual a vazio ali né quer dizer que você tá tentando enviar sem digitar o endereço eu não quero também aí o que eu quero fazer é dentro do IF aqui eu posso exibir aquele nosso Alerta então lembra que a gente tem um alerta a gente até pegou a referência aqui ó que é o Address warn aqui ó Então o que eu quero fazer é eu vou acessar aqui o nosso address warn pon Class list pon remove Então vou remover a classe que ele tem que é aquele Hidden que esconde ele então se eu salvar

isso aqui vamos testar então ó cliquei não tenho nada aqui e vou tentar enviar cliquei Ele nem tá fazendo nada por quê Porque ele tá barrando falando que a gente não tem nada no carrinho beleza Mateus Vou colocar aqui Um item no carrinho cliquei Ó agora eu tenho um item no carrinho Opa Um item aqui no carrinho mas eu não digitei o endereço cliquei Opa Olha que bacana aparece aqui ó Digite o endereço completo e a gente pode até melhorar né pode colocar a bordinha vermelha aqui do nosso input então além de de remover aqui

para exibir o alerta eu também quero acessar aqui o address input pon classlist PED add Então vou adicionar também o border traço Red traço 500 Então vou adicionar uma borda vermelha Também ó salvei aqui Vou atualizar aqui de novo ó não tenho nada né vou adicionar um item no carrinho não vou colocar endereço cliquei Ó Olha que bacana né ele não ficou vermelho vamos ver o porquê ó aqui a gente passou a classe certinha que é o nome da borda Vamos abrir aqui o nosso CMD ó olha que legal o meu CMD ele parou de

rodar aquele arquivo lá do nosso tnd Então tem que tomar cuidado que às vezes se você colocar alguma classe que você colocou a Classe e não teve mudança aqui visualmente dentro aqui do nosso Live server cuidado com isso aí então ele parou de rodar aquele nosso comandinho lá do teu Ink então preciso dar um npm Run Dev Às vezes acontece dele parar de rodar então roda novamente aí se você colocar alguma classe e ele não mudar alguma coisa dá uma conferida nisso aí então ó ele já budou aqui de novo vou só Minimizar Vou atualizar

vou adicionar aqui Um item vamos lá ó finalizar Olha Que legal agora ele fica vermelho então quando você tiver um item no carrinho mas não tiver endereço ele vai fazer isso aqui e depois que ele fizer isso aqui dentro do IF eu dou um return para ele parar a execução do nosso código e não ir pra parte de baixo tá então com isso ó a gente já tá fazendo as verificações agora uma coisa que a gente pode colocar é eu tenho o item no meu carrinho não digitei o endereço cliquei ele vai marcar em vermelho

mas se eu Começar a digitar aqui eu quero remover ó a parte vermelha então aqui dentro agora sim a gente vai fazer isso O Event listener que a gente criou de input é para monitorar o nosso input concorda um evento de monitoração do nosso input E aí eu vou pegar aqui se ele tem algum valor aqui dentro e aí eu vou verificar olha if se o input value for diferente de vazio de uma string vazia quer dizer que ele já tá digitando alguma coisa ali dentro então se ele tá digitando alguma Coisa ali dentro Eu

quero remover essas vermelhos aqui e aí o que eu vou fazer é Eu vou acessar o nosso address input Vou acessar ele pon Class list pon remove vou remover a nossa borda vermelha então border traço Red traço 500 então removo essa essa classe e eu vou acessar o address warn que é o nosso erroz inho lá pon classlist PED Então vou adicionar novamente aquele Hidden que é para remover tá então se eu salvar isso aqui atualizei vou adicionar dois itens aqui Ó beleza tentei enviar Deu erro aqui mas se eu começar a digitar ó e

clicar fora Ele já percebe que a gente tá digitando dentro do input e que ele não tá mais vazio então ele remove as classes de alerta de aviso beleza Olha que legal né aí fica muito mais dinâmico tá então agora ó Fizemos a parte aqui de adicionar no carrinho Fizemos a parte de remover do carrinho calcular o total verificar aqui e pegar o valor que você tá digitando agora então vamos lá pro Nosso pra gente tá quase finalizando para colocar esse projeto no ar então agora a gente tá acessando os detalhes do carrinho verificando os

itens do carrinho removendo os itens do carrinho adicionando e verificando o endereço né para não deixar enviar vazio e aí validar se o restaurante tá aberto hum a gente não tá fazendo isso aqui já vamos fazer e enviar o pedido para WhatsApp pra gente finalizar então primeiro vamos validar isso aqui Então como que a gente Pode validar para ficar bem legal e algo simples aqui né a gente poderia deixar sem fazer isso poderia né Mas a gente pode falar olha se o horário que você tiver na na sua máquina aí for antes das 18 Ou

depois das 22 eu quero não deixar o usuário enviar o pedido só pra gente ficar legal né vamos vamos fazer isso aqui você tá comigo aqui pô já compartilha depis isso aqui esse projeto aqui para outras pessoas fazerem também então vamos lá vamos fazer isso aqui V Minimizar e a gente vai fazer isso aqui embaixo tá então Ó depois aqui ó fazer fora aqui ó depois do nosso checkout que é a função onde a gente vai enviar pro pro WhatsApp aqui a gente vai fazer o quê aqui a gente vai criar só uma verificação Zinha

tá a gente pode criar aqui por exemplo uma função function vou chamar aqui de check Restaurant Open tá pode ser o nome que a gente quiser então essa função ela vai ficar ela vai fazer o quê Ela vai fazer um algoritmo para Verificar a hora e manipul o card do horário tá então é só isso que ele vai fazer então aqui o que eu vou fazer é con data por exemplo igual a new date Então vou pegar a data de hoje o new date do JavaScript vai gerar a data de hoje E aí eu vou

ficar com hora igual a data que a gente criou pon get Hours esse get Hours vai devolver a hora atual que a gente tá E aí eu vou fazer o qu eu vou retornar para quem usar essa função return ou seja se a hora for maior ou Igual a 18 e se a hora for menor que 22 ele vai retorn not room ou seja se a hora do seu PC lá se se a sua hora for maior que 18 e a sua hora for menor que 22 que é o nosso caso aqui ele vai devolver

isso aqui como true se ele devolver então como true quer dizer o quê se ele devolver como true quer dizer que que é maior que 18 ou seja tá aberto e é menor do que 22 ou seja o restaurante tá aberto então true ó vou só colocar aqui para vocês true Restaurante está aberto tá então vamos salvar isso aqui agora a gente tem uma função inha para usar Olha que bacana e lá para ficar mais legal legal ainda a gente também tem aqui ó lá em cima no nosso reader né a gente tem aqui vamos

lá no reader a gente tem aqui no heer o nosso spam que é onde tem o horário certo lembra que nesse horário a gente deixou ele como Verde padrão e a gente tem um ID ó date trç spam aqui ó a gente pode manipular ele também então salvei Vamos manipular ele aqui ó fora da função eu posso até verificar aqui ó con spam item igual a document get Element by ID vou pegar aqui o ID do nosso date SP E aí eu posso manipular ele con is open igual a check Restaurant Open Então vou vou

chamar a nossa função lembra que essa função ela vai pegar a data vai ver a hora e vai retornar com base na hora então ela vai retornar se satisfazer retorna true se for diferente desses horários que a gente tá manipulando aqui A operação lógica ele devolve falso quer dizer que já tá fechado então a gente vai fazer aqui a função e colocar o retorno dentro dessa variável is open e agora eu posso manipular aqui ó if se está is open eu quero fazer o quê Eu quero acessar o nosso spam item pon classlist pon remove

o nosso BG tro Red tro 500 Quero remover se tiver alguma classe vermelha e eu quero deixar a classe spam item pon classlist PED vou adicionar a classe BG tro Green traço 600 que é a classe Verde agora ELS quer dizer que se ele não tiver aberto Quer dizer que esse restaurante tá fechado aí o que eu vou fazer é eu vou fazer o inverso né então eu vou dar aqui um spam item pon Class list pon remove vou remover o nosso BG traço Green traço 600 então removo o verdinho e como ele tá fechado

eu quero adicionar o vermelho então spam item classlist pads eu adiciono novamente a nossa classe aqui ó BG Red 500 tá salvei aqui então olha que Sensacional quando a gente rodar o JavaScript quando a gente rodar aqui ó quando eu rodar o meu código quando abrir o site como a gente colocou fora de função então quando carrega o JavaScript ele já executa aqui ó a nossa função coloca o retorno dentro dessa variável is open E aí faz aqui ó se tiver se tiver true então ele remove o vermelho e adiciona o verde quer dizer que

tá aberto se tiver falso ou seja se não satisfaz esse horário ele vai Remover o verde e colocar o vermelho Então vou salvar se eu atualizar Ah que sensacional Olha que belzinha olha que delicinha então o que que a gente vê aqui né agora deixa eu olhar a hora aqui que eu não sei que hora que eu tô gravando né agora aqui são 16 horas então tem que tá fechado né E se você olhar aqui ó olha que bacana como são 16 horas tá fechado então eu não consigo fazer o pedido ó olha que legal

tá vermelho aqui então se você abrir o site Aqui o nosso Nossa plataforma e o horário for entre as 18 ou maior ou igual a 18 e menor que as 22 ele vai mostrar isso aqui como verdinho tá olha que legal que sensacional né então no meu caso tá fechado ainda tá então agora a gente pode até usar essa verificação aqui do check Restaurant Open dentro aqui também se você quiser dentro aqui do nosso finalizar pedido tá então aqui no nosso event list no checkout vou até comentar aqui em cima finalizar pedido Tá então aqui

a gente fez duas verificações se o carrinho estiver vazio e se você não fechei o endereço eu quero barrar E aí se quiser a gente pode fazer essa verificação também se tiver fechado o restaurante eu quero barrar a gente pode fazer isso tá então se quiser a gente pode trazer aqui ó por exemplo vou até trazer aqui em cima colocar a primeira verificação ó eu vou dar aqui um conch is open igual check Restaurant Open então ele vai chamar a nossa função Ela vai devolver se tá aberto ou fechado dentro dessa variável E aí eu

posso fazer ó if se não tiver is open abre e fecha os Chaves então o exclamação quer dizer negação ou seja se ele não tiver aberto eu vou dar aqui um Alert restaurante fechado no momento tá E aí eu vou dar um return aqui no nosso if para ele parar a execução do código para ele não tentar seguir Aqui para baixo agora se ele passou em todas as verificação ou seja se tá aberto se tem Mais de um item no carrinho Se Você verificou e digitou um endereço agora aqui embaixo o que a gente vai

fazer é enviar o pedido para a pzinha do WhatsApp lá né WhatsApp web tá então bora fazer isso então primeiro eu preciso mapear todos os seus itens eu vou dar aqui um console P log no nosso cart só pra gente ver que eu vou mostrar tudo que eu tenho no meu carrinho tá salvei Então vamos lá se eu voltar aqui ó e eu clicar no console Olha que bacana E eu tentar adicionar os itens ó e eu vou voltar vou digitar o endereço ó Avenida 10 aqui ó e eu clicar em finalizar restaurante tá fechado

então não consigo fazer o pedido Olha que sensacional né só que no nosso caso ains da gente só poder testar porque senão a gente não vai conseguir enviar o pedido né A não ser que eu fique aqui até as 18 horas então eu vou desabilitar essa proteção aqui pra gente poder fazer um pedido mesmo com pronte fechado tá então Aqui no nosso cara eu vou selecionar esses itens e vou dar um control barra aqui ó só para ele comentar então ó coloca a Barrinha na frente só para a gente conseguir fazer de fato um um

pedido com o restaurante fechado tá então agora se eu atualizar coloquei os itens que eu quero beleza vim aqui ó digitei aqui ó Avenida 10 finalizar pedido se eu abrir aqui o inspecionar com o botão direito console e a gente olhar aqui ó tenho três itens no meu Carrinho se eu abrir aqui ó o item zero ó o item um Olha o item dois então tenho todos os itens Olha que bacana agora eu só quero redirecionar para api do WhatsApp com esses itens aqui a quantidade o valor e o valor total então ao invés de

dar um console agora a gente vai fazer o quê vamos mapear aqui pra gente montar como é que eu quero retornar Então vou dar aqui um conch cart items cart pmap o map que ele recebe uma função anônima e dentro ten Acesso a cada item também do meu carrinho cada objeto então aqui dentro Eu quero retornar abre fecha parênteses abre aqui a nossa asinhas deitadas E aí eu vou formatar como é que eu quero resibir por exemplo espaço cifrão abre fecha o Chaves item pname espaço quantidade dois pontos abre fecha o parênteses cifrão abre fecha

o Chaves item pon quantity pra gente mandar quantidade depois do parêntese eu quero mandar por exemplo Preço cifrão abre e fecha o Chaves item pon Price por exemplo pra gente mandar o preço Vou colocar até um R um cifrão antes Aqui ó Beleza então isso que eu quero mandar então agora se eu colocar um console Opa console no nosso cart items aqui pra gente ver o o que que esse cart items está devolvendo eu estou acessando o nosso carrinho mapeando e devolvendo uma string com cada nome formatados enviar lá pro nosso restaurante então se eu

salvar e a gente Atualizar olha que massa né o map ele vai percorrer e vai devolver essa string formatada então se eu adicionar dois itens colocar três aqui ó cliquei em finalizar Opa falta o endereço Olha a validação aí Avenida 10 e eu vou clicar em finalizar ó ele manda um arrei e cada arrei tá formatado ó o o nome do item o preço a quantidade Olha que legal e o valor perfeito só que eu não quero um Array eu quero apenas a string Então como ele devolve um Array eu posso agora No final do

Map aqui ó posso dar um ponto join abro aqui ó com aspas junto aqui então eu vou juntar todo o nosso Array então agora se eu salvar isso aqui agora eu vou ver aqui dentro o nosso item então Ó vou atualizar Vamos colocar de novo aqui ó colocar aqui o endereço Avenida 10 finalizar deixa eu abrir aqui o inspecionar console e olha que legal ele devolve agora um texto ó Qual que é o nosso pedido ó olha todo o nosso pedido aqui ó beleza que é o com a Quantidade Qual que é o preço e

todos os itens aqui beleza uma coisa até pra gente separar os pedidos depois aqui do Map pra gente separar eu posso colocar aqui ó uma barrinha aqui ó uma barrinha invertida aqui ó tá dentro ainda da string salvei depois disso a gente pode pegar então agora e criar nossa mensagem então conche message igual vou criar aqui encode ur component Opa U component E aí eu vou passar o nosso Card items aqui que é onde vai ter Então a nossa Mensagenzinha formatada e aqui eu vou ter um conch também conch phone e aqui nesse phone aqui

é para vocês colocarem por exemplo é qual que é o o restaurante né então você vai colocar lá por exemplo coloca o seu seu celular aí para você testar que é qual que é é o telefone do restaurante que você quer redirecionar tá então aqui dentro coloca o seu telefone eu vou colocar aqui um telefone que a gente tem do suporte aqui eu vou colocar aqui 67 99 961 728 E lembra que tem que ser um telefone Real Tá e agora eu vou redirecionar para api do WhatsApp então Window pon openen Então vou adicionar aqui

pra gente carregar uma uma nova URL aqui no navegador https 2 p bar wa.me bar cifrão abre fecha o Chaves só que eu quero colocar uma variável então ao invés da gente usar aspas duplas a gente vai usar aqui em volta aquela aspas deitadas e aqui também ó asinhas deitadas pra gente colocar uma variável Aqui dentro então vou colocar pro nosso phone cuidado com a barra aqui depois o telefone interrogação text igual cifrão abre e fecha os Chaves e aqui a gente vai colocar Então a nossa message Ou seja a mensagem que a gente tem

aqui com os produtos tá depois da mensagem espaço ainda dentro aqui da do nosso da nosso texto endereço Vou colocar aqui ó endereço dois pontos cifrão abre e fecha os Chaves e aí o endereço vai est através do address input.val Então deixa Eu puxar aqui ó vai tá aqui dentro tá então nosso endereço vai est através do address input value que vai dar o valorzinho lá e aí se quiser abrir uma nova aba vírgula aqui depois do nosso texto Abro mais mpas duplas underline Blank para ele abrir numa guia nova do navegador tá então perfeito

se eu salvar isso aqui vamos testar então salvei vamos atualizar isso aqui eu vou colocar aqui ó alguns itens colocar três e um refri ó então meu Carrinho tem dois hambúrguer um refri Beleza vou colocar aqui o endereço a venida 10 finalizar pedido e olha que sensacional né então agora o que ele faz é ele redireciona para essa url que é uma API do WhatsApp que é a forma que a gente pode fazer gratuita sem ter que criar um backend sem ter que usar api paga né do Business aí do WhatsApp que é api oficial

então a gente teria que cadastrar ela como e pagar ela também então aqui ó hamburgers Smash quantidade Um preço tá aqui Hamburger salad que foi outro que eu selecionei o preço tá aqui também e a gente colocar aqui o guaraná lata a quantidade o preço e aí o endereço abrindo a 10 tá então aqui ó ele já tá falando para Qual que é o o telefone que ele vai isso aqui e como a gente tá desenvolvendo na web se eu clicar iniciar conversa ele vai abrir o meu WhatsApp web eu não vou clicar porque vai

abrir o meu WhatsApp aqui e se você tiver por exemplo ah navegando Pelo celular e ele vai redirecionar automaticamente aí para a api do WhatsApp ou seja ele vai abrir o WhatsApp aí no seu celular já preenchido né escrito ali com toda a parte do do que que você quer aí você só clica em enviar ele já vai est tudo preenchido com os seus produtos que você selecionou e dentro do WhatsApp lá do telefone daquela loja então sensacional tá então isso aqui é muito bacana então é uma forma que a gente pode fazer com a

p Gratuita do WhatsApp então dessa forma a gente redireciona ele aqui com todo os dados aqui ó que a gente colocou beleza e se quiser para ficar mais legal ainda depois que você enviar enviou abriu lá você pode zerar o seu carrinho por exemplo lá quero zerar tudo aqui ó como é que a gente pode fazer isso então vamos lá ao invés depois aqui do Windows Open a gente vai acessar aqui também e zerar o nosso carrinho Ou seja a gente vai limpar ele né Posso chamar aqui Direto posso dar um cart p l igual

a 0 se a gente quiser tá e eu posso ou também eu posso dar aqui um cart igual a uma uma arrei vazio vai dar vai tá vai dar até no mesmo aqui a gente já tá limpando aí o nosso carrinho se a gente quiser fazer dessa forma tá E aí eu posso est aqui chamar o nosso update cart modal para ele atualizar visualmente aí a nossa lista Beleza então dessa forma agora salvei se a gente atualizar e eu colocar aqui ó Beleza colocar aqui a vinda 10 cliquei Ó ele redireciona aqui com os itens

que eu coloquei se a gente voltar o carrinho tá limpo aqui já beleza então perfeito Maravilha e pra gente finalizar aqui com chave de ouro que a gente tá quase finalizando para poder fazer o Deploy colocar esse projeto no ar a gente poderia colocar uns avisos aqui dentro de alertas né então vamos voltar aqui ó vou voltar aqui no nosso projeto ó onde a gente colocou o alerta aqui ó vou Descomentar aqui Aquela nossa verificação que se o restaurante não tiver aberto ele vai mostrar o alerta então ó se eu salvar isso aqui agora eu

descente aquela verificação deixa eu fechar aqui então agora o restaurante tá fechado né Se eu colocar aqui ó no meu caso o restaurante tá fechado então se eu tentar eh cadastrar aqui Enviar um pedido com o restaurante fechado ele vai exibir o alerta aqui do IF Então olha que legal vou adicionar restaurante Fechado Vamos colocar um alerta para ficar mais bonito isso aqui pelo amor de Deus né então vamos lá a gente vai usar uma biblioteca que eu já deixei separado aqui ó chamada toast fy JS tá a gente vai vir na documentação dela aqui

é muito simples pra gente usar então aqui dentro a primeira coisa que a gente precisa fazer é a gente pode usar a CDN Então vou copiar aqui o CSS que é o estilo a gente vai vir aqui dentro ó vamos vir dentro aqui do Index P HTML Aqui em cima da do Import aqui da nossa pronnect aqui que é da fonte eu vou colocar aqui o Import ó vou colar vou dar aqui uma barrinha para fechar tag então importar o CSS aí do toou fy salvei aqui e também a gente precisa importar o JavaScript Então

vou copiar aqui lá embaixo ó Antes também ó vamos lá embaixo Antes aqui da nossa tag do script JS eu vou colar aqui a tag do script do toou fy salvei aqui antes do Body né antes do script JS salvei agora A gente pode usar Olha que simples né posso fechar vou voltar aqui no nosso script ao invés de usar um alerta eu vou usar esse toast ó posso até copiar aqui um exemplo aqui ó ó com essas propriedades aqui ó copiar aqui e eu vou colocar aqui por exemplo toast fy abre e fecha parênteses

só que tem que ser com T maiúsculo abro Chaves aqui dentro e aqui eu vou colar aqui as propriedades então o text é o texto do toou né Por exemplo Ops o Restaurante está fechado e aqui a duração 3000 msos eu não quero que quando clicar Vá para nenhum lugar New Window também não quero nada disso aqui Close quer dizer que pode fechar ele ele vai est Seme posicionado no top a posição dele eu quero que seja no right ou seja fique na direita Stop on Focus é quando passar o mouse em cima ele fique

parado ali não fecha o o aviso e o background a gente pode colocar aqui uma cor né background eu posso colocar aqui Uma cor #f 4444 que é um vermelho Então vamos testar isso aqui agora e depois o toast F ponto eu preciso dar aqui um show show toast né abre e fecha parênteses para ele exibir o toast aí então dentro aqui do wif caso restaurante esteja fechado salvei aqui se a gente olhar aqui agora vamos lá Vou atualizar como restaurante gente tá fechado ele tem que mostrar o alerta Então vou colocar aqui os itens

vou abrir e eu vou digitar o endereço Olha só beleza cliquei Olha que legal Ops o restaurante tá fechado posso clicar ele vai fechar ó se eu ficar clicando ele vai abrir os avisos então ficou muito massa né e a gente pode também se a gente quiser é colocar um aviso para outras coisas tá algum lugar que você quiser usar esse toast você pode usar dessa forma aqui em algum local que ele vai exibir esse toast na tela Beleza então agora a gente exibiu o toast então a gente já tá exibindo o Toast vamos lá

pra nossa funcionalidade pra gente finalizar validando o restaurante enviando pro WhatsApp aqui agora falta só a gente fazer o Deploy então aqui a gente já tem todo o projeto responsivo onde a gente já tem aqui os itens onde você pode clicar ele já muda aqui o carrinho aqui embaixo então onde a gente pode fazer tudo isso digitar aqui o endereço ó se eu tiver fechado eu já nem consigo fazer se o restaurante tiver aberto aí eu consigo fazer então Vamos fazer o Deploy pra gente finalizar então para fazer o Deploy a gente precisa colocar o

projeto dentro do github tá a gente tem um curso gratuito de Git github se você nunca mexeu com Git github Mas então eu vou subir esse meu meu projeto pro meu github aqui então vou até vir aqui ó que eu nem instancie nem nada eu vou vir aqui vou criar aqui um Git Ignore Ah já tem aqui ó se não tem cria um New file chama aí de ponto Git Ignore D Barra node modules Para ele não enviar a passa node modules lá pro seu repositório porque a node modules é apenas as dependências que a

gente tá usando aqui do te índice SS Beleza então fez isso aí a gente vai vir aqui no nosso CMD vou parar de rodar aqui dar um control c vou dar aqui um Git init vou dar aqui um Git add ponto e vou dar aqui um Git commit menos M aqui vou abrir aqui aspas aqui e eu vou colocar aqui por exemplo é o que que é né Vou colocar aqui por exemplo que é Aula dois né só pra gente seguir essa conversão que vocês vão ter esse repositório também então aula dois finalizando projeto tá

não vou seguir convenção nenhuma de comit e eu vou dar aqui um Git push né então como esse meu projeto já tá linkado com o meu github então eu já vou dar um Git push lembrando se você não sabe Git github a gente tem um curso gratuito para você aprender a subir aí tá então maravilha a gente já colocou aqui deixa deixa eu Abrir aqui o meu repositório vou abrir o repositório do meu projeto ó já está aqui ó tá então aula um aula dois já tá tudo aqui certinho então a gente já subiu aqui

toda o nosso JavaScript completo já tá aqui já tá tudo maravilha demais então a gente já tem o projeto agora vamos fazer o Deploy lá na vercel pra gente finalizar Então vem aí no site da vercel se você nunca usou a vercel vem aqui na parte de signup né ou faz o login eu gostaria né Eu recomendo que Vocês façam um login ó login já loga com o seu github então ele já vai ter as permissões lá de acessar os seus repositórios dentro do seu github Então faz o login ou cria a sua conta aí

com o github depois disso né ele vai cair aqui ó tá então aqui dentro Eu tô no meu painel aqui eu tenho vários projetos aqui já você vai fazer é ADD New Project Tá então vamos adicionar o novo projeto e aqui ele fala olha você eu quer importar do seu github Se tiver Aparecendo aqui que não tá conectado com seu github você clica no botãozinho que ele vai conectar para acessar os seus repositórios então eu ten vários repositórios aqui no nosso caso é o Projeto deixa eu ver o nome aqui é projeto traço cardup né

então o nome do repositório é projeto traço cardup deixa Deixa eu ver se eu acho aqui aqui ó 21 horas projeto cardápio deixa eu ver aqui se é esse nome aqui mesmo só para não escrever errado né ah é isso aqui mesmo Perfeito então Ó você só pesquisa aqui caso não tenha achado ou se aparecer na sua lista aqui tá então vou pegar aqui ó projeto trazo cardápio deixa eu achar aqui de novo beleza é esse aqui era aqui vou dar aqui um Import tá projeto cardapio o Framework não tem né ele vai aparecer como

outros ali porque não estamos usando nenhuma biblioteca o Framework a o Root directory ou seja qual que é a pasta Rot É de fato a is perfeito aqui eu não quero colocar Nenhuma variável ambiente nem nada vou fazer aqui um Deploy tá então S vou clicar aqui no Deploy e a gente vai esperar esse cara aqui tá Então vamos aguardar aqui enquanto ele faz o Deploy beleza vamos ver aqui ó ele tá falando aqui que ele fez o Deploy Olha lá saiu até onte de de coisinhas aqui ele fez o Deploy a gente vai vir

aqui ó dentro em dashboard vamos vir aqui ó no projeto vamos vir aqui ó em aqui em deployment a gente vê que o Deploy foi feito que tá Ready Ou seja que tá pronto se a gente olhar aqui em projeto ó já carregou aqui e se a gente olhar aqui em domínios tá vendo tá vendo que ele tem um domínio aqui ó só clicar nesse domínio aqui ó clicou nele e pronto agora o nosso projeto tá no ar essa URL Você pode passar para qualquer um que já vai acessar então agora já tá funcionando aqui

o nosso projeto no ar ó vou até abrir aqui ó na aba anônima para você ver vou abrir aurl e pronto ó projeto já Tá funcionando sensacional Então posso por exemplo aqui ó responsividade então Ó vou adicionar aqui os itens vou colocar mais um Gu dois guaraná vou adicionar e olha só eu tenho aqui um Smash um salada eu tenho aqui dois guaraná Ah tá aqui o total Vou colocar aqui Avenida 10 e eu vou colocar aqui ó finalizar pedido e eu não consigo porque tá fechado o restaurante né então se eu abrir o site

aqui essa essa mesma URL se a gente abrir depois das 6 horas aqui Ele vai aparecer aí que tá aberto aí a gente vai clicar em finalizar pedido Ele vai redirecionar para aquela URL lá do WhatsApp tá então conforme a gente viu aqui dentro do projeto Então essa aqui já tá no ar o projeto já tá sensacional uma dica final pra gente finalizar aqui para você que chegou até aqui tá querendo aprender a gente vai melhorar um pouquinho a parte de seo desse projeto Então vamos lá pensa que a gente tá criando o projeto vou

fechar isso Aqui tá vou voltar pro nosso Fechar isso aqui deixa aqui aberto a a vercel vou voltar pro projeto e pensa que a gente tem aqui ó deixa eu só rodar aqui o nosso npm npm rund Dev aqui ó Beleza vou deixar rodando aqui vou Minimizar pensa que é legal a gente ter um seo bacana para caso seu site seja rankeado caso a gente compartilhe pega a RL do Deploy compartilhe no WhatsApp para alguém manda lá no Facebook vai no Linkedin e tem uma boa metatag de quando Ele dá aquele arquiv inho Ed né

de qual que é o título uma foto de descrição a gente pode ter isso aí também então o que eu vou fazer é a gente pode criar metatags então em cima aqui no nosso HTML dentro do cabeçalho isso aqui é diquinha de ouro tá então dentro do cabeçalho depois aqui do nosso Pode ser aqui depois do fonte awesome Cadê o fonte awesome aqui ó fonte awesome em cima do nosso output p. CSS a gente vai criar aqui ó metatag de og de Open graph Tá então aqui a gente vai colocar uma uma tag de meta

com a property Vou colocar aqui ó meta deixa eu ver se ele já aparece aqui ó ah não vai aparecer então colocar aqui uma meta property og 2 p Type content o tipo do conteúdo é website ele fecha aqui vou duplicar e a próxima que é og title E aí o content vai ser por exemplo o nome da Hamburgueria né Por exemplo Dev [Música] Burger o melhor hambúrguer tá então isso Aqui quando alguém compartilhar o seu site esse é o título que vai aparecer tá E aí eu vou criar aqui também um meta vou duplicar

que é mais fácil né Vamos duplicar og depois a gente vai ter uma image tá E aí aqui no content a gente vai colocar Qual que é o RL da imagem tá E aí é o URL da imagem como a gente já fez o Deploy eu já fiz o Deploy aqui ó vou clicar aqui ó já fiz o Deploy eu vou vir aqui na minha então vai no seu Deploy faz o seu Deploy no seu Deploy Você clica aqui ó na logo com o botão direito abrir uma nova e guia só pra gente pegar aqui

ó ó a URL da imagem tá então peguei a URL da imagem que tá hospedada no ar lá beleza e aí eu vou usar ela aqui ó como da og image já já a gente vai ver o porqu disso aqui tá Fica tranquilo copiei aqui e colei vou duplicar mais uma e além do image eu vou colocar aqui também o description tá que é a descrição desse cara então quando alguém Compartilhar esse seu a URL do Seu site Qual que é a descrição você pode colocar alguma descrição o melhor hambúrguer caseiro de verdade sei lá

você vai colocar a descrição do do restaurante an do cara depois a gente vai mudar de novo e a gente vai copiar aqui mais uma vez e duplicar e vai ter o site underline name qual que é o nome do site Mateus o nome do site aqui é o nome então por exemplo Dev Burger tá esse é o nome do meu site legal então é isso aqui então agora a gente vamos salvar isso Aqui e fazer o commit que a gente fez uma meta tag a gente vai ver como isso aqui vai funcionar no ar

tá salvei aqui e agora como eu alterei o meu HTML aqui ó visualmente aqui no nosso projeto que tá rodando aqui em local host não muda nada mas se a gente atualizar e abrir o inspecionar ele vai tá aqui ó dentro do head a gente já tem nossas propriedades meta Beleza então agora vou vir no nosso CMD novamente paro de rodar vou dar aqui o Git AD ponto né pra gente subir lá pro Github Git commit Men M eu vou colocar aqui aula 2 adicionando metatag og Beleza então eu vou dar aqui um commit e

eu vou dar um Git push só pra gente subir lá pra gente ver e como a gente integrou o nosso projeto com o github dentro da vercel quando eu faço o push aqui ou seja enviei pro github o nosso github aqui ó se a gente olhar aqui o github do projeto que eu acabei de enviar ó se eu atualizar aqui ó olha só que legal ele acabou de falar ó já tá Aqui no github se a gente olhar aqui os commits né que esse aqui é o que vai ficar para vocês ele tem aqui ó

já falou que a gente adicionou legal se a gente vir aqui no projeto e vir aqui em deployments dentro do Nossa vercel como ele tá conectado com o github ele vai detectar que tem uma nova um novo push dentro da Main e ele vai fazer esse Deploy automaticamente se que a gente tem que refazer de novo Então olha só que legal ele tá falando aqui ó que ele Acabou de enviar de novo Então agora eu vou vir aqui no projeto vou vir aqui aqui de novo ó vou abrir aqui a o domínio dele beleza Esse

é o domínio que ele tá no ar tá E esse cara aqui se eu abrir aqui o domínio que tá no ar inspecionar e a gente vem aqui dentro do Head Olha a nossa metatag já tá aqui o que que esse cara vai fazer Mateus o metatag de Open graph é quando você compartilhar sabe quando você pega uma url vai compartilhar para alguém no WhatsApp vai compartilhar com alguém no Linkedin que é o que a gente vai fazer agora você vai ver que ele aparece a pré-visualização da imagem que a gente colocou no título a

descrição que a gente colocou Então melhora muito para quando você ser encontrado no Google para você compartilhar também então por exemplo por exemplo eu vou pegar aqui a nossa URL vou copiar e vou abrir aqui por exemplo poderia ser o Linkedin vou pegar aqui o telegram por exemplo que eu Tô aqui num contato do telegram e eu vou pegar aqui a nossa URL vou colar aqui ó e Olha que bacana quando eu colei ele já colocou o nome aqui do Open graph já colocou a descrição aqui ó o melhor hambúrguer caseiro de verdade lembra que

a gente configurou isso aqui ó aqui ó a gente colocou a descrição ó o melhor hambúrguer caseiro de verdade então quando alguém compartilha É essa a descrição que vai aparecer ah Mateus vamos lá vamos finalizar isso aqui vamos Lá vou clicar aqui em enviar e olha que sensacional né quando enviar ele aparece a imagem aí ó que a gente colocou tá Ou seja a imagem que você colocou aqui ó no og image aqui poderia ser uma url da imagem da logo do a URL da imagem da logo aí do da Hamburgueria por exemplo então quando

alguém compartilhar isso aqui então igual tá mostrando aqui ó ele ia aparecer a logo aqui tá então tem aqui ó a descrição tem o título tem tudo certinho então ele formatou no open Graph lá mesma coisa se você compartilhar esse link aqui o link do seu site Ah no link qualquer outro lugar aí Twitter por aí vai ele vai criar essa pré-visualização dentro do Open graph tá então essa sacada final pra gente finalizar esse projeto que ficou sensacional Então vou até fechar aqui né deixa a gente voltar aqui vou deixar aqui para vocês então cara

que projeto sensacional um projeto pensado aí no mundo real que dá pra gente adicionar Você poderia copiar e colocar mais produtos também só a gente duplicar lá o nosso HTML com o produto então cada vez que eu adiciono aqui ó ele já aparece aqui posso remover Eu posso também clicar fora e adicionar mais quantidade ó quantidade qu já calcula aqui o total Coloca o endereço aqui e se tiver fechado ele mostra que tá fechado se tiver aberto ele vai permitir né finalizar o pedido Ele vai abrir lá a pzinha do WhatsApp que a gente colocou

Então agora não esquece de pegar esse projeto aqui compartilhar com o seu amigo também posta no Linkedin marca a gente lá no Instagram para mim repostar eu quero ver como é que ficou o seu projeto e lembrando tá para você que realmente quer aprender a desenvolver desde o extremo zero passo a passo com todo o nosso suporte acompanhamento e criar também projetos profissionais sair pronto pro mercado criar projeto com sistema de autenticação né de login Segurança banco de dados sair pronto pro mercado dominando as tecnologias e com todo o nosso acompanhamento O link tá aqui

embaixo para você se inscrever e aproveita tá porque as nossas vagas estão abertas dentro da turma mas as vagas são limitadas e o valor que eu deixei aqui embaixo para você que quer aprender de verdade que quer parar de só ficar fazendo tutorial realmente aprender programação para criar projetos profissionais é essa oportunidade tá Então Ó o link tá aqui embaixo te vejo lá dentro da turma e eu quero ver o seu projeto me marca lá no Instagram para mim conferir