CRIANDO UMA MINI LOJA VIRTUAL COM JAVASCRIPT "PURO" (TUTORIAL)

[@DankiCode]

➡ Baixe o projeto desta aula: cursos.dankicode.com/campus/curso-front-end-completo/mini-loja-virtual-com-javascript . . ❤ Se você gostou deste tipo de tutorial e quer a parte 2 deixe o like e se inscreva no canal.

[@xplaybrasil5162]

muito avançado para quem esta ainda no css do curso kkkkkkkkk

[@gustavomantini4705]

Opa Gui! Comprie o curso de desenvolvimento de apps e vi que as aulas que estão marcadas como "novo" não consigo ter acesso. É normal? Se sim, quando ficará disponível?

[@tonnyfranca3818]

para mim não entendi, porque estou em html 5

[@zeleckyio392]

Faz um tutorial de watchlist em javascript

[@BeatrizAlves-tu8tr]

não consegui baixar o código

[@neto2719]

A paz do nosso Senhor Jesus Cristo e Deus sejam contigo pra sempre amém ...

[@bate-papojovemon4747]

Amém Amém ♥️♥️♥️♥️

[@DANILODEVJS]

Amém, sou da ccb também

[@rodrigogabriel8092]

Amém mano

[@rodrigogabriel8092]

@@LittleBigMustachepra que comentar isso mn, 😢

[@biliiisodre9239]

Amém amado Deus abençoe

[@kevizcamaroti]

Mano parece que ele explica com mais animo aqui no KZbin do que nos cursos.

[@TheLekao2009]

Tem uma questão interessante nesse projeto ' items[key].quantidade' só funcionou porque o ID que foi usado corresponde ao índice do Array (iniciando com '0'), se for colocado qualquer outro valor para a key(id), ao rodar o loop do for não ira funcionar, aprendi muito com esse projeto e estava quebrando a cabeça nessa parte, pois tinha trocado os ids para '10' outro '20' e outro '30' agradeço ao professor por ter disponibilizado de forma gratuita grandioso ensinamento.

[@WenderAfonsoMartinsMachado]

o correto seria "...adicionar ao carrinho " e não "..adicionar ao carrinho " por isso esta acresecentando um vazio abaixo.

[@diegozadravec]

do jeito que ele usou geralmente usa no React, ele deve estar mais acostumado a usar lá... aqui como ele quis fazer no HTML simples deve ter ido no automático..

[@Master131]

@@diegozadravec vdd

[@RodrigoVieiraEufrasiodaSilva]

Eu usaria ao invés de para eliminar assim os refresh de página e acredito que ficaria mais semântico

[@brunoramos8057]

desenvolve sistema em particular? whatsapp [phone]

[@IgorSGZ]

9:05 Quando você usa a crase ao invés de concatenar usando o + você pode usar isso ${} Exemplo: `${val.nome}`

[@velhoguidsd]

no caso isso é crase e não aspas

[@IgorSGZ]

@@velhoguidsd verdade, confundi, valeu mano

[@vwmdeveloper]

famoso placeholder ${variavel}

[@felipecarvalho5647]

@@vwmdeveloper é template string

[@darlleybrito4198]

@@felipecarvalho5647 *``* isto é template string *${}* isto é palceholder

[@masternetfabiano]

Existe um erro bem basico que é: Uncaught TypeError: Cannot read property 'innerHTML' of null isso ocorre pois o ID está Nulo ( getElementByID) na hora do DOM carregar . Pra resolver coloque o JS antes de fechar o Body.(depois de todo contudo HTML) tem que usar a CRASE , e não Aspas duplas nem simples! Parece ser bobo, mas as vezes batemos cabeça sem achar o erro.

[@TheGamersBrazilTGB]

ta acontecendo aqui tbm mas eu nao consigo arrumar isso de jeito nem um

[@masternetfabiano]

@@TheGamersBrazilTGB coloque o script antes de fechar o body assim. seu titulo Conteúdo html Veja se ocorre o erro. Normalmente é pq está nulo o ID. Lembre se o documento html é carregado de cima pra baixo de forma linear é o script no final garante que o dom já esta alimentando

[@brunoramos8057]

desenvolve sistema em particular? whatsapp [phone]

