├── LICENSE ├── README.md ├── assets ├── controller │ └── js │ │ ├── cadastroSubmitController.js │ │ ├── cepController.js │ │ ├── inputBorderController.js │ │ ├── inputTamanhoController.js │ │ └── msgController.js ├── models │ └── js │ │ ├── cepModel.js │ │ ├── emailModel.js │ │ └── senhaModel.js └── view │ ├── css │ └── style.css │ ├── html │ ├── Cadastro.html │ ├── Login.html │ ├── RecuperacaoSenha.html │ ├── contato.html │ └── produtos.html │ ├── img │ ├── BattlefrontHome.png │ ├── appDevelopment.png │ ├── chrisperfil.jpg │ ├── coding.png │ ├── developer.svg │ ├── hadassaperfil.jpg │ ├── img_logo.png │ ├── onlineEducation.png │ ├── programming.svg │ ├── selected.svg │ ├── teamup.svg │ ├── vitorperfil.jpg │ ├── world.svg │ └── ytalloperfil.jpg │ └── js │ ├── cepView.js │ └── manipuladorDom.js └── index.html /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Ytallo Bruno, Vitor Del' Duca, Hadassa Moraes e Christopher Mamed 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Projeto final do módulo 2: Lançamento de produto - BattleFRONT 💡 2 | 3 |
4 | Sobre   5 | Andamento   6 | Softwares & Ferramentas utilizadas   7 | Habilidades adquiridas   8 | Como contribuir   9 | Autores 10 |
11 | 12 |

Sobre 🔎

13 |

Projeto onde precisamos desenvolver o front-end para apresentar um novo produto lançado pela empresa "FrontEnders", onde poderíamos inventar o produto que quiséssemos, pensando em algo que seria legal para ajudar no dia a dia com programação ou estudos. 14 | Nosso projeto também precisaria estar de acordo com os seguintes requisitos:

15 | 16 | - Possuir home, página de detalhes sobre o serviço, cadastro na lista de espera, contato, log in e recuperação de senha; 17 | - O framework CSS Boostrap deve ser utilizado na elaboração do projeto (versão 4 ou superior); 18 | - A API ViaCEP deve ser utilizada para obter dados referentes aos CEPs utilizados no cadastro; 19 | - Utilizar repositório público no github, com todos os integrantes do grupo como colaboradoradores e disponibilização de uma GithubPage com o projeto; 20 | 21 | imagem da tela do página home do projeto 22 | 23 |
24 | 25 |

Andamento do projeto 📈

26 | 27 | ![Badge](https://img.shields.io/website?down_message=em%20andamento&label=STATUS&style=for-the-badge&up_message=conclu%C3%ADdo&url=https%3A%2F%2Fytallobruno.github.io%2FProjetoFinalModulo2%2F) 28 | 29 |

Softwares & Ferramentas utilizadas nesse projeto 📚

30 | 31 | - [x] HTML5 32 | - [x] CSS3 33 | - [x] Bootstrap 34 | - [x] JavaScript 35 | - [x] JQuery 36 | - [x] API - ViaCEP 37 | - [x] Hoppscotch (para visualização do JSON) 38 | - [x] Git 39 | - [x] Kanban 40 | 41 |

Habilidades Adquiridas 📝

42 | 43 | - Indentação do código 44 | - Tags semânticas (HTML) 45 | - Atributos (HTML) 46 | - Seletores e Combinadores (CSS) 47 | - Pseudo-classes (CSS) 48 | - FlexBox (CSS) 49 | - Responsividade (CSS) 50 | - Utilização de Bootstrap 51 | - Function (JS) 52 | - Condicionais IF, Else (JS) 53 | - Lógica MVC 54 | - Programação Orientada a Objetos (POO) 55 | - JQuery (JS) 56 | - Ajax (JQuery) 57 | - JSON 58 | - Uso da API ViaCEP 59 | - Utilização de metodologias ágeis (Kanban) 60 | 61 |

Como contribuir 📫

62 | 63 | Para contribuir com nosso projeto, siga estas etapas: 64 | >- Bifurque este repositório. 65 | >- Crie um branch: `git checkout -b `. 66 | >- Faça suas alterações e confirme-as: `git commit -m ''` 67 | >- Envie para o branch original: `git push origin / ` 68 | >- Crie a solicitação de pull. 69 | *Consulte a documentação do GitHub em* [como criar uma solicitação pull](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request). 70 | 71 |

Autores 🥇

72 | 73 | - [Christopher Mamed](https://www.linkedin.com/in/christopher-mamed-407485139/) 74 | - [Hadassa Moraes](https://www.linkedin.com/in/hadassa-moraes-5a6712230/) 75 | - [Vitor Del' Duca](https://www.linkedin.com/in/vitor-del-duca-gestao-programacao-treinamento/) 76 | - [Ytallo Bruno](https://linkedin.com/in/ytallobruno) 77 | 78 |
79 | 80 |
81 | ⮝ Voltar ao topo ⮝ 82 |
-------------------------------------------------------------------------------- /assets/controller/js/cadastroSubmitController.js: -------------------------------------------------------------------------------- 1 | class CadastroSubmit extends ControladorDeAlertas{ 2 | 3 | constructor() { 4 | super(); 5 | this.gerenciadorSenha = new GerenciadorDeSenha(); 6 | this.gerenciaEmail = new GerenciadorDeEmail(); 7 | this.gerenciaCep = new GerenciadorDeCep($('#cep').val()); 8 | } 9 | 10 | verificaConfirmacaoSenha(){ 11 | const senha = $('#senha').val(); 12 | const senhaRepeat = $('#senhaRepeat').val(); 13 | const confirmadorSenha = this.gerenciadorSenha.confirma(senha, senhaRepeat); 14 | return confirmadorSenha 15 | } 16 | 17 | verificaConfirmacaoEmail(){ 18 | const email = $('#email').val(); 19 | const confirmadorEmail = this.gerenciaEmail.validaEmail(email); 20 | return confirmadorEmail 21 | } 22 | 23 | verificaConfirmacaoCep(){ 24 | const confirmadorCep = this.gerenciaCep.getCepValidado(); 25 | return confirmadorCep 26 | } 27 | 28 | exibeMensagem(){ 29 | const checkSenha = this.verificaConfirmacaoSenha(); 30 | const checkEmail = this.verificaConfirmacaoEmail(); 31 | const checkCep = this.verificaConfirmacaoCep(); 32 | const checkDados = this.verificaCadastro(); 33 | const confirmador = checkSenha && checkEmail && checkCep; 34 | const verificador = checkDados.indexOf(false) == -1; 35 | this.mostraMensagemIncompleta(verificador, confirmador); 36 | } 37 | } 38 | 39 | 40 | $("#btn-cadastro").on('click', (event) => { 41 | event.preventDefault(); 42 | const cadastroAlertas = new CadastroSubmit(); 43 | cadastroAlertas.exibeMensagem() 44 | }) 45 | 46 | -------------------------------------------------------------------------------- /assets/controller/js/cepController.js: -------------------------------------------------------------------------------- 1 | class ControladorCep { 2 | constructor(cep) { 3 | this.campoCep = $('#cep'); 4 | this.cepView = new VisualizadorCep(this.cep); 5 | this.cep = cep; 6 | this.gerenciaCep = new GerenciadorDeCep(this.cep); 7 | } 8 | 9 | chamaApiCep() { 10 | if (this.gerenciaCep.getCepValidado()) { 11 | this.gerenciaCep.apiCep(); 12 | setTimeout(() => { 13 | this.dadosApi = this.gerenciaCep.getDadosApi(); 14 | this.completaEnderecoForm(); 15 | }, 1000); 16 | } 17 | } 18 | 19 | marcaElemento() { 20 | if (this.gerenciaCep.getCepValidado()) { 21 | this.cepView.mudaClasse(this.campoCep, 'border-success', 'border-danger') 22 | 23 | } else { 24 | this.cepView.mudaClasse(this.campoCep, 'border-danger', 'border-success') 25 | } 26 | } 27 | 28 | completaEnderecoForm() { 29 | this.cepView.renderizaCep(this.dadosApi); 30 | } 31 | 32 | } 33 | 34 | 35 | const btnCep = $('#btn-cep'); 36 | const campoCep = $('#cep'); 37 | 38 | campoCep.on('input', () => { 39 | const controlaCep = new ControladorCep(campoCep.val()); 40 | controlaCep.marcaElemento(); 41 | }); 42 | 43 | btnCep.on('click', (event) => { 44 | event.preventDefault(); 45 | const controlaCep = new ControladorCep(campoCep.val()); 46 | controlaCep.chamaApiCep(); 47 | }); 48 | -------------------------------------------------------------------------------- /assets/controller/js/inputBorderController.js: -------------------------------------------------------------------------------- 1 | class ControladorInput { 2 | 3 | constructor(input, campoInput, confirmadorCampo) { 4 | this.campoInput = campoInput; 5 | this.mudaDom = new ManipuladorDom(); 6 | this.input = input; 7 | this.confirmadorCampo = confirmadorCampo; 8 | } 9 | 10 | marcaElemento() { 11 | if (this.confirmadorCampo) { 12 | this.mudaDom.mudaClasse(this.campoInput, 'border-success', 'border-danger') 13 | 14 | } else { 15 | this.mudaDom.mudaClasse(this.campoInput, 'border-danger', 'border-success') 16 | } 17 | } 18 | 19 | } 20 | 21 | 22 | 23 | 24 | const campoEmail = $('#email'); 25 | const campoSenhaRepeat = $('#senhaRepeat'); 26 | 27 | campoEmail.on('input', () => { 28 | const email = campoEmail.val(); 29 | gerenciadorEmail = new GerenciadorDeEmail(); 30 | confirmadorEmail = gerenciadorEmail.validaEmail(email); 31 | const controlaEmail = new ControladorInput(email, campoEmail, confirmadorEmail); 32 | controlaEmail.marcaElemento(); 33 | }); 34 | 35 | 36 | campoSenhaRepeat.on('input', () => { 37 | const senhaRepeat = campoSenhaRepeat.val(); 38 | const senha = $('#senha').val(); 39 | gerenciadorSenha = new GerenciadorDeSenha(); 40 | confirmadorSenha = gerenciadorSenha.confirma(senha, senhaRepeat); 41 | const controlaSenha = new ControladorInput(senhaRepeat, campoSenhaRepeat, confirmadorSenha); 42 | controlaSenha.marcaElemento(); 43 | }); 44 | 45 | -------------------------------------------------------------------------------- /assets/controller/js/inputTamanhoController.js: -------------------------------------------------------------------------------- 1 | class ControladorTamanhoInput { 2 | 3 | verificaTamEmail(){ 4 | const email = $('#email').val(); 5 | const verificador = email.length != 0; 6 | return verificador; 7 | } 8 | 9 | verificaTamSenha(){ 10 | const senha = $('#senha').val(); 11 | const verificadorSenha = senha.length != 0; 12 | return verificadorSenha; 13 | } 14 | 15 | verificaCadastro(){ 16 | const arrDados =[ 17 | $('#nome').val(), 18 | $('#email').val(), 19 | $('#senha').val(), 20 | $('#senhaRepeat').val(), 21 | $('#rg').val(), 22 | $('#cep').val(), 23 | $('#rua').val(), 24 | $('#estado').val(), 25 | $('#cidade').val(), 26 | $('#numero').val(), 27 | ] 28 | 29 | return arrDados.map(dado => dado.length!=0) 30 | 31 | } 32 | 33 | } 34 | 35 | -------------------------------------------------------------------------------- /assets/controller/js/msgController.js: -------------------------------------------------------------------------------- 1 | class ControladorDeAlertas extends ControladorTamanhoInput{ 2 | 3 | constructor() { 4 | super(); 5 | this.alertaSucesso = $('#msg-sucesso'); 6 | this.alertaErro = $('#msg-erro'); 7 | this.alertaIncompleto = $('#msg-inputVazio'); 8 | this.btn = $('#btn-submit'); 9 | this.escondeAlerta = "hidden"; 10 | this.mudaDom = new ManipuladorDom(); 11 | } 12 | 13 | mostraMensagem(confirmador) { 14 | if (confirmador) { 15 | this.mudaDom.colocaAtributo(this.alertaErro, this.escondeAlerta, true); 16 | this.mudaDom.colocaAtributo(this.alertaIncompleto, this.escondeAlerta,true); 17 | this.mudaDom.removeAtributo(this.alertaSucesso, this.escondeAlerta); 18 | } else { 19 | this.mudaDom.colocaAtributo(this.alertaSucesso, this.escondeAlerta, true); 20 | this.mudaDom.colocaAtributo(this.alertaIncompleto, this.escondeAlerta,true); 21 | this.mudaDom.removeAtributo(this.alertaErro, this.escondeAlerta); 22 | } 23 | } 24 | 25 | mostraMensagemIncompleta(verificador, confirmador){ 26 | if(verificador){ 27 | this.mostraMensagem(confirmador); 28 | }else{ 29 | this.mudaDom.removeAtributo(this.alertaIncompleto, this.escondeAlerta); 30 | this.mudaDom.colocaAtributo(this.alertaErro, this.escondeAlerta, true); 31 | this.mudaDom.colocaAtributo(this.alertaSucesso, this.escondeAlerta,true); 32 | } 33 | } 34 | } 35 | 36 | 37 | 38 | const gerenciaEmail = new GerenciadorDeEmail(); 39 | const controlaAlerta = new ControladorDeAlertas(); 40 | 41 | $("#btn-submit").on('click', (event) => { 42 | event.preventDefault(); 43 | const email = $('#email').val(); 44 | const confirmadorEmail = gerenciaEmail.validaEmail(email); 45 | const verificador = controlaAlerta.verificaTamEmail() && controlaAlerta.verificaTamSenha(); 46 | controlaAlerta.mostraMensagemIncompleta(verificador, confirmadorEmail); 47 | }) 48 | 49 | $("#btn-recuperacaoSenha").on('click', (event) => { 50 | event.preventDefault(); 51 | const email = $('#email').val(); 52 | const confirmadorEmail = gerenciaEmail.validaEmail(email); 53 | const verificador = controlaAlerta.verificaTamEmail(); 54 | controlaAlerta.mostraMensagemIncompleta(verificador, confirmadorEmail); 55 | }) 56 | 57 | -------------------------------------------------------------------------------- /assets/models/js/cepModel.js: -------------------------------------------------------------------------------- 1 | class GerenciadorDeCep { 2 | 3 | constructor(cep) { 4 | if (cep.match(/^[0-9]{8}$/)) { 5 | this.cep = cep; 6 | this.cepValidado = true; 7 | } else { 8 | this.cepValidado = false; 9 | } 10 | } 11 | 12 | getCepValidado() { 13 | return this.cepValidado 14 | } 15 | 16 | apiCep() { 17 | try { 18 | $.ajax({ 19 | url: "https://viacep.com.br/ws/" + this.cep + "/json/", 20 | success: (result) => { 21 | this.dadosApi = { ...result }; 22 | }, 23 | error: function (erro) { 24 | throw new Error(erro); 25 | } 26 | }); 27 | } catch (error) { 28 | console.error(error.message); 29 | } 30 | } 31 | 32 | getDadosApi() { 33 | return this.dadosApi 34 | } 35 | 36 | 37 | } 38 | -------------------------------------------------------------------------------- /assets/models/js/emailModel.js: -------------------------------------------------------------------------------- 1 | class GerenciadorDeEmail{ 2 | 3 | validaEmail(email){ 4 | const validacao = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 5 | if (email.match(validacao)){ 6 | this.email = email; 7 | return true; 8 | } 9 | } 10 | } 11 | 12 | -------------------------------------------------------------------------------- /assets/models/js/senhaModel.js: -------------------------------------------------------------------------------- 1 | class GerenciadorDeSenha { 2 | 3 | confirma(item,itemReapeat){ 4 | const itemConfirmado = item === itemReapeat 5 | return itemConfirmado 6 | 7 | } 8 | } -------------------------------------------------------------------------------- /assets/view/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Exo:wght@300;400;500&display=swap"); 2 | 3 | html, 4 | body { 5 | width: 100%; 6 | height: calc(100% - 50px); 7 | } 8 | 9 | :root { 10 | --escuro: #0b132b; 11 | --medio: #1c2541; 12 | --claro: #3a506b; 13 | --agua: #5b8fc0; 14 | --cinza: #e4e4e4; 15 | } 16 | 17 | input { 18 | caret-color: var(--agua); 19 | } 20 | 21 | ::selection { 22 | background-color: var(--agua); 23 | color: #fff; 24 | } 25 | 26 | * { 27 | scrollbar-width: thin; 28 | scrollbar-color: var(--medio) #fff; 29 | scroll-behavior: smooth; 30 | font-family: "Exo", sans-serif; 31 | } 32 | ::-webkit-scrollbar { 33 | width: 10px; 34 | } 35 | ::-webkit-scrollbar-track { 36 | background: #fff; 37 | } 38 | ::-webkit-scrollbar-thumb { 39 | background-color: var(--medio); 40 | border-radius: 10px; 41 | border: 3px solid #fff; 42 | } 43 | 44 | .estilo-barra-navegacao { 45 | background-color: var(--escuro); 46 | } 47 | 48 | .logo-barranav { 49 | width: 2rem; 50 | height: auto; 51 | } 52 | 53 | .texto-barra-navegacao { 54 | font-family: "Cinzel Decorative", cursive; 55 | font-weight: 400; 56 | color: #fff; 57 | transition: 0.3s; 58 | } 59 | 60 | .estilo-link-barranav { 61 | position: relative; 62 | } 63 | 64 | .estilo-link-barranav::after { 65 | content: ""; 66 | width: 0%; 67 | height: 2px; 68 | background-color: #fff; 69 | position: absolute; 70 | bottom: 5px; 71 | left: 10px; 72 | transition: 0.3s ease-in-out; 73 | } 74 | 75 | .estilo-link-barranav:hover::after { 76 | width: 40%; 77 | } 78 | 79 | .botao-cor-especial { 80 | background-color: var(--medio); 81 | color: #fff; 82 | transition: 0.3s; 83 | } 84 | 85 | .botao-cor-especial:hover { 86 | background-color: var(--claro); 87 | color: #fff; 88 | } 89 | 90 | .cor-link { 91 | color: var(--claro); 92 | transition: 0.3s; 93 | } 94 | 95 | .cor-link:hover { 96 | color: var(--agua); 97 | } 98 | 99 | .espaco-label { 100 | margin: 0.5rem 0; 101 | } 102 | 103 | .card-posicao-imagem { 104 | object-fit: contain; 105 | height: 140px; 106 | padding: 0.5rem; 107 | } 108 | 109 | .artigo-chamada-principal { 110 | margin: 2rem 2rem 3rem 2rem; 111 | padding: 2.5rem; 112 | height: calc(100vh - 250px); 113 | } 114 | 115 | .artigo-titulo-principal { 116 | font-size: 2.8rem; 117 | } 118 | 119 | .artigo-titulo-nome { 120 | font-family: "Cinzel Decorative", cursive; 121 | font-weight: 700; 122 | } 123 | 124 | .artigo-img-principal { 125 | width: 35rem; 126 | } 127 | 128 | .artigo-img-descricao { 129 | width: 25rem; 130 | } 131 | 132 | .artigo-descricao-principal { 133 | margin: 4rem 0; 134 | padding: 2rem; 135 | align-items: center; 136 | } 137 | 138 | .artigo-texto-descricao { 139 | font-size: 1.5rem; 140 | padding-right: 3rem; 141 | } 142 | 143 | .artigo-cartao { 144 | height: 25rem; 145 | width: 25rem; 146 | margin: 1rem; 147 | } 148 | 149 | .artigo-cartao-interno { 150 | height: 2rem; 151 | } 152 | 153 | .acordeao-tamanho { 154 | width: 60%; 155 | margin: 0 auto 1rem auto; 156 | } 157 | 158 | 159 | .secao-fonte-titulo { 160 | font-size: 2.5rem; 161 | font-weight: bold; 162 | text-decoration: underline; 163 | margin: 1rem auto; 164 | } 165 | 166 | .secao-fonte-texto { 167 | font-size: 1.4rem; 168 | width: 90%; 169 | margin: 1rem auto; 170 | } 171 | 172 | .card-externo, 173 | .card-externo-variavel { 174 | margin: 0.5rem; 175 | height: 21rem; 176 | min-width: 20rem; 177 | border-radius: 0.25rem; 178 | box-shadow: 0 0.5rem 0.6rem rgba(0, 0, 0, 0.2); 179 | } 180 | 181 | .card-externo { 182 | border: 1px solid var(--cinza); 183 | } 184 | 185 | .card-externo-variavel { 186 | border: 1px solid var(--agua); 187 | } 188 | 189 | .card-externo-cabecalho { 190 | color: #fff; 191 | background-color: var(--medio); 192 | } 193 | 194 | .tabela-comparativo { 195 | width: 50%; 196 | margin: 0 auto; 197 | } 198 | 199 | .botao-cor-gratis { 200 | background-color: #fff; 201 | color: var(--escuro); 202 | border: 1px solid var(--escuro); 203 | transition: 0.3s; 204 | } 205 | 206 | .botao-cor-gratis:hover { 207 | background-color: var(--escuro); 208 | color: #fff; 209 | } 210 | 211 | .largura-input-cadastro { 212 | width: 50%; 213 | } 214 | 215 | .card-contato { 216 | margin: 0.5rem; 217 | height: 22.5rem; 218 | min-width: 10rem; 219 | max-width: 15rem; 220 | border-radius: 0.25rem; 221 | box-shadow: 0 0.5rem 0.6rem rgba(0, 0, 0, 0.2); 222 | } 223 | 224 | .titulo-integrante { 225 | margin: 5rem 0; 226 | font-size: 2.4rem; 227 | } 228 | 229 | .nome-integrante { 230 | margin: 0.5rem 0; 231 | font-size: 1.0rem; 232 | text-align: center; 233 | } 234 | 235 | 236 | @media only screen and (min-width: 992px) { 237 | .espaco-link { 238 | margin-left: 1.6rem !important; 239 | } 240 | } 241 | 242 | @media only screen and (min-width: 1400px) { 243 | .espaco-link { 244 | margin-left: 3rem !important; 245 | } 246 | } 247 | 248 | @media only screen and (max-width: 300px) { 249 | .artigo-chamada-principal, 250 | .artigo-descricao-principal { 251 | margin: 0.3rem; 252 | padding: 0.8rem; 253 | height: 100%; 254 | } 255 | 256 | .card-posicao-imagem { 257 | object-fit: contain; 258 | height: 100px; 259 | padding: 0.25rem; 260 | } 261 | 262 | .artigo-cartao { 263 | height: 30rem; 264 | width: 25rem; 265 | margin: 0.5rem; 266 | } 267 | .card-externo, 268 | .card-externo-variavel { 269 | height: 21rem; 270 | min-width: 15rem; 271 | } 272 | 273 | .tabela-comparativo { 274 | width: 30%; 275 | margin: 0 auto; 276 | } 277 | 278 | .secao-fonte-titulo { 279 | margin: 1rem 0 1rem 0; 280 | } 281 | 282 | .secao-fonte-texto { 283 | font-size: 0.7rem; 284 | width: 90%; 285 | margin: 1rem auto; 286 | } 287 | 288 | .card-externo, 289 | .card-externo-variavel { 290 | margin: 0.25rem; 291 | min-width: 15rem; 292 | } 293 | 294 | .titulo-integrante { 295 | font-size: 1rem; 296 | } 297 | } 298 | 299 | @media only screen and (max-width: 450px) { 300 | .texto-barra-navegacao { 301 | font-size: 1rem; 302 | } 303 | 304 | .artigo-chamada-principal, 305 | .artigo-descricao-principal { 306 | margin: 0.3rem; 307 | padding: 0.8rem; 308 | height: 100%; 309 | } 310 | 311 | .artigo-titulo-principal { 312 | font-size: 1.2rem; 313 | } 314 | 315 | .artigo-img-principal { 316 | display: none; 317 | } 318 | 319 | .artigo-descricao-principal { 320 | flex-direction: column; 321 | margin-top: 3rem; 322 | } 323 | 324 | .artigo-texto-descricao { 325 | font-size: 1rem; 326 | padding-right: 0rem; 327 | } 328 | 329 | .tabela-comparativo { 330 | width: 50%; 331 | } 332 | .tabela-texto-servico { 333 | font-size: 0.8rem; 334 | } 335 | 336 | .secao-fonte-titulo { 337 | font-size: 1.1rem; 338 | margin: 1rem 0 0rem 0; 339 | } 340 | 341 | .secao-fonte-texto { 342 | font-size: 0.8rem; 343 | width: 100%; 344 | } 345 | 346 | .card-externo, 347 | .card-externo-variavel { 348 | margin: 0.25rem; 349 | height: 21rem; 350 | min-width: 15rem; 351 | } 352 | 353 | .titulo-integrante { 354 | font-size: 1.5rem; 355 | } 356 | } 357 | 358 | @media only screen and (max-width: 960px) { 359 | .artigo-chamada-principal, 360 | .artigo-descricao-principal { 361 | margin: 1rem; 362 | padding: 0.8rem; 363 | height: 100%; 364 | } 365 | 366 | .artigo-titulo-principal { 367 | font-size: 1.7rem; 368 | } 369 | 370 | .artigo-img-principal { 371 | max-width: 15rem; 372 | } 373 | 374 | .artigo-img-descricao { 375 | width: 20rem; 376 | } 377 | 378 | .artigo-descricao-principal { 379 | flex-direction: column; 380 | margin-top: 3rem; 381 | } 382 | 383 | .artigo-texto-descricao { 384 | font-size: 1.3rem; 385 | padding-right: 0rem; 386 | } 387 | .acordeao-tamanho { 388 | width: 90%; 389 | } 390 | .secao-fonte-titulo { 391 | font-size: 2rem; 392 | } 393 | 394 | .secao-fonte-texto { 395 | font-size: 1.2rem; 396 | width: 100%; 397 | } 398 | 399 | .tabela-comparativo { 400 | width: 90%; 401 | } 402 | 403 | .titulo-integrante { 404 | margin: 0.5rem 0; 405 | } 406 | } 407 | -------------------------------------------------------------------------------- /assets/view/html/Cadastro.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | BattleFRONT - Cadastro 16 | 17 | 18 |
19 | 89 |
90 | 91 |
92 |
93 |

Cadastrar Usuário:

94 |
95 | 96 | 97 | 107 | 108 | 109 | 120 | 121 | 122 | 132 | 133 | 136 | 146 | 147 | 148 | 158 | 159 | 160 |
161 | 170 |
171 | 174 |
175 |
176 | 177 | 178 | 187 | 188 | 189 | 199 | 200 | 201 | 209 | 210 | 211 | 220 | 221 | 222 | 231 | 232 | 233 | 242 | 243 | 248 | 249 | 254 | 255 | 260 | 261 | 269 |
270 |
271 | 272 | 273 | 276 | 281 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | -------------------------------------------------------------------------------- /assets/view/html/Login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | BattleFRONT - Login 16 | 17 | 18 |
19 | 89 |
90 | 91 |
94 |
95 |

Login:

96 |
97 | 98 | 99 | 109 | 110 | 111 | 120 | 121 | 130 | 131 | Esqueceu sua senha? 137 | 140 | 141 | 146 | 147 | 152 |
153 |
154 | 155 | 158 | 163 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /assets/view/html/RecuperacaoSenha.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | BattleFRONT - Recuperar Senha 16 | 17 | 18 |
19 | 89 |
90 | 91 |
94 |
95 |

Recuperar Senha:

96 |
97 | 98 | 99 |
109 | 110 | 118 | 119 | Cadastrar Usuário 122 | 123 | 128 | 129 | 134 | 135 | 140 |
141 |
142 | 143 | 146 | 151 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /assets/view/html/contato.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | BattleFRONT - Quem somos nós 16 | 17 | 18 |
19 | 89 |
90 | 91 |
92 |
95 |
96 |

97 | Nossa equipe é formada pelos seguintes estudantes da T14 da Resilia: 98 |

99 | 100 |
103 |
104 | foto do Christopher 109 |
110 |

Christopher Mamed

111 | Github 118 | LinkedIn 125 |
126 |
127 |
128 | 129 |
132 |
133 | foto da Hadassa 138 |
139 |

Hadassa Moraes

140 | Github 147 | LinkedIn 154 |
155 |
156 |
157 | 158 |
161 |
162 | foto do Victor 167 |
168 |

Vitor Del' Duca

169 | Github 176 | LinkedIn 183 |
184 |
185 |
186 | 187 |
190 |
191 | foto do Ytallo 196 |
197 |

Ytallo Bruno

198 | Github 205 | LinkedIn 212 |
213 |
214 |
215 |
216 |
217 |
218 | 219 | 222 | 227 | 228 | 229 | -------------------------------------------------------------------------------- /assets/view/html/produtos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | BattleFRONT - Produtos 16 | 17 | 18 |
19 | 89 |
90 | 91 |
92 |
93 |

Nosso modelo

94 |

95 | Contamos com uma excelente interface, desenvolvida especialmente para 96 | o dev que está começando seus estudos neste momento.
97 | O nosso modelo de estudos identifica os erros semânticos e modifica sua cor, a fim de que você possa ter uma percepção melhor de onde eles estão.
98 | Junto a isso, o próprio sistema fornece sugestões se você estiver com 99 | dificuldades em seguir as instruções do exercício.
100 | Para começar a utilizar a plataforma é necessário selecionar um dos planos 101 | abaixo e realizar o cadastro: 102 |

103 |
104 | 105 |
106 |
107 | 108 |
109 |
110 |
111 |

Plano Gratuito

112 |
113 |
114 |

R$0/mês

115 |
    116 |
  • Desafios de flexbox
  • 117 |
  • Landing pages
  • 118 |
  • + 3 projetos
  • 119 |
  • + 2 e-books
  • 120 |
121 | Começar os estudos 122 |
123 |
124 |
125 | 126 |
127 |
128 |
129 |

Plano Plus

130 |
131 |
132 |

R$19,90/mês

133 |
    134 |
  • Desafios básicos de Javascript
  • 135 |
  • Lógica de programação
  • 136 |
  • + 5 projetos
  • 137 |
  • + 3 e-books
  • 138 |
139 | Escolher 140 |
141 |
142 |
143 | 144 |
145 |
146 |
147 |

Plano Premium

148 |
149 |
150 |

R$29,90/mês

151 |
    152 |
  • Desafios avançados de Javascript
  • 153 |
  • JQuery + API's
  • 154 |
  • + 10 projetos
  • 155 |
  • + 5 e-books
  • 156 |
157 | Escolher 158 |
159 |
160 |
161 |
162 |
163 | 164 |
165 |

Compare os planos

166 | 167 |
168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 |
GrátisPlusPremium
Flexbox
Landing Pages
Desafios básicos de Javascript
Lógica de Programação
Desafios Avançados de Javascript
JQuery
API's
221 | 222 |
223 | 224 |
225 | 226 | 229 | 234 | 235 | 236 | -------------------------------------------------------------------------------- /assets/view/img/BattlefrontHome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ytallobruno/ProjetoFinalModulo2/1eb5794dee4379859f79a4a122815012629aa037/assets/view/img/BattlefrontHome.png -------------------------------------------------------------------------------- /assets/view/img/appDevelopment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ytallobruno/ProjetoFinalModulo2/1eb5794dee4379859f79a4a122815012629aa037/assets/view/img/appDevelopment.png -------------------------------------------------------------------------------- /assets/view/img/chrisperfil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ytallobruno/ProjetoFinalModulo2/1eb5794dee4379859f79a4a122815012629aa037/assets/view/img/chrisperfil.jpg -------------------------------------------------------------------------------- /assets/view/img/coding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ytallobruno/ProjetoFinalModulo2/1eb5794dee4379859f79a4a122815012629aa037/assets/view/img/coding.png -------------------------------------------------------------------------------- /assets/view/img/developer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/view/img/hadassaperfil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ytallobruno/ProjetoFinalModulo2/1eb5794dee4379859f79a4a122815012629aa037/assets/view/img/hadassaperfil.jpg -------------------------------------------------------------------------------- /assets/view/img/img_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ytallobruno/ProjetoFinalModulo2/1eb5794dee4379859f79a4a122815012629aa037/assets/view/img/img_logo.png -------------------------------------------------------------------------------- /assets/view/img/onlineEducation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ytallobruno/ProjetoFinalModulo2/1eb5794dee4379859f79a4a122815012629aa037/assets/view/img/onlineEducation.png -------------------------------------------------------------------------------- /assets/view/img/programming.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/view/img/selected.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/view/img/teamup.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/view/img/vitorperfil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ytallobruno/ProjetoFinalModulo2/1eb5794dee4379859f79a4a122815012629aa037/assets/view/img/vitorperfil.jpg -------------------------------------------------------------------------------- /assets/view/img/world.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/view/img/ytalloperfil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ytallobruno/ProjetoFinalModulo2/1eb5794dee4379859f79a4a122815012629aa037/assets/view/img/ytalloperfil.jpg -------------------------------------------------------------------------------- /assets/view/js/cepView.js: -------------------------------------------------------------------------------- 1 | class VisualizadorCep extends ManipuladorDom{ 2 | constructor(cep){ 3 | super(); 4 | this.cep = cep; 5 | } 6 | 7 | renderizaCep(dados){ 8 | this.estado = $('#estado').val(dados.uf); 9 | this.cidade = $('#cidade').val(dados.localidade); 10 | this.bairro = $('#bairro').val(dados.bairro); 11 | this.rua = $('#rua').val(dados.logradouro); 12 | } 13 | } -------------------------------------------------------------------------------- /assets/view/js/manipuladorDom.js: -------------------------------------------------------------------------------- 1 | class ManipuladorDom{ 2 | 3 | mudaClasse(elemento,classeOn,classeOff){ 4 | elemento.removeClass(classeOff); 5 | elemento.addClass(classeOn); 6 | } 7 | 8 | removeAtributo(elemento, atributo){ 9 | elemento.removeAttr(atributo) 10 | } 11 | 12 | colocaAtributo(elemento, atributo, valorAtributo){ 13 | elemento.attr(atributo, valorAtributo) 14 | } 15 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 18 | 19 | BattleFRONT 20 | 21 | 22 |
23 | 90 |
91 | 92 |
93 |
94 |
97 |

98 | BattleFRONT!
99 | Feito por devs,
100 | para devs. 101 |

102 | Desenho de um rapaz de frente para o computador e com fones de ouvido 107 |
108 | 109 |
110 | Desenho de um jovem programando usando uma tela e um notebook, com uma caneca na mesa 115 |
116 |

117 | Desafie-se e entre no mundo do web desenvolvimento de forma 118 | gratuita, com as ferramentas mais utilizadas pelos desenvolvedores 119 | na atualidade.
120 | Se estiver disposto a aprender mais, também contamos com conteúdos e 121 | desafios exclusivos para seu portfólio. 122 |

123 |
124 |
125 | 126 |
127 |
128 |
129 | 130 |
131 |
Play anywhere
132 |

Com o BattleFRONT, você pode resolver os desafios propostos a qualquer hora e de qualquer dispositivo.
Leve no seu bolso para qualquer lugar!

133 | Planos 134 |
135 |
136 | 137 |
138 | 139 |
140 |
Totalmente intuitivo
141 |

A implementação do método ELI5 faz toda diferença na hora de aprender conceitos e termos mais técnicos, trazendo exemplos de forma simples e de fácil assimilação.

142 | Planos 143 |
144 |
145 | 146 |
147 | 148 |
149 |
Cadastre-se abaixo!
150 |

Temos três planos para suprir as diferentes demandas de estudo de um dev Front End, sendo um deles grátis e dois pagos mensalmente.

151 | Cadastro 152 |
153 |
154 |
155 |
156 | 157 |
158 |
Tem alguma dúvida? Confira abaixo a nossa sessão de perguntas frequentes!
159 |
160 |
161 |

162 | 172 |

173 |
179 |
180 |

181 | A BattleFRONT é uma plataforma de testes voltada aos 182 | desenvolvedores front-end que estão no começo da carreira ou já 183 | atuam na área.
Com a finalidade de desenvolver o raciocínio lógico 184 | através de problemas de forma descomplicada, sendo nosso 185 | diferencial essa forma simples de resolução dos exercícios 186 | propostos, que podem ser resolvidos por pessoas de diversas idades 187 | com a mesma didática. 188 |

189 |
190 |
191 |
192 |
193 |

194 | 204 |

205 |
211 |
212 |

213 | Trabalhamos com três modelos de planos, sendo um gratuito e dois 214 | pagos, sendo que cada um fornece vantagens e benefícios 215 | exclusivos.
Dessa forma, conseguimos verificar o desempenho de 216 | cada aluno e seu grau de conhecimento, para que assim possamos 217 | fornecer desafios exclusivos de acordo com a escalabilidade de 218 | conhecimento. 219 |

220 |
221 |
222 |
223 |
224 |

225 | 235 |

236 |
242 |
243 |

244 | Trabalhamos com cartões de todas as bandeiras, PIX, boleto 245 | bancário, débito automático, depósito e transferência. O pagamento 246 | é realizado mensalmente e o aluno tem acesso a todo o conteúdo 247 | didático do plano escolhido.
São três: O Gratuito, o 248 | Intermediário no valor de R$19,90 mensais e o Premium, no valor 249 | de R$29,90. 250 |

251 |
252 |
253 |
254 |
255 |
256 | 257 | 260 | 265 | 266 | 267 | --------------------------------------------------------------------------------