Compound Interest Calculator in JS

Asked

Viewed 242 times

-1

I’m trying to create a compound interest calculator in PHP, where I need to calculate the initial investment value, the monthly investment, the period and by interest percentage each month.

The calculator realizes the sum of the amount initially invested + the amount that will be invested each month + the interest on the two previous values (interest on interest).

Able to do it in PHP, but I need to port it to Javascript.. but I don’t understand almost anything about JS. Based on some searches, videos and my old code, assemble the following code in JS, but it does not return me anything:

<!Doctype html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Calculadora de Juros Compostos JS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

    <link rel="stylesheet" href="calculadoras.css">

    <script>
        function calcular_juros_compostos() {
            var investimento_inicial = document.getElementById("investimento_inicial").value;
            var investimento_mensal = document.getElementById("investimento_mensal").value;
            var meses = document.getElementById("meses").value;
            var taxa_de_juros = document.getElementById("taxa_de_juros").value;

            var investimento_inicial = parseFloat("investimento_inicial");
            var investimento_mensal = parseFloat("investimento_mensal");
            var meses = ("meses");
            var taxa_de_juros = parseFloat("taxa_de_juros");

            var investimento_acumulado = investimento_inicial;

            var total_investimento_acumulado = investimento_inicial + (investimento_mensal * meses);

            var juros_compostos = 0;
            var juros_compostos_total = 0;

            for (var i = 0; i < $meses; i++) {
                juros_compostos = (investimento_acumulado + taxa_de_juros) / 100;
                juros_compostos_total += juros_compostos;
                investimento_acumulado += juros_compostos + investimento_mensal;
            }

            var valor_a_receber = total_investimento_acumulado + juros_compostos_total;
        }
    </script>

</head>

<body>
    <div class="container">
        <form class="w-100" method="post" action="">
            <label for="basic-url">Investimento Inicial</label>
            <div class="input-group mb-3 rounded-0">
                <div class="input-group-prepend">
                    <span class="input-group-text rounded-0 bg-warning"><strong>R$</strong></span>
                </div>
                <input class="form-control border border-warning border-top-0 border-right-0 border-left-0" type="number" step="0.01" id="investimento_inicial" min="0.00" max="9999999999.00" required>
            </div>
            <label for="basic-url">Investimento Mensal</label>
            <div class="input-group mb-3 rounded-0">
                <div class="input-group-prepend">
                    <span class="input-group-text rounded-0 bg-warning"><strong>R$</strong></span>
                </div>
                <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" step="0.01" id="investimento_mensal" min="0.00" max="9999999999.00" required>
            </div>
            <label for="basic-url">Por quanto tempo?</label>
            <div class="input-group mb-3 rounded-0">
                <div class="input-group-prepend">
                    <span class="input-group-text rounded-0 bg-warning"><strong>&#x1F550</strong></span>
                </div>
                <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" id="meses" min="1" placeholder="Meses" required>
            </div>
            <label for="basic-url">Juros ao Mês</label>
            <div class="input-group mb-3 rounded-0">
                <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" step="0.01" id="taxa_de_juros" min="0.01" max="9999999999.00" required>
                <div class="input-group-prepend">
                    <span class="input-group-text rounded-0 bg-warning"><strong>%</strong></span>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-warning" type="submit" value="Calcular" onclick="calcular_juros_compostos()">Calcular</button>
            </div>
        </form>

        <script>
            document.getElementById("inicial").innerHTML = investimento_inicial;
            document.getElementById("mensal").innerHTML = investimento_mensal;
            document.getElementById("duracao").innerHTML = meses;
            document.getElementById("tt_investimento").innerHTML = total_investimento_acumulado;
            document.getElementById("juros_recebidos").innerHTML = juros_compostos_total;
            document.getElementById("a_receber").innerHTML = valor_a_receber;
        </script>

        <div class="row d-flex justify-content-center">
            <div class="card" style="width: 15rem;">
                <div class="card-body">
                    <h5 class="card-title">Investimento Inicial</h5>
                    <p class="card-text" id="inicial"><strong>R$</strong></p>
                </div>
            </div>
            <div class="card" style="width: 15rem;">
                <div class="card-body">
                    <h5 class="card-title">Investimento Mensal</h5>
                    <p class="card-text" id="mensal"><strong>R$</strong><br><small id="juros"></small></p>
                </div>
            </div>
            <div class="card" style="width: 15rem;">
                <div class="card-body">
                    <h5 class="card-title">Tempo do Investimento</h5>
                    <p class="card-text" id="duracao"><strong>meses</strong></p>
                </div>
            </div>
            <div class="card" style="width: 15rem;">
                <div class="card-body">
                    <h5 class="card-title">Total do Investimento</h5>
                    <p class="card-text" id="tt_investimento"><strong>R$</strong></p>
                </div>
            </div>
            <div class="card" style="width: 15rem;">
                <div class="card-body">
                    <h5 class="card-title">Juros Recebidos</h5>
                    <p class="card-text" id="juros_recebidos"><strong>R$</strong></p>
                </div>
            </div>
            <div class="card" style="width: 15rem;">
                <div class="card-body">
                    <h5 class="card-title">Valor a Receber c/ Juros</h5>
                    <p class="card-text" id="a_receber"><strong>R$</strong></p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
javascript

1 answer

0


