function resultados(){
function mostraContainer(){
let containerResultado = document.querySelector("#div-resultado");
containerResultado.style.display = "block";
} mostraContainer();
let rendaPorMes = document.getElementById("rendaMensal").value;
let aguaPorMes = document.getElementById("aguaMensal").value;
let luzPorMes = document.getElementById("energiaMensal").value;
let mercadoPorMes = document.getElementById("mercadoMensal").value;
let habitacaoPorMes = document.getElementById("habitacaoMensal").value;
let internetPorMes = document.getElementById("internetMensal").value;
let televisaoPorMes = document.getElementById("TVMensal").value;
let telefonePorMes = document.getElementById("telefoneMensal").value;
let saudePorMes = document.getElementById("saudeMensal").value;
let impostoPorMes = document.getElementById("impostoMensal").value;
let veiculoPorMes = document.getElementById("automovelMensal").value;
let despesasPessoaisPorMes = document.getElementById("despesasPessoaisMensal").value;
let lazerPorMes = document.getElementById("lazerMensal").value;
const somaDosGastosMensal = () => Number(aguaPorMes) + Number(luzPorMes) + Number(mercadoPorMes) + Number(habitacaoPorMes) + Number(internetPorMes) + Number(televisaoPorMes) + Number(telefonePorMes) + Number(saudePorMes) + Number(impostoPorMes) + Number(veiculoPorMes) + Number(despesasPessoaisPorMes) + Number(lazerPorMes);
const lucroMensal = () => Number(rendaPorMes) - somaDosGastosMensal();
// Resultados Mensal: Lucro e Soma dos Gastos
function resultadoLucroMensal(){
let resultadoMensal = document.querySelector("#saldoDoMes");
if(lucroMensal() > 0 ) resultadoMensal.innerText = `Seu mês fecha ANIMADO com um SALDO POSITIVO de ${lucroMensal()} reais.`;
else if(lucroMensal() === 0) resultadoMensal.innerText = `Seu mês fecha ZERADO!`;
else resultadoMensal.innerText = `Seu mês fecha TRISTE com um SALDO NEGATIVO de ${lucroMensal()} reais.`;
} resultadoLucroMensal();
function resultadoSomaMensal(){
let somaMensal = document.querySelector("#somaDosGastosDoMes");
somaMensal.innerText = `O seu gasto mensal é de ${somaDosGastosMensal()} reais.`;
if(somaDosGastosMensal() === 0) somaMensal.innerText = `O seu gasto mensal está ZERADO!`;
} resultadoSomaMensal();
}
#div-resultado{
display: none;
}
<body>
<header>
<div class="container">
<a href="index.html" class="titulo"><h1>Sua Renda<i class="fas fa-money-bill-wave"></i></h1></a>
</div>
</header>
<main>
<div class="container-items">
<div class="box">
<h3>Quanto é o seu salário ou renda familiar mensal?</h3>
<label class="sr-only" for="rendaMensal">Digite seu salário ou renda Mensal</label>
<input type="number" name="rendaMensal" placeholder="R$" id="rendaMensal" required>
</div>
</div>
<div class="anuncio">
<h3>Agora vamos as perguntas que dirão o seu resultado. Okay? 😉<br> Ahh outra coisa! Se você não possui gasto ou não se lembra de algum valor das seguintes opções, SEM PROBLEMA é só pular!</h3>
</div>
</main>
<section>
<form>
<div class="container-items">
<div class="box-itens">
<img src="assets/Imagens/Icones das perguntas/agua.png" width="25%" alt="Água">
<div class="textoEinput">
<h3>Quanto você gasta com ÁGUA por mês?</h3>
<label class="sr-only" for="aguaMensal">Digite quanto gasta com água por mês</label>
<input type="number" name="aguaMensal" placeholder="R$" id="aguaMensal">
</div>
</div>
<div class="box-itens">
<img src="assets/Imagens/Icones das perguntas/luz.png" width="25%" alt="Energia">
<div class="textoEinput">
<h3>Quanto você gasta com ENERGIA por mês?</h3>
<label class="sr-only" for="energiaMensal">Digite quanto gasta com energia por mês</label>
<input type="number" name="energiaMensal" placeholder="R$" id="energiaMensal">
</div>
</div>
<div class="box-itens">
<img src="assets/Imagens/Icones das perguntas/mercado.png" width="25%" alt="Mercado">
<div class="textoEinput">
<h3>Quanto você gasta com compras ao MERCADO por mês?</h3>
<label class="sr-only" for="mercadoMensal">Digite quanto gasta com mercado por mês</label>
<input type="number" name="mercadoMensal" placeholder="R$" id="mercadoMensal">
</div>
</div>
</div>
<!--2° LINHA-->
<div class="container-items">
<div class="box-itens">
<img src="assets/Imagens/Icones das perguntas/casa.png" width="25%" alt="Casa">
<div class="textoEinput">
<h3>Quanto você gasta com ALUGUEL ou PRESTAÇÃO?</h3>
<label class="sr-only" for="habitacaoMensal">Digite quanto gasta com habitação(alguel ou prestação) por mês</label>
<input type="number" name="habitacaoMensal" placeholder="R$" id="habitacaoMensal">
</div>
</div>
<div class="box-itens">
<img src="assets/Imagens/Icones das perguntas/wifi.png" width="25%" alt="internet">
<div class="textoEinput">
<h3>Quanto você gasta com INTERNET por mês?</h3>
<label class="sr-only" for="internetMensal">Digite quanto gasta com internet por mês</label>
<input type="number" name="internetMensal" placeholder="R$" id="internetMensal">
</div>
</div>
<div class="box-itens">
<img src="assets/Imagens/Icones das perguntas/tv.png" width="25%" alt="TV">
<div class="textoEinput">
<h3>Quanto você gasta com TV (planos de assinatura) por mês?</h3>
<label class="sr-only" for="TVMensal">Digite quanto gasta com TV (planos de assinatura, etc) por mês</label>
<input type="number" name="TVMensal" placeholder="R$" id="TVMensal">
</div>
</div>
</div>
<!--3° LINHA-->
<div class="container-items">
<div class="box-itens">
<img src="assets/Imagens/Icones das perguntas/telefone.png" width="25%" alt="Telefone">
<div class="textoEinput">
<h3>Quanto você gasta com TELEFONE (planos, créditos ou assinaturas) por mês?</h3>
<label class="sr-only" for="telefoneMensal">Digite quanto gasta com telefone(planos, créditos ou assinaturas) por mês</label>
<input type="number" name="telefoneMensal" placeholder="R$" id="telefoneMensal">
</div>
</div>
<div class="box-itens">
<img src="assets/Imagens/Icones das perguntas/saude.png" width="25%" alt="Saúde">
<div class="textoEinput">
<h3>Quanto você gasta com SAÚDE (planos, dentista, medicamentos, etc) por mês?</h3>
<label class="sr-only" for="saudeMensal">Digite quanto gasta com saude(planos, dentista, medicamentos, etc) por mês</label>
<input type="number" name="saudeMensal" placeholder="R$" id="saudeMensal">
</div>
</div>
<div class="box-itens">
<img src="assets/Imagens/Icones das perguntas/imposto.png" width="25%" alt="Imposto">
<div class="textoEinput">
<h3>Quanto você paga em IMPOSTO (IR, INSS ou outros) por mês?</h3>
<label class="sr-only" for="impostoMensal">Digite quanto gasta com imposto(IR, INSS ou outros) por mês</label>
<input type="number" name="impostoMensal" placeholder="R$" id="impostoMensal">
</div>
</div>
</div>
<!--4° LINHA-->
<div class="container-items">
<div class="box-itens">
<img src="assets/Imagens/Icones das perguntas/automovel.png" width="25%" alt="Automóvel">
<div class="textoEinput">
<h3>Quanto você gasta com o seu AUTOMÓVEL (prestação, combustível, seguro, etc) por mês?</h3>
<label class="sr-only" for="automovelMensal">Digite quanto gasta com automóvel(prestação, combustível, seguro, etc) por mês</label>
<input type="number" name="automovelMensal" placeholder="R$" id="automovelMensal">
</div>
</div>
<div class="box-itens">
<img src="assets/Imagens/Icones das perguntas/despesaPessoal.png" width="25%" alt="Despesa Pessoal">
<div class="textoEinput">
<h3>Quanto você gasta com DESPESAS PESSOAIS (vestuário, academia, cosméticos, etc) por mês?</h3>
<label class="sr-only" for="despesasPessoaisMensal">Digite quanto gasta com despesas pessoais(vestuário, academia, cosméticos, etc) por mês</label>
<input type="number" name="despesasPessoaisMensal" placeholder="R$" id="despesasPessoaisMensal">
</div>
</div>
<div class="box-itens">
<img src="assets/Imagens/Icones das perguntas/lazer.png" width="25%" alt="Lazer">
<div class="textoEinput">
<h3>Quanto você gasta com LAZER (restaurantes, passeios, livraria, etc) por mês?</h3>
<label class="sr-only" for="lazerMensal">Digite quanto gasta com lazer (restaurantes, passeios, livraria, etc) por mês</label>
<input type="number" name="lazerMensal" placeholder="R$" id="lazerMensal">
</div>
</div>
</div>
</form>
<div class="botao">
<input type="button" role="button" value="Calcular" id="botaoCalcular" onclick="resultados()">
</div>
</section>
<section id="div-resultado">
<div class="container-resultados">
<div class="box-resultado">
<img src="assets/Imagens/Icones do resultado/saldo.png" width="20%" alt="Saldo do mês">
<h3 id="saldoDoMes"></h3>
</div>
<div class="box-resultado">
<img src="assets/Imagens/Icones do resultado/somaGastos.png" width="20%" alt="Soma dos gastos">
<h3 id="somaDosGastosDoMes"></h3>
</div>
</div>
<div id="container-anual">
<div id="box-anual">
<div id="imagemAnual">
<img src="assets/Imagens/Icones do resultado/resultadoAnual.png" id="imagemGrafico" width="60%" alt="Gráfico">
</div>
<div class="textoAnual">
<h2 id="tituloAnual">Sua média de gasto anual</h2>
<p id="paragrafoAnuncio">(De acordo com as informações fornecidas).</p>
<div id="dadosAnuais">
<p id="aguaPorAno"></p>
<p id="luzPorAno"></p>
<p id="mercadoPorAno"></p>
<p id="habitacaoPorAno"></p>
<p id="internetPorAno"></p>
<p id="televisaoPorAno"></p>
<p id="telefonePorAno"></p>
<p id="saudePorAno"></p>
<p id="impostoPorAno"></p>
<p id="veiculoPorAno"></p>
<p id="despesasPessoaisPorAno"></p>
<p id="lazerPorAno"></p>
<div align="center">
<hr width="55%">
</div>
</div>
<div class="relatorioBasico">
<p id="rendaAnual"></p>
<p id="somaDosGastosAnual"></p>
<p id="lucroAnual"></p>
</div>
</div>
</div>
<div id="agradecimento" align="center">
<h2>MUITO OBRIGADO por ter usado o meu projeto!<br> Espero que tenha gostado da experiência <a href="#" onclick="misterio()">😁</a></h2>
</div>
</div>
</section>
<footer>
</body>