diff --git a/assets/css/base.css b/assets/css/base.css new file mode 100644 index 0000000..3425cc9 --- /dev/null +++ b/assets/css/base.css @@ -0,0 +1,25 @@ +html { + height: 100%; + min-height: 100%; +} + +body { + font-family: 'Poppins', sans-serif; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + min-height: 100%; +} + +:root { + --preto: rgba(27, 27, 27, 1); + --azul-escuro: rgba(4, 41, 64, 1); + --verde: rgba(0, 92, 83, 1); + --verde-musgo: rgba(33, 153, 141, 1); + --verde-claro: rgba(159, 193, 49, 1); + --cinza-barra: rgba(154, 175, 188, 1); + --cinza-borda: rgba(190, 209, 221, 1); + --cinza-bg: rgba(248, 248, 248, 1); + --verde-cinza: rgba(241, 249, 248, 1); +} \ No newline at end of file diff --git a/assets/css/busca-economica.css b/assets/css/busca-economica.css new file mode 100644 index 0000000..9e4ce87 --- /dev/null +++ b/assets/css/busca-economica.css @@ -0,0 +1,95 @@ +.busca-economica { + text-align: center; + background: var(--cinza-bg); + padding: 3.5rem 15%; + border-top: 0.4rem solid var(--verde); +} + +.busca-economica__texto_titulo{ + font-weight: 600; + font-size: 1.8rem; + color: var(--azul-escuro); + line-height: 2rem; +} + +.busca-economica__texto_titulo strong { + font-weight: 700; + color: var(--verde-claro); +} + +.busca-economica__texto_explicacao { + font-weight: 500; + font-size: 1rem; + line-height: 1.5rem; + margin: 1rem 0 1rem; + color: var(--preto); +} + +.busca-economica__texto_chamada { + font-weight: 500; + font-size: 1rem; + line-height: 1.5rem; + margin-bottom: 3rem; + color: var(--preto); +} + +.busca-economica__texto_chamada strong { + font-weight: 700; +} + +.busca-economica__calc_label { + font-weight: 600; + font-size: 1rem; + color: var(--preto); +} + +.busca-economica__calc { + width: 450px; + text-align: center; + margin: 0 auto; +} + + +.busca-economica__calc_campo-valor { + display: flex; + align-items: center; + justify-content: space-between; +} + +.busca-economica__calc_simbolo-dinheiro { + font-weight: 800; + font-size: 2.25rem; + color: var(--azul-escuro); +} + +.busca-economica__calc_valor { + width: 85%; + height: 3.5rem; + border-radius: 3.1rem; + border: 1px solid var(--cinza-borda); + margin: 1rem 0 1.5rem; + text-align: center; + font-size: 2.25rem; + font-family: 'Poppins', sans-serif; + font-weight: 800; + color: var(--azul-escuro); +} + +.busca-economica__calc_botao-buscar { + width: 100%; + height: 2.9rem; + font-family: 'Poppins', sans-serif; + font-size: 1.5rem; + font-weight: 600; + color: white; + border-radius: 3.1rem; + background: var(--verde); + border: none; + cursor: pointer; +} + +.busca-economica__calc_botao-buscar:hover { + opacity: 90%; + box-shadow: 2px 2px 5px rgb(58, 58, 58); +} + diff --git a/assets/css/cabecalho.css b/assets/css/cabecalho.css new file mode 100644 index 0000000..b10f9ec --- /dev/null +++ b/assets/css/cabecalho.css @@ -0,0 +1,6 @@ +.cabecalho { + display: flex; + align-items: center; + justify-content: center; + height: 165px; +} \ No newline at end of file diff --git a/assets/css/cantratar-cooperativa.css b/assets/css/cantratar-cooperativa.css new file mode 100644 index 0000000..5403f70 --- /dev/null +++ b/assets/css/cantratar-cooperativa.css @@ -0,0 +1,75 @@ +.cantratar-cooperativa { + text-align: center; + background: var(--cinza-bg); + padding: 3rem 10%; +} + +.cantratar-cooperativa__minha-economia { + font-weight: 500; + font-size: 1rem; + color: var(--preto); +} + +.cantratar-cooperativa__economia-anual { + font-weight: 800; + font-size: 2.5rem; + color: var(--verde-claro); + margin-top: 0.3rem; +} + +.cantratar-cooperativa__economia-mensal { + margin: 1.8rem 0 1rem; + font-weight: 600; + font-size: 1rem; + color: var(--preto); +} + +.cantratar-cooperativa__aviso { + font-weight: 400; + font-size: 0.75rem; + margin-bottom: 0.4rem; +} + +.cantratar-cooperativa__botao-contratar { + width: 28rem; + height: 2.9rem; + font-family: 'Poppins', sans-serif; + font-size: 1.5rem; + font-weight: 600; + color: white; + border-radius: 3.1rem; + background: var(--verde-claro); + border: none; + cursor: pointer; +} + +.cantratar-cooperativa__botao-contratar:hover { + box-shadow: 2px 2px 5px rgb(121, 121, 121); +} + +.cantratar-cooperativa_modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,0.9); +} + +.cantratar-cooperativa_modal-caixa { + background-color: white; + margin: 15% auto; + padding: 20px; + border-radius: 10px; + width: 30%; + + display: flex; + flex-direction: column; + align-items: center; + font-weight: 600; + font-size: 1.5rem; + color: var(--azul-escuro); +} \ No newline at end of file diff --git a/assets/css/reset.css b/assets/css/reset.css new file mode 100644 index 0000000..4056498 --- /dev/null +++ b/assets/css/reset.css @@ -0,0 +1,43 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/assets/css/resultado-busca.css b/assets/css/resultado-busca.css new file mode 100644 index 0000000..84a4e8e --- /dev/null +++ b/assets/css/resultado-busca.css @@ -0,0 +1,67 @@ +.resultado-busca { + text-align: center; + margin: 2.5rem 10%; +} + +.resultado-busca__selecionar-oferta { + font-weight: 600; + font-size: 1rem; + color: var(--preto); +} + +#resultado-busca__cooperativas { + height: 100%; + display: flex; + justify-content: center; +} + +#resultado-busca__sem-busca { + font-weight: 500; + font-size: 1rem; + margin: 3.7rem 0; + color: rgba(187, 187, 187, 1); + display: block; +} + +.resultado-busca__botao-calc-economia { + width: 28rem; + height: 2.9rem; + font-family: 'Poppins', sans-serif; + font-size: 1.5rem; + font-weight: 600; + color: white; + border-radius: 3.1rem; + background: var(--verde); + border: none; + cursor: pointer; +} + +.resultado-busca__botao-calc-economia:hover { + opacity: 90%; + box-shadow: 2px 2px 5px rgb(58, 58, 58); +} + +.caixa_cooperativas { + width: 215px; + height: 100px; + border-radius: 0.5rem; + border: 1px solid var(--cinza-borda); + background: var(--verde-cinza); + margin: 1rem 0.5rem; +} + +.cooperativaDesconto { + margin: 1.8rem 1rem 1rem 0; +} + +.cooperativa { + font-weight: 700; + font-size: 1.2rem; + color: var(--azul-escuro); +} + +.desconto { + font-weight: 500; + font-size: 1rem; + color: var(--azul-escuro); +} diff --git a/assets/css/rodape.css b/assets/css/rodape.css new file mode 100644 index 0000000..58e638c --- /dev/null +++ b/assets/css/rodape.css @@ -0,0 +1,25 @@ +.rodape { + margin-top: auto; +} + +.rodape__container { + margin: 3.5rem 10%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.rodape__inf { + font-weight: 400; + font-size: 0.7rem; + color: var(--preto); +} + +.desafio { + font-weight: 600; + margin-bottom: 0.2rem; +} + +.rodape__logo { + height: 100%; +} \ No newline at end of file diff --git a/assets/img/favicon-marketplace-de-energia.png b/assets/img/favicon-marketplace-de-energia.png new file mode 100644 index 0000000..33f9687 Binary files /dev/null and b/assets/img/favicon-marketplace-de-energia.png differ diff --git a/assets/img/icone-cooperativa.png b/assets/img/icone-cooperativa.png new file mode 100644 index 0000000..e5c50e1 Binary files /dev/null and b/assets/img/icone-cooperativa.png differ diff --git a/assets/img/logo-marketplace-de-energia.png b/assets/img/logo-marketplace-de-energia.png new file mode 100644 index 0000000..3ba2693 Binary files /dev/null and b/assets/img/logo-marketplace-de-energia.png differ diff --git a/assets/img/logo-wattio.png b/assets/img/logo-wattio.png new file mode 100644 index 0000000..847f62b Binary files /dev/null and b/assets/img/logo-wattio.png differ diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..52beb5a --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,175 @@ +const cooperativas = [ + {nome: 'EnerBásico', valorMinimoMensal: '0.00', valorMaximoMensal: '1500.00', desconto: '0.10'}, + {nome: 'EnerPopular', valorMinimoMensal: '0.00', valorMaximoMensal: '2500.00', desconto: '0.15'}, + {nome: 'EnerFácil', valorMinimoMensal: '1000.00', valorMaximoMensal: '40000.00', desconto: '0.18'}, + {nome: 'EnerPro', valorMinimoMensal: '2000.00', valorMaximoMensal: '10000.00', desconto: '0.20'}, + {nome: 'EnerLimpa', valorMinimoMensal: '10000.00', valorMaximoMensal: '80000.00', desconto: '0.25'}, + {nome: 'EnerGrande', valorMinimoMensal: '40000.00', valorMaximoMensal: '100000.00', desconto: '0.30'}, +] + + +const barraValorConta = document.querySelector('.busca-economica__calc_valor'); + +barraValorConta.onkeyup = function formatarMoeda() { + + var valor = barraValorConta.value; + + valor = valor + ''; + valor = parseInt(valor.replace(/[\D]+/g, '')); + valor = valor + ''; + valor = valor.replace(/([0-9]{2})$/g, ",$1"); + + barraValorConta.value = valor; + if(valor == 'NaN') barraValorConta.value = ''; +} + + +const botaoBuscar = document.querySelector('.busca-economica__calc_botao-buscar') + +const teste = document.querySelector('#form') + +teste.addEventListener('submit', event => { + event.preventDefault() + + const resultadoBuscaEconomica = document.querySelector('#resultado-busca__cooperativas'); + const resultadoCalcDescontoAnual = document.querySelector ('#resultado__calc_economia-anual'); + const resultadoCalcDescontoMensal = document.querySelector ('#resultado__calc_economia-mensal'); + const cooperativaElemento = document.querySelector('.cooperativa'); + const descontoElemento = document.querySelector('.desconto'); + const valorConta = parseFloat(document.querySelector('.busca-economica__calc_valor').value) + const semBusca = document.querySelector('#resultado-busca__sem-busca') + + + +if (!valorConta) { +}else { + if (cooperativaElemento == null && descontoElemento == null){ + + const cooperativaEconomica = cooperativas.filter(function(cooperativa) { + return valorConta >= cooperativa.valorMinimoMensal && valorConta <= cooperativa.valorMaximoMensal + }); + + cooperativaEconomica.forEach(i =>{ + let caixaCooperativa = document.createElement ('div') + caixaCooperativa.setAttribute ('class', 'caixa_cooperativas') + + let seletorCooperativa = document.createElement ('input') + seletorCooperativa.setAttribute ('type', 'radio') + seletorCooperativa.setAttribute ('value', i.desconto) + seletorCooperativa.setAttribute ('id', i.nome) + seletorCooperativa.setAttribute ('name', 'cooperativas') + seletorCooperativa.setAttribute ('class', 'cooperativaDesconto') + + let cooperativa = document.createElement ('label') + cooperativa.setAttribute ('class', 'cooperativa') + cooperativa.setAttribute ('for', i.nome) + cooperativa.innerHTML = i.nome + + let quebra = document.createElement ('br') + + let desconto = document.createElement ('label') + desconto.setAttribute ('class', 'desconto') + desconto.setAttribute ('for', i.nome) + desconto.innerHTML = i.desconto[2] + i.desconto[3] + "%" + " de desconto" + + resultadoBuscaEconomica.appendChild (caixaCooperativa) + caixaCooperativa.appendChild(seletorCooperativa) + caixaCooperativa.appendChild(cooperativa) + caixaCooperativa.appendChild(quebra) + caixaCooperativa.appendChild(desconto) + + }) + + botaoBuscar.innerHTML = "Limpar busca" + botaoCalculo.innerHTML = "Calcular economia" + + semBusca.setAttribute ('style', 'display: none') + + }else { + + const semBusca = document.querySelector('#resultado-busca__sem-busca') + resultadoBuscaEconomica.innerHTML = "" + resultadoCalcDescontoAnual.innerHTML = "R$0,00" + resultadoCalcDescontoMensal.innerHTML = "Em médio R$ 0,00 por mês*" + + botaoBuscar.innerHTML = "Buscar ofertas!" + botaoCalculo.innerHTML = "Calcular economia" + + semBusca.setAttribute ('style', 'display: block') + + } + +} +}) + +const botaoCalculo = document.querySelector('.resultado-busca__botao-calc-economia') + +botaoCalculo.onclick = function calcularEconomia (){ + + const resultadoCalcDescontoAnual = document.querySelector ('#resultado__calc_economia-anual'); + const resultadoCalcDescontoMensal = document.querySelector ('#resultado__calc_economia-mensal') + + + if (resultadoCalcDescontoAnual.innerHTML == "R$0,00" && resultadoCalcDescontoMensal.innerHTML == "Em médio R$ 0,00 por mês*"){ + + + const valorDesconto = document.querySelector('input[name="cooperativas"]:checked').value; + const valorConta = document.querySelector('.busca-economica__calc_valor').value; + + + valor = parseFloat (valorConta.replace (",", ".")); + + let calcAnualDesconto = parseFloat([valor * 12] * valorDesconto); + let calcMensalDesconto = parseFloat(valor * valorDesconto); + + const descontoAnual = calcAnualDesconto.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }) + const descontoMensal = calcMensalDesconto.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }) + + resultadoCalcDescontoAnual.innerHTML = descontoAnual; + resultadoCalcDescontoMensal.innerHTML = "Em média " + descontoMensal + " por mês*"; + + botaoCalculo.innerHTML = "Limpar cálculo" + + console.log (valorDesconto) + }else{ + + resultadoCalcDescontoAnual.innerHTML = "R$0,00" + resultadoCalcDescontoMensal.innerHTML = "Em médio R$ 0,00 por mês*" + + botaoCalculo.innerHTML = "Calcular economia" + + } +} + +const modalParabens = () => { + const modal = document.querySelector('.cantratar-cooperativa_modal') + const actualStyle = modal.style.display + if(actualStyle == 'block') { + modal.style.display = 'none' + } + else { + modal.style.display = 'block' + } + } + + const btn = document.querySelector('.cantratar-cooperativa__botao-contratar') + btn.addEventListener('click', modalParabens) + + window.onclick = function(event) { + const modal = document.querySelector('.cantratar-cooperativa_modal') + if (event.target == modal) { + modalParabens() + } + } + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..bad094a --- /dev/null +++ b/index.html @@ -0,0 +1,91 @@ + + + + + + + + + Marketplace de Energia + + + + + + + + + + + + + + + + + +
+ Logo da Marketplace de Energia +
+ +
+
+
+

Calcule a economia na conta de energia em sua casa ou empresa.

+ +

As Cooperativas de Energia são empresas que compram energia excedente de usinas e outras casas/empresas com sistemas de geração e vendem para consumidores a preços mais baixos que os das distribuidoras tradicionais.

+ +

Encontre a melhor oferta entre as Cooperativas de Energia do Brasil e contrate agora!

+
+
+ +
+ +
+

R$

+ +
+ + +
+
+
+ +
+ +

Nada encontrado

+
+ +
+ +
+

Sua economia anual será de até

+

R$0,00

+

Em médio R$ 0,00 por mês*

+

*Essa é apenas uma simulação e não configura garantia do desconto.

+ + + +
+
+

Parabéns!

+
+
+
+ + +
+ + + + + + \ No newline at end of file