Skip to main content
adicionou 12451 caracteres ao conteúdo
Fonte Link
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>
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();
}
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>
Remoção de ruídos de comunicação.
Fonte Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62

tudo bem?

Seguinte, sou iniciante em JavaScript e estouEstou fazendo um projeto que calcula quanto o usuário gasta por mês e o seu lucro através das informações que ele digitou nos inputs, então ele irá clicar em um botão e aparecerá o seu resultado dentro de box's. A minha pergunta é... eu posso criar uma função que o seu objetivo é na execução de outras como mostra no código abaixo? ou ficaria muito merda? kkk Já agradeço que puder me tirar essa dúvida!

tudo bem?

Seguinte, sou iniciante em JavaScript e estou fazendo um projeto que calcula quanto o usuário gasta por mês e o seu lucro através das informações que ele digitou nos inputs, então ele irá clicar em um botão e aparecerá o seu resultado dentro de box's. A minha pergunta é... eu posso criar uma função que o seu objetivo é na execução de outras como mostra no código abaixo? ou ficaria muito merda? kkk Já agradeço que puder me tirar essa dúvida!

Estou fazendo um projeto que calcula quanto o usuário gasta por mês e o seu lucro através das informações que ele digitou nos inputs, então ele irá clicar em um botão e aparecerá o seu resultado dentro de box's. A minha pergunta é... eu posso criar uma função que o seu objetivo é na execução de outras como mostra no código abaixo?

Fonte Link

Função criada para executar outras funções

tudo bem?

Seguinte, sou iniciante em JavaScript e estou fazendo um projeto que calcula quanto o usuário gasta por mês e o seu lucro através das informações que ele digitou nos inputs, então ele irá clicar em um botão e aparecerá o seu resultado dentro de box's. A minha pergunta é... eu posso criar uma função que o seu objetivo é na execução de outras como mostra no código abaixo? ou ficaria muito merda? kkk Já agradeço que puder me tirar essa dúvida!

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();
}