[@masternetfabiano]

@@brunoramos8057 Eu desenvolvo, mas estou trabalhando em alguns projetos no momento!!

[@matheusassis9282]

funciona

[@hot6453]

Teria como ensinar a enviar os pedidos como uma mensagem para o WhatsApp? Tipo aqueles sistemas de delivery. Seria uma funcionalidade muito bacana, pois seria algo útil para ser aplicado em pequenos negócio.

[@daniellold]

@Tirano Lesado mano não divulga teu zap, tem pessoas mal intencionada Cuidado

[@daniellold]

@Tirano Lesado Tenta criar um discord, ae vcs se fala lá

[@daniellold]

@Tirano Lesado Mano pode me ajudar tbm?

[@noticiasdodia6147]

Não entendo nada de programação mais vou compra o curso para me torna um verdadeiro profissional!

[@marosilvv]

deu certo?

[@miguelangeloizelamancio4773]

Cara! Conteúdo sensacional, estou aprendendo muito mais com suas aulas, parabéns!! Sucesso e forte abraço!

[@Socialtipsyoutube]

ESSE TUTORIAL VAI SALVAR MEU EMPREGO. MUITO OBRIGADO!

[@douglast.9790]

Espero que der certo!

[@gleickvicente830]

Olá. Estou a 1 ano passando por cursos HTML5 e CSS3. Recentemente, já estou em curso em JS já a 2 meses. Irei te acompanhar Parabéns

[@lcardi5128]

gostei da iniciativa, vou acompanhar os proximos videos

[@maranatapizzaria6873]

meu amigo você foi o melhor que encontrei com a didática de ensino que realmente eu compreendi como criar uma loja virtual você e topado quero fazer o curso de JavaScript com vocês

[@liveflixaovivo668]

Pode continuar, já somos 40 mil assinantes

[@andreluiz85]

Usando template string vc pode usar ${variável} ao invés de `+váriavel+` para concatenar variáveis

[@alicegameschanluni3969]

obrigado pela aula! curti bastante e vou utilizar como base para montar um projetinho

[@guicgarcia]

Tentei 2 vezes criar uma loja virtual em Java só pra praticar, nunca ficou bom. Tinha q fazer relacionamento muitos para muitos, e era muito difícil. Esse ano depois de ganhar bastante experiência, tentei de novo, só q com php e javascript, e finalmente consegui, ficou até melhor do q eu esperava =) Esse é um excelente projeto para praticar

[@VNSilva95]

CARALHO O VIDEO QUE EU ESTAVA PROCURANDO QUE PERFEIÇÃO ME AJUDOU PARA UM CARALHO, ESTOU INICIANDO AGORA QUERO MUITO TRABALHAR COM DESENVOLVIMENTO, ME AJUDOU MUITO NO MEU PRIMEIRO PROJETO

[@michaeloliveira9648]

Parabéns pela iniciativa era o que eu estava procurando. No aguardo das próximas aulas.

[@lacasadelcell]

professor descobri seu canal, faz pouco tempo e estou curtindo, faz um video pra gente so pra ver como sera o engajamento como algo que voce vai ensinar e no começo vc já pratico e depois com a dica se quiser continuar continua no video.... o que acha...

[@mtheusconceicao]

Mano vc é sensacional , fala pouco e tem muita pratica

[@SamuelSilva-jl7fu]

Ja ganhou um inscrito! Excelente material, tudo muito bem explicado!

[@jonasamj]

Top demais!!!! ensina pegar o resultado do carrinho e enviar a descrição do pedido usando api do whatsapp

[@KennedyKlaydm]

Vou acompanhar pra aprender a desenvolver uma loja em javascript 😅😅 Ainda estou fazendo as aulas do curso Dev Web, a loja virtual é um projeto bem avançado e eu tô focado no javascript pra ficar um bom Dev até o fim do ano

[@leonardobarrochello415]

Vc começou pelo Web dev?

[@raphandrews1]

mal comecei ja gosto de vc parceiro bora!

[@andreyarthur3409]

Para quer quiser saber, o tema é o SynthWave'84

[@KennedyKlaydm]

Certeza? Achei mais parecido com o Dracula

[@andreyarthur3409]

