Ol\u00e1 Pessoal! <\/p>\n\n\n\n
Na Live do dia 26\/10\/2024 trabalhamos com Mini Projeto com JavaScript.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"pt-br\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Montar Seu Hamb\u00farguer<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n \n <div class=\"container\">\n <h1>Monte Seu Hamb\u00farguer<\/h1>\n <button onclick=\"montarHamburguer()\">Adicionar Ingredientes<\/button>\n <p id=\"pedido\">Seu Hamb\u00farguer: <\/p>\n <\/div>\n\n\n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n\n\nCSS\n\n*{\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: Arial Black, sans-serif; \n}\nbody{\n background: linear-gradient(145deg, #0c0000, #7d7b7b);\n color: #e0e0e0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n}\n.container{\n background-color: #2e2e2e;\n padding: 30px 50px;\n border-radius: 10px;\n box-shadow: 0px 10px 20px rgba(0,0,0, 0.7);\n text-align: center;\n max-width: 450px;\n border: 2px solid #c60606;\n}\n\nh1{\n color: #f3f351;\n font-size: 2.5rem;\n margin-bottom: 20px;\n text-transform: uppercase;\n letter-spacing: 3px;\n}\n\nbutton{\n background: linear-gradient(145deg, #40403e, #250e1b);\n color: #fff;\n padding: 12px 24px;\n border: 2px solid #c60606;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1.2rem;\n font-weight: bold;\n text-transform: uppercase;\n transition: transform 0.3s ease, background 0.3s ease;\n margin-top: 20px;\n box-shadow: 0px 4px 8px rgba(228, 189, 208, 0.3);\n}\n\nbutton:hover{\n background: #c60606;\n transform: scale(1.1);\n}\n\n#pedido{\n font-size: 1.1rem;\n color: #ddd;\n margin-top: 25px;\n padding: 20px;\n background-color: #3c3c3c;\n border-radius: 5px;\n border: 1px solid #c60606;\n box-shadow: inset 0px 0px 5px rgba(0,0,0, 0.5 );\n}\n\n\n\n\nJAVASCRIPT\n\n\nfunction montarHamburguer(){\n\n let hamburguer = [];\n let continuar = true;\n\n\n while(continuar){\n\n const escolha = Number( prompt(\"Escolha um ingrediente:\\n1. P\u00e3o\\n\"+\n \"2. Carne\\n3. Queijo\\n4. Alface e Tomate\\n5. Finalizar pedido\"));\n \n switch(escolha){\n case 1:\n hamburguer.push(\"P\u00e3o\");\n alert(\"P\u00e3o adicionado!\");\n break;\n\n case 2:\n hamburguer.push(\"Carne\");\n alert(\"Carne adicionada!\");\n break;\n\n case 3:\n hamburguer.push(\"Queijo\");\n alert(\"Queijo adicionado!\");\n break;\n\n case 4:\n hamburguer.push(\"Alface e Tomate\");\n alert(\"Alface e Tomate adicionados!\");\n break;\n\n case 5:\n alert(\"Seu pedido est\u00e1 pronto!\");\n document.getElementById('pedido').textContent =\n \"Seu hamb\u00farguer est\u00e1 pronto com os seguintes ingredientes: \"\n + hamburguer.join(\", \");\n continuar = false; \n break;\n\n default:\n alert(\"Op\u00e7\u00e3o inv\u00e1lida, tente novamente.\");\n break;\n }\n \n }\n}<\/code><\/pre>\n\n\n\n