├── aula ├── aula.css ├── aula.html ├── aula_js.html ├── aula_dom.js └── aula.js ├── src ├── assets │ ├── +.png │ ├── -.png │ ├── lixo.png │ ├── banner.png │ ├── bk_mix.png │ ├── sacola.png │ ├── shake.png │ ├── Logos 1.png │ ├── bk_logo.png │ ├── cheddar.png │ ├── mix_oreo.png │ ├── sorvete.png │ ├── bk_chicken.png │ ├── hamburguer.png │ ├── onion_rings.png │ ├── cheddar_duplo.png │ ├── combo_whopper.png │ ├── whopper_rodeio.png │ └── Projeto BKB Code 1.png ├── js │ ├── produtos.js │ └── script.js └── css │ ├── bk_totem.css │ ├── reset.css │ └── style.css ├── bk_totem.html ├── README.md └── index.html /aula/aula.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/+.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/+.png -------------------------------------------------------------------------------- /src/assets/-.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/-.png -------------------------------------------------------------------------------- /src/assets/lixo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/lixo.png -------------------------------------------------------------------------------- /src/assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/banner.png -------------------------------------------------------------------------------- /src/assets/bk_mix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/bk_mix.png -------------------------------------------------------------------------------- /src/assets/sacola.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/sacola.png -------------------------------------------------------------------------------- /src/assets/shake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/shake.png -------------------------------------------------------------------------------- /src/assets/Logos 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/Logos 1.png -------------------------------------------------------------------------------- /src/assets/bk_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/bk_logo.png -------------------------------------------------------------------------------- /src/assets/cheddar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/cheddar.png -------------------------------------------------------------------------------- /src/assets/mix_oreo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/mix_oreo.png -------------------------------------------------------------------------------- /src/assets/sorvete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/sorvete.png -------------------------------------------------------------------------------- /src/assets/bk_chicken.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/bk_chicken.png -------------------------------------------------------------------------------- /src/assets/hamburguer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/hamburguer.png -------------------------------------------------------------------------------- /src/assets/onion_rings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/onion_rings.png -------------------------------------------------------------------------------- /src/assets/cheddar_duplo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/cheddar_duplo.png -------------------------------------------------------------------------------- /src/assets/combo_whopper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/combo_whopper.png -------------------------------------------------------------------------------- /src/assets/whopper_rodeio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/whopper_rodeio.png -------------------------------------------------------------------------------- /src/assets/Projeto BKB Code 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/projetobkdev/HEAD/src/assets/Projeto BKB Code 1.png -------------------------------------------------------------------------------- /src/js/produtos.js: -------------------------------------------------------------------------------- 1 | const produtos = [ 2 | { 3 | id:0, 4 | nome: "Combo Whopper", 5 | preco: 32.90, 6 | image: "./src/assets/combo_whopper.png" 7 | }, 8 | { 9 | id:1, 10 | nome: "BK Chicken", 11 | preco: 16.90, 12 | image: "./src/assets/bk_chicken.png" 13 | }, 14 | { 15 | id:2, 16 | nome: "Sorvete", 17 | preco: 9.80, 18 | image: "./src/assets/sorvete.png" 19 | }, 20 | { 21 | id:3, 22 | nome: "Cheddar Duplo", 23 | preco: 13.90, 24 | image: "./src/assets/cheddar_duplo.png" 25 | }, 26 | { 27 | id:4, 28 | nome: "Combo Whopper Rodeio", 29 | preco: 38.90, 30 | image: "./src/assets/whopper_rodeio.png" 31 | }, 32 | 33 | ] -------------------------------------------------------------------------------- /bk_totem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Live - BKB + Kenzie 13 | 14 | 15 |
16 |
17 | Projeto BKB Code Logo 18 | Logo BKB + Kenzie 19 |
20 |
21 | 22 |
23 | BK Logo Hamburguer 24 | 25 |
26 |

Kenzie

27 |

Qual é a boa de hoje?

28 |
29 | 30 |
31 |
32 | Imagem de um Hamburguer 33 |

Retirar e comer

34 |
35 |
36 | Imagem de uma sacola com um copo para viagem 37 |

Levar para viagem