@@KennedyKlaydm Absolutamente nada a ver com o dracula cara. 1. O fundo do dracula não é acinzentado. 2. As cores da fonte dele são totalmente diferentes. 3. Ele não tem a barra lateral tão escura.

[@gustavomantini4705]

É o SynthWave'84 mesmo

[@ricardolucas5908]

Pica das galaxias , kk eu ia perguntar

[@giovannimello9404]

Obrigado!

[@ebertorresmacedo3667]

muito bom cara, ansioso pela próxima parte.

[@LuizWEB67]

O erro em 11:05 era no código html do link , você tinha colocado o fechamento da tag como "" e o correto seria "" .

[@matheusjunio5142]

Boa noite, na hora que tu puxou o Div, para que serve o ??

[@alissoncristovaodacruz653]

Parabéns, abração a todos do canal. ...

[@gabriellacorte3615]

show demais. Sou front end e vou apanhar para usar coisas como backend. Me ajuda em uma dúvida: Tem no seu canal como colocar funcionando opção para login(cadastro com google) ou novo cadastro no site? Pode me falar tbm como colocar opções de entrega com correios?

[@J040_P4UL0]

qual extensão voce usa para javascript danki code?

[@thiagomoura3288]

voce consegue fazer ou tem algum video que tenho uma pagina de gerenciamento de produto, onde de para excluir, adiconar ou editar....nessa loja virtual?

[@dewebtech7607]

Legal !!, depois ensino colocar mercado pago !!

[@anaeljonas]

Essa dica de renderizar com "innerHTML" foi muito top! Antes eu renderizava com diversos "CreateElement" e "AppendChilds" e ficava uma confusão de entender depois, então isso facilitou demais. Agora só vejo um problema neste código aí, que é o fato de você não ter utilizado o próprio "Map" para colocar a função de adicionar ao carrinho direto nele, através de um "OnClick" ou coisas do tipo - para mim, foi um trabalho meio que desnecessário, que podia ser aproveitado nesse "Map" mesmo. Tirando isso, o conteúdo tá excelente! Parabéns!

[@GiovanniAuditore19]

Pesquisa sobre o insertAdjacentHTML que pode te ajudar bastante tb

[@G4BRII3LMusic]

meu carrinho não aparece o item adicionado, alguem teria o projeto da aula baixado que possa disponibilizar?

[@charlanedasilvaramosdonasc1250]

Sensacional! Excelente conteúdo!

[@miflnymoreira]

Mto boom, simples e objetivo, parabéns

[@bryandeodato734]

Tem alguma aula sua que mostra como puxar esses produtos de um bd?

[@ghostdragon8129]

é possivel manda uma lista de compras do carrinho para o whatsapp ?

[@aroldocoelho1787]

Show de bola Gui muito top

[@rodrigoloreto6476]

Essa aplicação é bastante avançada. Sou iniciante

[@neto2719]

Deus abençoe todos.

[@devison_pc]

no meu caso ta pegando todas as tag , se eu colocar o id especifico da tag , ele so pega o atributo , como faço então ? desse forma que voce fez , so tem essas e no projeto maior como ficar ?

[@gustavocarmo4102]

No meu console não fica salvo nada o que fazer ? Quando clico pra ele acrescentar no carrinho não aparece nada no console ...

[@developer_mendes]

Guilherme como eu faço uma loja virtual internacional ,exemplo aceita qualquer idioma,e que de acordo com a localização do Usuário ele mude o formato da moeda no card do produto?

[@AntonioMartins-cd8ze]

como fazer o detalhe de cada produto?

[@danielfilipe7901]

teenho uma dúvida, como posso nviar ss pedido que está no carrinho para um número de whatsapp para o cliente finalisar a compra como funcionário ?

[@pedroterra3079]

Obrigado pela Aula. Ajudou muito! Onde encontro ou compro as próximas aulas?

[@granacomaweb]

Qual maquinário minimo usar para criar aplicações web

[@lkmtoazul6152]

Como consigo criar uma nova lista só para o carrinho, que recebe o produto quando a unidade dele for maior que 0?

[@M1000-w9q]

7:50 nessa parte o meu sempre da erro

[@granacomaweb]

Como fazer aquele efeito de q passa o mouse por cima e a imagem expande

[@granacomaweb]

Como fazer imagem com link de pgto primeiro e depois de pago mostrar baixando o arquivo para o cliente

[@neto2719]

Deus abençoe todos assistam um culto da Congregação Cristã No Brasil qnd Deus colocar o desejo nos seus corações assistam prfvr...

[@jeffersongoncalves3605]

cade o link da segunda parte na descrição?

[@FamiliaSixs]

Por favor FAZ UM VÍDEO ENSINANDO A LIGAR ESSE CÓDIGO COM O BANCO DE DADOS??? PLEASEE

[@LuisFelipe-lp5eo]

Alguém pode me ajudar ? quando eu clico em carrinho não aparece por exemplo: camisa quantidade 1 ( e esta tudo intendido com o dele)

[@bukqueiroz]

Aí cara, sou leigo no assunto e estou aprendendo agora. Pode me explicar para que serve o comentário?

[@victorcrisostomo4036]

ajuda na hora que vc tiver digitando um código e quiser /*comentar*/ o que uma determinada ação do seu código faz... Mt bom pra quem ta começando pra nao se perder

[@Victor-pd9vj]

o comentario serve pra comentar no codigo html eu n lembro mt bem mas acho q e isso

[@juditebenoccithibes8006]

amigo, você poderia falar um pouco de comunicação segura com banco de dados usando JavaScript? Estou tentando aprender a desenvolver e esbarrei na questão da segurança do banco de dados que estou usando. É um site com um questionário e desejo que as pessoas entrem com uma senha, mas não precisem informar tipo o e-mail (como são pessoas de pouca instrução, desejo o mínimo do complicadores, entende?) Se puder me ajudar, não sei nem muito o que pesquisar. Obrigado

[@silvamarcelohg]

Bom dia ! Que extensão ou configuração é essa que você usa , para sinalizar e identificar as tags de fechamento do html ?

[@nakah4108]

Aula sensacional!

[@Pedro-nj8uz]

o meu não consegue aparecer a foto na pagina

[@DavidsMitnick]

demais gostei muito porem so ficou meio vago os erros por exemplo o # quem nao conhece nao sabe pra que se usa no href mas muito bom ja assisti umas 5 vezes top

[@Obobhum]

Bom demais, tá me ajudando muito

[@JohnPLAYERBR]

tem como eu passar esse projeto pro backend?

[@rodrigoofera]

Ensina uma parte mas a principal nao ensina que é armazenar os dados vindo do botão e tratá-los...

[@nftmix6117]

Simplesmente o melhor, sou aluno da Danki Code hà 3 semanas e já posso dizer que os cursos do Gui são fodas demais!!

[@PabloDoebber]

Muito bom o vídeo! Obrigado

[@shadowkams7333]

tem mais //?

[@kevinlc5215]

alguem poderia me dizer sobre o uso de [ ] na const? é usado [ ] sempre que colocar objetos dentro de const? desde já agradeço

[@felipeproinv5561]

Geralmente é usado para separar valores, por exemplo no react você cria: const [ variavel, setVariavel ] = useState () A função useState "retorna dois resultados" assim cada um fica armazenado em uma constante. Deu para entender?

[@kevinlc5215]

@@felipeproinv5561 SS, vlw cara Tmj mano

[@felipeproinv5561]

@@kevinlc5215 ✌👍

[@GiovanniAuditore19]

é um array/lista, serve pra armazenar informação agrupada.

[@kevinlc5215]

@@GiovanniAuditore19 vlw mano, tmjj

[@kilderaugusto7833]

Qual código pra receber pagamentos do cliente via cartão de crédito ou débito? tipo Netflix que vc cadastra o primeiro mês grátis e depois vem cobrando uma valor específico cada mês

[@gleickvicente830]

Na parte função, deu uma serie de erros no meu editor. Eu uso o vs code. no sublieme text tambem da erro. assim não dá pra aprender! e ´ja revisei!!! tá identico ao do video

[@canaldobasco7330]

Mto ótimi de bom, obrigado!

[@richardalves2760]

Gui,o curso pacote Full Stack master você indicaria pra um iniciante ou pra quem não sabe nada? Outra pergunta:toda essa tecnologia JS ,node JS e etc são ferramentas pagas ou gratuitas? desculpa a minha burrice!

