Skip to content

Instantly share code, notes, and snippets.

@dantetesta

dantetesta/Calculadora de Financiamento de Veículos.html

Created May 29, 2023 00:38
Show Gist options
  • Save dantetesta/944844c848ea4cccce11443b5ed2db9a to your computer and use it in GitHub Desktop.
Save dantetesta/944844c848ea4cccce11443b5ed2db9a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Calculadora de Financiamento de Veículos.html
<!DOCTYPE html>
<html>
<head>
<title>Simulador de Financiamento de Veículos</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
body {
background-color: #343a40;
color: #fff;
padding: 3% 10% 5% 10%;
}
.table {
color: #fff;
}
.card-container {
margin-top: 20px;
}
.card {
background-color: #fff;
color: #000;
}
.table td {
color: #000;
}
</style>
</head>
<body>
<div class="container">
<h1 class="my-4">Simulador de Financiamento de Veículos</h1>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="valorVeiculo">Qual o valor do veículo desejado?</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">R$</span>
</div>
<input type="text" class="form-control" id="valorVeiculo">
</div>
</div>
<div class="form-group">
<label for="valorEntrada">Valor de entrada:</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">R$</span>
</div>
<input type="text" class="form-control" id="valorEntrada">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group d-flex">
<div class="ml-2">
<label for="taxaJuros">Taxa de juros:</label>
<div class="input-group">
<input type="text" class="form-control" id="taxaJuros">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
</div>
<div class="ml-2">
<label for="taxaTipo">Tipo de taxa:</label>
<select class="form-control" id="taxaTipo">
<option value="mensal">Mensal</option>
<option value="anual">Anual</option>
</select>
</div>
</div>
<div class="col-md-7">
<div class="form-group">
<label for="tempoFinanciamento">Deseja pagar o financiamento em:</label>
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-primary" id="diminuirTempo">-</button>
</div>
<input type="number" class="form-control" id="tempoFinanciamento" min="1" max="120" value="1">
<div class="input-group-append">
<button type="button" class="btn btn-primary" id="aumentarTempo">+</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="btn-group" role="group">
<button id="calcular" class="btn btn-primary">Calcular</button>
<button id="reset" class="btn btn-secondary">Reset</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card" id="resultado" style="display: none;">
<div class="card-body">
<h2 class="card-title">Resultado:</h2>
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div id="resultado-content"></div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script>
$(document).ready(function() {
$('#valorVeiculo, #valorEntrada').mask('#.##0,00', {reverse: true});
$('#taxaJuros').mask('##0,00', {reverse: true});
$("#tempoFinanciamento").attr('max', 240);
$("#tempoFinanciamento").on('input', function() {
$('#tempoFinanciamentoValor').text($(this).val());
});
$("#aumentarTempo").click(function() {
var tempoAtual = parseInt($("#tempoFinanciamento").val());
if (tempoAtual < 120) {
$("#tempoFinanciamento").val(tempoAtual + 1);
$('#tempoFinanciamentoValor').text(tempoAtual + 1);
}
});
$("#diminuirTempo").click(function() {
var tempoAtual = parseInt($("#tempoFinanciamento").val());
if (tempoAtual > 1) {
$("#tempoFinanciamento").val(tempoAtual - 1);
$('#tempoFinanciamentoValor').text(tempoAtual - 1);
}
});
$("#calcular").click(function() {
$("#resultado").show();
$("#resultado-content").html('<div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div>');
setTimeout(function() {
var valorVeiculo = parseFloat($("#valorVeiculo").val().replace(/\./g, '').replace(',', '.'));
var valorEntrada = parseFloat($("#valorEntrada").val().replace(/\./g, '').replace(',', '.'));
var taxaJuros = parseFloat($("#taxaJuros").val().replace(/\./g, '').replace(',', '.')) / 100;
if ($("#taxaTipo").val() === "anual") {
taxaJuros = taxaJuros / 12;
}
var tempoFinanciamento = parseFloat($("#tempoFinanciamento").val());
var valorFinanciado = valorVeiculo - valorEntrada;
var pagamentoMensal = valorFinanciado * taxaJuros / (1 - Math.pow(1 + taxaJuros, -tempoFinanciamento));
var totalPago = pagamentoMensal * tempoFinanciamento;
var jurosDevidos = totalPago - valorFinanciado;
var html = `<table class="table">
<tr>
<td>Pagamento mensal estimado</td>
<td>R$ ${pagamentoMensal.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')}</td>
</tr>
<tr>
<td>Total pago no financiamento</td>
<td>R$ ${totalPago.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')}</td>
</tr>
<tr>
<td>Valor financiado</td>
<td>R$ ${valorFinanciado.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')}</td>
</tr>
<tr>
<td>Juros devidos</td>
<td>R$ ${jurosDevidos.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')}</td>
</tr>
</table>`;
$("#resultado-content").html(html);
$(".spinner-border").hide(); // Remover o spinner após o cálculo
}, 2000);
});
$("#reset").click(function() {
$("#valorVeiculo").val('');
$("#valorEntrada").val('');
$("#taxaJuros").val('');
$("#taxaTipo").val('mensal');
$("#tempoFinanciamento").val('1');
$("#tempoFinanciamentoValor").text('1');
$("#resultado").hide();
$("#resultado-content").html('');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment