From a38b5846d4c722927dd18f2055127c024c3af235 Mon Sep 17 00:00:00 2001 From: Thiago Terra Date: Thu, 8 Sep 2022 20:05:32 -0300 Subject: [PATCH] Adicionando Site --- assets/css/base.css | 25 +++ assets/css/busca-economica.css | 95 ++++++++++ assets/css/cabecalho.css | 6 + assets/css/cantratar-cooperativa.css | 75 ++++++++ assets/css/reset.css | 43 +++++ assets/css/resultado-busca.css | 67 +++++++ assets/css/rodape.css | 25 +++ assets/img/favicon-marketplace-de-energia.png | Bin 0 -> 717 bytes assets/img/icone-cooperativa.png | Bin 0 -> 1842 bytes assets/img/logo-marketplace-de-energia.png | Bin 0 -> 5447 bytes assets/img/logo-wattio.png | Bin 0 -> 2779 bytes assets/js/main.js | 175 ++++++++++++++++++ index.html | 91 +++++++++ 13 files changed, 602 insertions(+) create mode 100644 assets/css/base.css create mode 100644 assets/css/busca-economica.css create mode 100644 assets/css/cabecalho.css create mode 100644 assets/css/cantratar-cooperativa.css create mode 100644 assets/css/reset.css create mode 100644 assets/css/resultado-busca.css create mode 100644 assets/css/rodape.css create mode 100644 assets/img/favicon-marketplace-de-energia.png create mode 100644 assets/img/icone-cooperativa.png create mode 100644 assets/img/logo-marketplace-de-energia.png create mode 100644 assets/img/logo-wattio.png create mode 100644 assets/js/main.js create mode 100644 index.html 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 0000000000000000000000000000000000000000..33f96876393422a4aae89e634d7d910c1848b651 GIT binary patch literal 717 zcmV;;0y6!HP)HUZ+X+N+G_$+=9iS>KQvFt5iyA z85_0lB33F=HTu|vzOEA-+$lbl%&0vp^G@wM-8DJtM8}H!P3B&7l2C=!1o9gib9Ex4 z_FDXjR#InEH4=@$Y&Lr%WoFJqEUgbB|G?vQd!ThE&MgcP;`OsKbzmL*ZLWx=^~yguP@0V#-A%oQ*q$kSmm7r(2EKw6TlZnc zYu}qO=kEUZ=oi=u<3+}LYsi3#g5N8ck;|Pr{Wf7_PUDXCQMKoU?kbFoidrqcmf(&e z3JwPT2{~98NgIaHRW)Lw&rb~%!QK(515y=S0IsI4XnqfVOYPu-xZ+MltCyLEfsX+gA-JVh|vXy`De3$#D#Z*lRk6+Buh^D>?KO=^?VCFCs&>AZQpZ9$(CpH9n8STvmE16oX&|)M z{h%eMQUz>1io(){*q$mm$ItG>GviI$Ur*#iqU6Kc4^c-}DC$N_CklgWc?+kD(!b?7 z(S3d@`*`fZrbB1o5buYRtN0fmQAH_v%lG6eKC+vj)8^erDv_QRpyjkYhV5uO=Se9oJ3JkE2+&yQt;PbCfE|JJ(Uv1Ml>_ZduMXHE z;3O@4`@TH4p329nlc@&{=9}V~UdGR5fzUA}bHZ%G1)8h_j*aW8{xrp^^}U>$kFj{q zh9`PEj~Lp!)p3+JBb+J?V(xwWKDmeo(9#w*Iig8n%|mCZ0Vp@Jf5vxeB+wr0l2HM( zO_TvS#4%@4!mA%>21Co3{Im*i@FF^ddG+#sAx!Mh0*60r`Zyg#oF2Yq1HiV))%kln z-rtC7*Y%RAY+~?cAYL2J^v*0|cd4Z|zEX>lIVzKqs07QZF+NBy^4pamM!~D z8j8mWxcl+tub*t=7;QqWGqhDOqj4N%V)-b=al0CF0TY-Dt`;~&$v;j6Oe+Q;zZR zK5oe<_{T(!j*aWZLQKSH<5_$^qW$~K+od{sRf1*|nM|dVK9v}hPMa$tfB~gs`!>MH zJ818ne34;O;Q0Q!4zyPVm`tdAm<57aav2|>`CS26->zW`n81Mekl~Yaw#E`Bk1|tX zwDCb;#lj`$RI|KAZUv33?AX#Ua|r`Vu_su|5D5NgqO#5O0t zp2J`*pfY;o`N2N(ULG-N8yX8uCYVgW(}8@LE2p46cN47EO);#q${b_Q0Qfykz~(Ll z9%$J#ZOq>>Co82C<}+6mSPYKIE(&?Z=D1rdI>16Z1np*n2Jj4o33W{RwaUsax1Xur z6WOLFO&@_~VJ;Jw%4bR==n)1DO~@Nd*!zK2*}~9t zn3rhOWVfz6{A1hth;C3`mE~Tb)5kD{41fWO5{(xtVQtw&hRa#bQ<7g9t5_P!{WLu= z01Vq1f@$HFX;#FZyLTzBm^LluZo@5#{~OR0ltz4j(N2xGYjgZ(+z3M*Lg8_FNa~p| z+0H4xvD_Op7%(pK1zxI)Dbcn8_BqWaxt4-F$dt?!O?)OrFSsLIB!R3zVB7o1!k*!0 z7dc1=w7iXMZjd^W#9Xqo_S7cC4X~+gxue|QJSa@qq1`g`xn1Ten=kWeZ&O)`rmc|r zk&Bp1^fmnJLa#@C^Fc{ed(V9bS&gP0fm!tVG$5gQ^GBwHsPrZ!-$hmq+L7YwR_9Sd z`|6pjKpL4xqNn|!CV47k#&m7KJTy(7DZR+uCm26ka(t~U2U^L;{29se5*GbuDSc=0 g?V+>ef(!kB0Vy@D++}ttV*mgE07*qoM6N<$f=`QO#sB~S literal 0 HcmV?d00001 diff --git a/assets/img/logo-marketplace-de-energia.png b/assets/img/logo-marketplace-de-energia.png new file mode 100644 index 0000000000000000000000000000000000000000..3ba2693598eb9fac3aefa0ed1ea4d413a020956a GIT binary patch literal 5447 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 { + 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!

+
+
+
+ + +
+ +
+
+
+

Desafio Front-End Wattio

+

Projetado e Desenvolvido por Thiago Terra

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