[@Brenofvs]

Muito bom Gui! só faltou o preço dos produtos haha

[@josegomes3276]

preciso de ajuda para criar um dapp na rede da smart chain

[@alecfr27]

Qual extensão baixo para programar Js no vscode?

[@jeancarlossouza6147]

E a 2º parte ?

[@neto2719]

The peace of God and Jesus Christ to be with you for always,amen ..

[@WedersonWinchester]

Meu innerHTML não é aceito mesmo usando as crases.

[@guiir.f2611]

Depois de colocar o inicializadorLoja para aparecer as imagens não aparecem no site e não to achando o erro

[@yato_5154]

09:55 O meu não aparece nada ;-; da "Uncaught SyntaxError: missing ) after argument list"

[@yato_5154]

Era um ponto e virgula que faltava mas apareceu outro "Uncaught ReferenceError: val is not defined at index.html:44 at Array.map () at inicializarLoja (index.html:40) at index.html:53"

[@eduardocanestri8195]

O meu tbm

[@felipeproinv5561]

O problema de montar uma loja dessa forma seria a parte de SEO, se você realmente gosta de programar ou precisa de algo sério, procure por tecnologias como Next.js entre outras

[@GiovanniAuditore19]

Nextjs é server side rendering, soluciona o problema do react de injetar o código após o carregamento. Nesse caso ele usou vanilla js, que não impacta o SEO.

[@marcoscouto6471]

tentei fazer mais nao consegui desisto!!!]

[@seralterego]

Já esperando a parte 2!

[@victorbarbosa8371]

É seguro fazer loja em javascript, ou em WordPress ou php é melhor?

[@richardelesbao]

Com javascript fica ate melhor do que no wordpress, so que tu tera que lidar com 3 abstraçoes de aplicações dashboard,loja e servidor da loja. Essa "mini loja" que foi criada foi porcamente escrita, mas de toda e qualquer forma serve pra quem não sabe nada de frontend entenda como funcionaria pegar od dados de uma matriz e jogar na DOM

[@developerlage]

Top demais, estou começando os estudos é legal ver algo assim

[@xandigfd]

que extencao e essa que ele usa pra clases e atributos ficarem com cores diferenciadas o meu fica mo esquisitao

[@carlosmichelldasilvamoura302]

o meu ta dando erro na linha que é pra adicionar uma quantidade no carrinho.

[@niltinf]

qual é o tema do vscode??

[@federalfederal4409]

como se chama esse programa q está usando ?

[@brunoramos8057]

gostaria de um contato direto para contratar um serviço! é possível?

[@devv4090]

Alguem consegue me ajudar esta dando esse erro fiz tudo certinho, ja revisei umas 10 vezes e ja fiz dnv 2... index.html:43 Uncaught TypeError: Cannot read property 'innerHTML' of null at index.html:43 at Array.map () at inicializarLoja (index.html:42) at index.html:55

[@diegosilva-kf3ye]

Que tema é esse aí?

[@ianasantos5949]

eu uso o Drácula Refined /Matheus Calegaro mas deve ter o Drácula dark

[@ianasantos5949]

mas se parece muito com o tema que eu uso

[@diegosilva-kf3ye]

@@ianasantos5949 Vlw, acho que é esse mesmo.

[@alexpereiradefranca2727]

Muito bom mesmo Gui tamo junto

[@sofxsolucoes]

oi Professor, eu tive um problema que mesmo colocando return false a função de atualizar carrinho ainda atualiza a página kkkk

[@anacarolinacamargo9695]

o meu tambem ta dando o mesmo problema

[@sofxsolucoes]

Acho que pra nós isso ficará assim mesmo kkk.

[@JoaoPedro-gb2zf]

O meu tbm kkkkk

[@FabioSouttoDev]

Coloquem uma # dentro do link, ao invés de deixar o link vazio. procurem a linha: Adicionar ao carrinho! ali no href, coloquem uma # enjoy guys!

[@heyjupper]

Tem repositório no github?

[@and7231]

Guilherme, você poderia mutar o som do teclado ao digitar algum código.

[@tizuyu647]

que nada, é gostosinho de ouvir barulho de teclado