Hello William I took a look at the code and found some problems the first was that you were trying to use the variables outside the function calculate juros_compounds in the case after the form. because they do not exist outside the function.

The second problem was that its variable months no for was with a $ in front.

made the fixes and improvements see if it works.

<!Doctype html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Calculadora de Juros Compostos JS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

    <!-- <link rel="stylesheet" href="calculadoras.css"> -->
</head>

<body>
<script type="text/javascript" defer>
        function calcular_juros_compostos() {
            let investimento_inicial = parseFloat(document.getElementById("investimento_inicial").value);
            let investimento_mensal =  parseFloat(document.getElementById("investimento_mensal").value);
            var meses = parseInt(document.getElementById("meses").value);
            let taxa_de_juros = parseFloat(document.getElementById("taxa_de_juros").value);

            let investimento_acumulado = investimento_inicial;

            var total_investimento_acumulado = investimento_inicial + (investimento_mensal * meses);
    
            let juros_compostos = 0;
            let juros_compostos_total = 0;

            for (let i = 0; i < meses; i++) {
                juros_compostos = (investimento_acumulado + taxa_de_juros) / 100;
                juros_compostos_total += juros_compostos;
                investimento_acumulado += juros_compostos + investimento_mensal;
            }

            var valor_a_receber = total_investimento_acumulado + juros_compostos_total;

            document.getElementById("inicial").innerHTML = investimento_inicial;
            document.getElementById("mensal").innerHTML = investimento_mensal;
            document.getElementById("duracao").innerHTML = meses;
            document.getElementById("tt_investimento").innerHTML = Number(total_investimento_acumulado).toFixed(2);
            document.getElementById("juros_recebidos").innerHTML = Number(juros_compostos_total).toFixed(2);
            document.getElementById("a_receber").innerHTML = Number(valor_a_receber).toFixed(2);


            document.getElementById('formCalc').reset();
            return false;
        }
    </script>
    <div class="container">
        <form class="w-100" method="post" id="formCalc" action="">
            <label for="basic-url">Investimento Inicial</label>
            <div class="input-group mb-3 rounded-0">
                <div class="input-group-prepend">
                    <span class="input-group-text rounded-0 bg-warning"><strong>R$</strong></span>
                </div>
                <input class="form-control border border-warning border-top-0 border-right-0 border-left-0" type="number" step="0.01" id="investimento_inicial" min="0.00" max="9999999999.00" required>
            </div>
            <label for="basic-url">Investimento Mensal</label>
            <div class="input-group mb-3 rounded-0">
                <div class="input-group-prepend">
                    <span class="input-group-text rounded-0 bg-warning"><strong>R$</strong></span>
                </div>
                <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" step="0.01" id="investimento_mensal" min="0.00" max="9999999999.00" required>
            </div>
            <label for="basic-url">Por quanto tempo?</label>
            <div class="input-group mb-3 rounded-0">
                <div class="input-group-prepend">
                    <span class="input-group-text rounded-0 bg-warning"><strong>&#x1F550</strong></span>
                </div>
                <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" id="meses" min="1" placeholder="Meses" required>
            </div>
            <label for="basic-url">Juros ao Mês</label>
            <div class="input-group mb-3 rounded-0">
                <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" step="0.01" id="taxa_de_juros" min="0.01" max="9999999999.00" required>
                <div class="input-group-prepend">
                    <span class="input-group-text rounded-0 bg-warning"><strong>%</strong></span>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-warning" type="click" value="Calcular" onclick="return calcular_juros_compostos()">Calcular</button>
            </div>
        </form>

        <div class="row d-flex justify-content-center">
            <div class="card" style="width: 15rem;">
                <div class="card-body">
                    <h5 class="card-title">Investimento Inicial</h5>
                    <p class="card-text" id="inicial"><strong>R$</strong></p>
                </div>
            </div>
            <div class="card" style="width: 15rem;">
                <div class="card-body">
                    <h5 class="card-title">Investimento Mensal</h5>
                    <p class="card-text" id="mensal"><strong>R$</strong><br><small id="juros"></small></p>
                </div>
            </div>
            <div class="card" style="width: 15rem;">
                <div class="card-body">
                    <h5 class="card-title">Tempo do Investimento</h5>
                    <p class="card-text" id="duracao"><strong>meses</strong></p>
                </div>
            </div>
            <div class="card" style="width: 15rem;">
                <div class="card-body">
                    <h5 class="card-title">Total do Investimento</h5>
                    <p class="card-text" id="tt_investimento"><strong>R$</strong></p>
                </div>
            </div>
            <div class="card" style="width: 15rem;">
                <div class="card-body">
                    <h5 class="card-title">Juros Recebidos</h5>
                    <p class="card-text" id="juros_recebidos"><strong>R$</strong></p>
                </div>
            </div>
            <div class="card" style="width: 15rem;">
                <div class="card-body">
                    <h5 class="card-title">Valor a Receber c/ Juros</h5>
                    <p class="card-text" id="a_receber"><strong>R$</strong></p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

  • Ivan, thanks so much for the help. I don’t know what Javascript is. Could you help me with a little something? when I add the line "Document.getElementById("interest"). innerHTML = tax de_interest;" to be shown in id="interest" when running the calculator, the browser returns error 500

  • Just talking like that makes it hard to talk to you need to analyze the code.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.