38 |
39 |
40 |
41 | 42 | -------------------------------------------------------------------------------- /aula/aula.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Aula HTML 7 | 8 | 9 | 10 |
Cabeçalho
11 | 12 | 13 |
14 | Parte Principal do documento 15 | 16 | 17 | 18 |
Seção
19 | 20 | 21 |
22 | 23 |

H1

24 |

H2

25 |

H3

26 |

H4

27 |
H5
28 |
H6
29 |
30 | 31 | 32 | 33 |

Hello, world!

34 | 35 | 36 | 37 |

Estou com fome!

38 | 39 | 40 | 41 |
    42 |
  1. HTML
    2. 43 |
  2. CSS
    3. 44 |
  3. JS
    4. 45 |
  4. DOM
    5. 46 |
47 | 48 | 49 | 54 | 55 | 56 | Site Kenzie 57 | 58 | 59 | combo whopper 60 | 61 |
62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /src/css/bk_totem.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F5F3F0; 3 | font-family: 'Nunito', sans-serif; 4 | 5 | } 6 | 7 | /* CABEÇALHO */ 8 | 9 | .cabecalho { 10 | border-bottom: 1px solid #DB3B1D; 11 | } 12 | 13 | .cabecalho .container{ 14 | display: flex; 15 | justify-content: space-between; 16 | 17 | } 18 | .container { 19 | max-width: 1330px; 20 | margin: 0 auto; 21 | padding: 20px 60px; 22 | } 23 | 24 | /* PARTE PRINCIPAL */ 25 | /* TÍTULO */ 26 | #container_principal { 27 | display: flex; 28 | flex-direction: column; 29 | justify-content: center; 30 | align-items: center; 31 | padding: 30px 0; 32 | } 33 | 34 | #container_principal > img { 35 | width: 110px; 36 | margin-bottom: 10px; 37 | } 38 | 39 | #container_titulo { 40 | color: #502314; 41 | display: flex; 42 | flex-direction: column; 43 | align-items: center; 44 | margin: 20px 0; 45 | } 46 | 47 | #container_titulo > h1 { 48 | font-weight: 600; 49 | font-size: 50px; 50 | margin-bottom: 15px; 51 | } 52 | 53 | #container_titulo > p { 54 | font-weight: 200; 55 | font-size: 30px; 56 | } 57 | 58 | /* SECTION OPÇÕES */ 59 | #section_opcoes { 60 | display: flex; 61 | } 62 | 63 | #section_opcoes > div { 64 | border: 3px solid #DB3B1D; 65 | border-radius: 8px; 66 | margin: 15px; 67 | height: 300px; 68 | width: 230px; 69 | display: flex; 70 | flex-direction: column; 71 | align-items: center; 72 | justify-content: center; 73 | } 74 | 75 | #section_opcoes > div > img { 76 | width: 100px; 77 | margin-bottom: 15px; 78 | } 79 | 80 | #section_opcoes > div > p { 81 | color: #DB3B1D; 82 | font-style: italic; 83 | font-weight: 200; 84 | font-size: 25px; 85 | width: 130px; 86 | text-align: center; 87 | line-height: 30px; 88 | } -------------------------------------------------------------------------------- /aula/aula_js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Lista pessoas

15 | 16 | 17 | 18 | 23 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /aula/aula_dom.js: -------------------------------------------------------------------------------- 1 | const listaProfessores = [ 2 | { 3 | nome:"Hudson", 4 | cargo:"professor", 5 | }, 6 | { 7 | nome:"Maria", 8 | cargo:"professora", 9 | }, 10 | { 11 | nome:"Amanda", 12 | cargo:"professora", 13 | }, 14 | { 15 | nome:"Luciano", 16 | cargo:"professor", 17 | }, 18 | { 19 | nome:"Nicholas", 20 | cargo:"professor", 21 | }, 22 | { 23 | nome:"Lorena", 24 | cargo:"professora", 25 | }, 26 | { 27 | nome:"Luiz", 28 | cargo:"professor", 29 | }, 30 | ] 31 | 32 | //SELECIOANDO TAG UL DO HTML 33 | const tagUl = document.querySelector("ul") 34 | 35 | //FUNÇÃO CRIAR UM ITEM DA LISTA 36 | function criarItemLista(nome, cargo){ 37 | 38 | 39 | 40 | //CRIANDO UM LI 41 | const tagLi = document.createElement("li") 42 | 43 | //ALIMENTANDO LI COM MAIS ELEMENTOS 44 | tagLi.innerHTML = ` 45 |

${nome}

46 |

${cargo}

47 | 48 |
49 | ` 50 | 51 | //PENDURANDO COMO FILHA DA LISTA NO HTML 52 | tagUl.appendChild(tagLi) 53 | 54 | } 55 | 56 | 57 | for(let i = 0; i< listaProfessores.length; i++){ 58 | 59 | const pessoa = listaProfessores[i] 60 | 61 | //CHAMANDO A FUNÇÃO 62 | criarItemLista(pessoa.nome, pessoa.cargo) 63 | } 64 | 65 | 66 | //REMOÇÃO 67 | 68 | //ADICIONANDO INTERCEPTADOR NA LISTA (CLICK) 69 | tagUl.addEventListener("click", removerProfessor) 70 | 71 | //FUNÇÃO PARA REMOVER 72 | function removerProfessor(event){ 73 | 74 | //RECUPERANDO ELEMENTO CLICADO 75 | const botao = event.target 76 | 77 | //VERIFICANDO SE É UM BOTÃO 78 | if(botao.tagName == "BUTTON"){ 79 | 80 | //RECUPERANDO O ELEMENTO PAI => BOTÃO 81 | botao.parentElement.remove() 82 | } 83 | 84 | 85 | } 86 | -------------------------------------------------------------------------------- /src/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, 7 | body, 8 | div, 9 | span, 10 | applet, 11 | object, 12 | iframe, 13 | h1, 14 | h2, 15 | h3, 16 | h4, 17 | h5, 18 | h6, 19 | p, 20 | blockquote, 21 | pre, 22 | a, 23 | abbr, 24 | acronym, 25 | address, 26 | big, 27 | cite, 28 | code, 29 | del, 30 | dfn, 31 | em, 32 | img, 33 | ins, 34 | kbd, 35 | q, 36 | s, 37 | samp, 38 | small, 39 | strike, 40 | strong, 41 | sub, 42 | sup, 43 | tt, 44 | var, 45 | b, 46 | u, 47 | i, 48 | center, 49 | dl, 50 | dt, 51 | dd, 52 | ol, 53 | ul, 54 | li, 55 | fieldset, 56 | form, 57 | label, 58 | legend, 59 | table, 60 | caption, 61 | tbody, 62 | tfoot, 63 | thead, 64 | tr, 65 | th, 66 | td, 67 | article, 68 | aside, 69 | canvas, 70 | details, 71 | embed, 72 | figure, 73 | figcaption, 74 | footer, 75 | header, 76 | hgroup, 77 | menu, 78 | nav, 79 | output, 80 | ruby, 81 | section, 82 | summary, 83 | time, 84 | mark, 85 | audio, 86 | video { 87 | margin: 0; 88 | padding: 0; 89 | border: 0; 90 | font-size: 100%; 91 | font: inherit; 92 | vertical-align: baseline; 93 | box-sizing: border-box; 94 | } 95 | /* HTML5 display-role reset for older browsers */ 96 | article, 97 | aside, 98 | details, 99 | figcaption, 100 | figure, 101 | footer, 102 | header, 103 | hgroup, 104 | menu, 105 | nav, 106 | section { 107 | display: block; 108 | box-sizing: border-box; 109 | } 110 | body { 111 | line-height: 1; 112 | } 113 | ol, 114 | ul { 115 | list-style: none; 116 | } 117 | blockquote, 118 | q { 119 | quotes: none; 120 | } 121 | blockquote:before, 122 | blockquote:after, 123 | q:before, 124 | q:after { 125 | content: ''; 126 | content: none; 127 | } 128 | table { 129 | border-collapse: collapse; 130 | border-spacing: 0; 131 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Projeto BK 2 | 3 | Projeto desenvolvido para o evento Projeto Burger Kingministrado pelos instrutores da Kenzie Academy Brasil em parceria com o Burger King. 4 | 5 | [Inscreva-se agora para a próxima turma da Kenzie](https://eventos.kenzie.com.br/89Tt) 6 | 7 | ## Ferramentas 8 | 9 | 1. [Instalação do VS Code no Windows](https://kenzie.com.br/blog/instalacao-vs-code-windows/) 10 | 2. [Como utilizar o codepen e o VSCode](https://kenzie-academy-brasil.github.io/ferramentas/) 11 | 12 | ## Checkpoints aulas 13 | 14 | 1. [Aula 1: Introdução ao HTML e estruturação do projeto](https://kenzieacademybr.notion.site/Checkpoint-603966060b18408b9a94e08029552dbc) 15 | 2. [Aula 2: Introdução ao CSS e estilização do projeto](https://kenzieacademybr.notion.site/Checkpoint-CSS-25ff90c91bbf469f992d4eb78676b22e) 16 | 17 | ## O projeto 18 | 19 | ### Estrutura de arquivos 20 | 21 | - README.md 22 | - index.html 23 | - /src 24 | - /assets 25 | - /css 26 | - reset.css 27 | - style.css 28 | - /js 29 | - script.js 30 | 31 | ### Fontes 32 | 33 | - 'Nunito', serif; 34 | - 'Montserrat Alternates', sans-serif; 35 | 36 | ### Cores 37 | 38 | - Background principal: #E5E5E5; 39 | - Background secundário: #F5F3F0; 40 | - Branco: #FFFFFF; 41 | - Marrom: #502314; 42 | - Vermelho: #DB3B1D; 43 | - Laranja: #FF8627 44 | - Cinza escuro: #2D2D2D; 45 | - Preto: #000000; 46 | 47 | 48 | ## Layout 49 | 50 | - [Projeto BK](https://www.figma.com/file/I8rA1tARRI6DPGsVk8hxDi/%F0%9F%8D%94-Evento-Kenzie-%2B-Burguer-King?node-id=0%3A1); 51 | 52 | 53 | ## LinkedIn dos Instrutores 54 | - [Instagram Hudson](https://www.instagram.com/hudsoncarolino/) 55 | - [Hudson Carolino](https://www.linkedin.com/in/hudsoncarolino/) 56 | - [Maria Ferrari](https://www.linkedin.com/in/maria-aparecida-guedes-ferrari/) 57 | 58 | ## Referências 59 | 60 | - [W3Schools referência HTML](https://www.w3schools.com/tags/default.asp); 61 | - [W3Schools referência CSS](https://www.w3schools.com/cssref/default.asp); 62 | - [Google Fonts](https://fonts.google.com/); 63 | - [Coolors](https://coolors.co/palettes/trending); 64 | - [Paletton](https://paletton.com/); 65 | - [W3Schools propriedades CSS no DOM](https://www.w3schools.com/jsref/dom_obj_style.asp); 66 | - [MDN lista de eventos](https://developer.mozilla.org/en-US/docs/Web/Events); 67 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Projeto BKB 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 | Logo BKB + Kenzie 25 |
26 | 27 |
28 | 29 |
30 | 31 | 32 | 35 | 36 | 37 |
38 | 39 |
40 | 41 |
    42 | 43 |
    44 | 45 |
    46 | 47 |
    48 | 49 | 50 | 88 | 89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color:#F5F3F0; 3 | font-family: 'Nunito', sans-serif; 4 | } 5 | 6 | .container{ 7 | max-width: 1330px; 8 | margin: 0 auto; 9 | padding:30px; 10 | } 11 | 12 | /* APLICANDO ESTILO NO CABEÇALHO */ 13 | .cabecalho .container{ 14 | display: flex; 15 | justify-content: space-between; 16 | } 17 | 18 | /* APLICANDO ESTILO NA IMAGEM DO BANNER */ 19 | .banner img{ 20 | width: 100%; 21 | } 22 | 23 | /* APLICANDO ESTILO NA SEÇÃO DE PRODUTOS */ 24 | .secaoProdutos{ 25 | padding-top: 74px; 26 | } 27 | .secaoProdutos .produtosLista{ 28 | display: flex; 29 | flex-wrap: wrap; 30 | justify-content: space-between; 31 | } 32 | .secaoProdutos .cardProduto{ 33 | background-color: #fff; 34 | width: 233px; 35 | text-align: center; 36 | padding: 22px 28px; 37 | border: 2px solid #F5EBDC; 38 | border-radius: 15px; 39 | margin-bottom: 15px; 40 | } 41 | .secaoProdutos .cardProduto img{} 42 | .secaoProdutos .cardProduto h3{ 43 | color: #502314; 44 | font-size:20px; 45 | font-weight: 700; 46 | margin:28px auto; 47 | min-height: 40px; 48 | max-width: 160px; 49 | } 50 | .secaoProdutos .cardProduto p{ 51 | color: black; 52 | font-size: 18px; 53 | font-weight: 700; 54 | margin-bottom: 28px; 55 | } 56 | .secaoProdutos .cardProduto button{ 57 | background: #F5F3F0; 58 | border:none; 59 | border-radius: 8px; 60 | width: 177px; 61 | height: 41px; 62 | color: #2D2D2D; 63 | font-weight: 500; 64 | font-size: 18px; 65 | cursor: pointer; 66 | font-family: 'Nunito', sans-serif; 67 | } 68 | 69 | /* RODAPÉ */ 70 | .carrinho .infoResumo{ 71 | background: #502314; 72 | border-radius: 32px 32px 0px 0px; 73 | padding: 23px 0; 74 | } 75 | .carrinho .container{ 76 | display: flex; 77 | justify-content: space-between; 78 | } 79 | .carrinho { 80 | background-color: #fff; 81 | } 82 | .carrinho .infoUsuario h3{ 83 | font-weight: 500; 84 | font-size: 32px; 85 | color: #F7F5F0; 86 | margin-bottom: 18px; 87 | } 88 | .carrinho .infoUsuario p{ 89 | font-style: italic; 90 | font-weight: 200; 91 | font-size: 22px; 92 | line-height: 30px; 93 | color: #F7F5F0; 94 | } 95 | .carrinho .infoResumo .infoPreco{ 96 | font-weight: 400; 97 | font-size: 32px; 98 | line-height: 44px; 99 | color: #F7F5F0; 100 | } 101 | 102 | .carrinho .resumoPedido{ 103 | width: 80%; 104 | } 105 | .carrinho .resumoPedido .listaProdutos{} 106 | .carrinho .resumoPedido .cardProduto{ 107 | background: #F5F3F0; 108 | border-radius: 15px; 109 | display: flex; 110 | justify-content: space-between; 111 | align-items: center; 112 | padding:0 30px; 113 | } 114 | 115 | .carrinho .resumoPedido .cardProduto .infoNome{ 116 | display: flex; 117 | justify-content: space-between; 118 | align-items: center; 119 | } 120 | .carrinho .resumoPedido .cardProduto .infoNome img{ 121 | width: 150px; 122 | } 123 | .carrinho .resumoPedido .cardProduto .infoNome p{ 124 | font-weight: 700; 125 | font-size: 22px; 126 | color: #502314; 127 | margin-left: 30px; 128 | } 129 | 130 | .carrinho .resumoPedido .cardProduto .infoPreco{ 131 | display: flex; 132 | justify-content: space-between; 133 | align-items: center; 134 | } 135 | .carrinho .resumoPedido .cardProduto .infoPreco p{ 136 | font-style: italic; 137 | font-weight: 200; 138 | font-size: 24px; 139 | color: #2D2D2D; 140 | } 141 | .carrinho .resumoPedido .cardProduto .infoPreco img{ 142 | width: 14px; 143 | } 144 | .carrinho .resumoPedido .cardProduto .infoPreco button{ 145 | background: #E6E6E6; 146 | border-radius: 4px; 147 | border: none; 148 | display: flex; 149 | justify-content: center; 150 | align-items: center; 151 | width: 60px; 152 | height: 51px; 153 | margin-left: 43px; 154 | cursor: pointer; 155 | } 156 | 157 | .btnFinalizaPedido{ 158 | width: 20%; 159 | } 160 | .btnFinalizaPedido button{ 161 | width: 219px; 162 | height: 51px; 163 | background: #DB3B1D; 164 | border: 4px solid #DB3B1D; 165 | border-radius: 10px; 166 | text-align: center; 167 | font-weight: 400; 168 | font-size: 22px; 169 | color: #FFFFFF; 170 | cursor: pointer; 171 | margin-bottom: 18px; 172 | } 173 | .btnFinalizaPedido button ~ button{ 174 | background: #fff; 175 | border: 4px solid #DB3B1D; 176 | color:#DB3B1D; 177 | } 178 | 179 | -------------------------------------------------------------------------------- /src/js/script.js: -------------------------------------------------------------------------------- 1 | //SELECIONANDO A LISTA PARA ADICIONAR OS PRODUTOS 2 | const produtosLista = document.querySelector(".produtosLista") 3 | const listaProdutos = document.querySelector(".listaProdutos") 4 | 5 | //0) CRIAR UM FUNÇÃO (CARDPRODUTO) => PROUTO COMO PARAMETRO 6 | function criarcardProduto(produto){ 7 | 8 | //1) TAG HTML (LI) 9 | const tagLi = document.createElement("li") 10 | 11 | //2) ADICIONAR UMA CLASSE NA TAG LI (cardProduto) 12 | tagLi.classList.add("cardProduto") 13 | 14 | //3) ALIMENTAR ESSA TAG COM OS OUTROS ELEMENTOS: 15 | //4) ALIMENTAR COM INFORMAÇÕES DOS PRODUTOS 16 | tagLi.innerHTML = ` 17 | ${produto.nome} 18 |

    ${produto.nome}

    19 |

    R$ ${produto.preco}

    20 | 21 | ` 22 | return tagLi 23 | } 24 | 25 | function listarProdutos(listaProdutos){ 26 | 27 | //3) LOOP PARA RECUPERAR CADA PRODUTO 28 | for(let i = 0; i NA TELA => COMO FILHO DA TAG UL 36 | produtosLista.appendChild(cardMontado) 37 | 38 | } 39 | 40 | } 41 | listarProdutos(produtos) 42 | 43 | //CRRINHO DE COMPRAS 44 | let carrinho = [] 45 | 46 | //ADICIONANDO INTERCEPTADOR NA LISTA DE PRODUTOS 47 | produtosLista.addEventListener("click", adicionarProdutoCarrinho) 48 | function adicionarProdutoCarrinho(event){ 49 | 50 | //IDENTIFICANDO ELEMENTO CLICADO 51 | const botao = event.target 52 | 53 | //VERIFICANDO SE É UM BOTÃO 54 | if(botao.tagName == "BUTTON"){ 55 | 56 | //RECUPERANDO ID => IDENTIFICADO DO PRODUTO 57 | const idProduto = botao.id 58 | 59 | //PESQUISAR SE ESSE PRODUTO É EXISTENTE => BASE 60 | //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find 61 | const produtoFiltrado = produtos.find((produto)=> produto.id == idProduto) 62 | 63 | //ADICIONANDO PRODUTO NO CARRINHO 64 | carrinho.push(produtoFiltrado) 65 | 66 | //LISTAR NA TELA DOS PRODUTOS 67 | listarProdutosCarrinho() 68 | 69 | //FUNÇÕES QUE ATUALIZA TOTAL 70 | atualizarTotal() 71 | } 72 | 73 | } 74 | 75 | //LISTAR PRODUTOS DO CARRINHO 76 | function listarProdutosCarrinho(){ 77 | 78 | listaProdutos.innerHTML = "" 79 | 80 | //PERCORRENDO PRODUTOS DO CARRINHO 81 | for(let i = 0; i 92 |
    93 | ${produto.nome} 94 |

    ${produto.nome}

    95 |
    96 | 97 | 98 |
    99 |

    R$ ${produto.preco.toFixed(2)}

    100 | 103 |
    104 | ` 105 | listaProdutos.appendChild(tagLi) 106 | 107 | } 108 | 109 | } 110 | 111 | //ATUALIZAR TOTAL CARRINHO 112 | function atualizarTotal(){ 113 | 114 | const infoPreco = document.querySelector(".infoPreco") 115 | 116 | let total = 0 117 | for(let i = 0; i < carrinho.length; i++){ 118 | 119 | const produto = carrinho[i] 120 | 121 | total += produto.preco 122 | } 123 | infoPreco.innerText = `Total: R$ ${total.toFixed(2)}` 124 | 125 | } 126 | 127 | const listaProdutosCarrinho = document.querySelector(".listaProdutos") 128 | listaProdutosCarrinho.addEventListener("click", removerProdutoCarrinho) 129 | 130 | function removerProdutoCarrinho(event){ 131 | const botaoExcluir = event.target 132 | 133 | if(botaoExcluir.tagName == "BUTTON"){ 134 | 135 | //REMOVENDO APENAS NO HTML 136 | //https://developer.mozilla.org/en-US/docs/Web/API/Element/closest 137 | botaoExcluir.closest("li").remove() 138 | 139 | //produto <= FILTRO COM O FIND 140 | //posicao numerica <= carrinho.INDEXOF(produto) 141 | //carrinho.SPLICE(posicao, 1) 142 | } 143 | } 144 | 145 | -------------------------------------------------------------------------------- /aula/aula.js: -------------------------------------------------------------------------------- 1 | //console.log("Hello World!") 2 | 3 | 4 | 5 | 6 | let fruta = "Maçã" 7 | fruta = "Morango" 8 | 9 | //console.log(fruta) 10 | 11 | const ano = 2023 12 | 13 | let texto = "Hudson Carolino" 14 | 15 | 16 | 17 | 18 | 19 | 20 | //console.log(ano) 21 | 22 | // Tipos de Dados 23 | 24 | // String 25 | let dataDeHoje = "25 de Maio de 2022" 26 | 27 | // Number 28 | let dia = 25 29 | 30 | // Booleano ou Boolean => true ou false 31 | let inverno = false 32 | let outono = true 33 | 34 | // Array (Lista) 35 | let novoArray = [1, "oi", true, false, 29, "bolo"] 36 | //console.log(novoArray[5]) 37 | 38 | novoArray.push("refrigerante") 39 | //console.log(novoArray) 40 | 41 | 42 | // Objeto 43 | // nome 44 | // idade 45 | // cidade 46 | 47 | let pessoa = { 48 | nome: "Maria", 49 | idade: 29, 50 | cidade: "Manaus-Am" 51 | } 52 | 53 | pessoa.comida = "Sorvete de Chiclete" 54 | 55 | //console.log(pessoa) 56 | 57 | 58 | // Operadores Lógicos 59 | /* 60 | === Idêntico ou Extritamente Igual => verifica se os valores são iguais e do mesmo tipo. 61 | */ 62 | 63 | let numeroUm = 20 64 | let numeroDois = 20 65 | let numeroTres = "20" 66 | let numeroQuatro = 37 67 | 68 | //console.log(numeroUm === numeroDois) // true 69 | //console.log(numeroUm === numeroTres) // false 70 | 71 | /* 72 | == Igualdade => avalia se os valores são iguais, independente do tipo de dado. 73 | */ 74 | 75 | //console.log(numeroUm == numeroTres) // true 76 | //console.log(numeroUm == numeroDois) // true 77 | 78 | /* 79 | != Diferente => avalia se os valores são diferentes, independente do tipo de dado 80 | */ 81 | 82 | //console.log(numeroUm != numeroDois) //false 83 | //console.log(numeroUm != numeroQuatro) //true 84 | 85 | 86 | /* 87 | !== Não Idêntico => avalia se os valores E os tipos são diferentes. 88 | */ 89 | 90 | let numeroCinco = "29" 91 | let numeroSeis = 32 92 | 93 | //console.log(numeroCinco !== numeroSeis) 94 | 95 | /* 96 | < Menor que 97 | > Maior que 98 | <= Menor ou igual 99 | >= Maior ou igual 100 | */ 101 | 102 | let umEhMenorQueZero = 1 < 0 103 | //console.log(umEhMenorQueZero) 104 | 105 | let doisEhMaiorQueUm = 2 > 1 106 | //console.log(doisEhMaiorQueUm) 107 | 108 | let tresEhMaiorOuIgualAQuatro = (3 >= 4) 109 | //console.log(tresEhMaiorOuIgualAQuatro) 110 | 111 | //console.log(3 <= 4) 112 | 113 | //TABELA VERDADE DO E / operador lógico => && 114 | /* 115 | TRUE && TRUE => TRUE 116 | TRUE && FALSE => FALSE 117 | FALSE && TRUE => FALSE 118 | FALSE && FALSE => FALSE 119 | */ 120 | 121 | //Expressões 122 | let textoUm = "Hoje está frio" //false 123 | let textoDois = "Hoje é dia 25" //true 124 | 125 | //console.log(true && true) 126 | 127 | //TABELA VERDADE DO OU / operador lógico => || 128 | /* 129 | TRUE || TRUE => TRUE 130 | TRUE || FALSE => TRUE 131 | FALSE || TRUE => TRUE 132 | FALSE || FALSE => FALSE 133 | */ 134 | 135 | let taChuvendo = false 136 | let taQuente = false 137 | 138 | //console.log(taChuvendo || taQuente) 139 | 140 | let tem_carteira_de_motorista = true 141 | let tem_dezoito_anos = true 142 | 143 | let pode_dirigir = tem_carteira_de_motorista && tem_dezoito_anos 144 | //console.log(pode_dirigir) 145 | //console.log(taChuvendo || taQuente) 146 | 147 | 148 | 149 | //CONDICIONAIS (IF/ELSE) 150 | 151 | 152 | //SE (IDADE >= 18) MAIOR IDADE 153 | //SENÃO MENOR IDADE 154 | 155 | 156 | const professorLive = "Hudson" 157 | const professoraLive = "Maria" 158 | 159 | //SE TRUE && TRUE 160 | if(professorLive == "Hudson" && professoraLive == "Maria"){ 161 | 162 | //console.log("Hoje tem aula!") 163 | //console.log("Notificar alunos por email") 164 | 165 | //SENÃO 166 | }else{ 167 | 168 | //console.log("Hoje não tem aula!") 169 | //console.log("Não notificar alunos por email") 170 | 171 | } 172 | 173 | 174 | 175 | //FUNÇÕES 176 | //NOME * 177 | //PARAMETROS * 178 | //INSTRUÇÕES * 179 | //RETORNAR OU NÃO * 180 | //CHAMAR * 181 | 182 | //DECLARAÇÃO/PARAMETRO 183 | function verificarMaiorIdade(idade){ 184 | 185 | //INSTRUÇÕES 186 | if(idade >= 18){ 187 | 188 | return true 189 | 190 | }else{ 191 | 192 | return false 193 | 194 | } 195 | 196 | } 197 | 198 | //CHAMADA DA FUNÇÃO 199 | //const restornoFuncao = verificarMaiorIdade(17) 200 | 201 | //console.log(restornoFuncao) 202 | 203 | function login(usuario, senha){ 204 | 205 | if(usuario == "Hudson" && senha == "123"){ 206 | console.log("Sucesso") 207 | }else{ 208 | console.log("Login invalido") 209 | } 210 | 211 | 212 | } 213 | //login("Hudson", 123) 214 | 215 | 216 | 217 | //LAÇO DE REPETIÇÃO => LOOPS 218 | 219 | 220 | 221 | //let contador = 1 222 | 223 | //ENQUANTO 224 | // while(contador <= 10){ 225 | 226 | // console.log(contador) 227 | // contador += 1 228 | // } 229 | 230 | //PARA 231 | //for(variavelControle; condiçãoParada; incremento) 232 | // for(let contador = 0; contador <= 10; contador += 1){ 233 | 234 | // console.log(contador) 235 | // } 236 | 237 | 238 | 239 | 240 | 241 | const listaCertificado = ["Maria","Hudson","Desibaaa","Simone","Edson","Mah","Lucas Costa", "Wagner", "Rafael", "Moises", "Lidia"] 242 | 243 | //console.log(listaCertificado) 244 | 245 | for(let i = 0; i < listaCertificado.length; i+=1){ 246 | 247 | //console.log(listaCertificado[i]) 248 | 249 | } 250 | 251 | 252 | 253 | 254 | 255 | // const arrayPessoas = [ 256 | // { 257 | // nome: "Hudson", 258 | // idade:26, 259 | // cidade:"Curitiba" 260 | // }, 261 | 262 | // { 263 | // nome: "Maria", 264 | // idade:26, 265 | // cidade:"Curitiba" 266 | // }, 267 | // { 268 | // nome: "Daniel", 269 | // idade:26, 270 | // cidade:"São Paulo" 271 | // }, 272 | // ] 273 | 274 | 275 | 276 | // console.log(arrayPessoas) 277 | 278 | 279 | // function verificaNome(nome){ 280 | 281 | // console.log(nome) 282 | // } 283 | 284 | // verificaNome("Hudson") 285 | --------------------------------------------------------------------------------