Calculator Tools Calculator Tools
Create

Calculadora de Interés Compuesto

Sep 22, 2023

About this app

Calculadora de Interés Compuesto

Calculadora de Interés Compuesto Calculadora de Interés Compuesto Número de Días: Capital Inicial: Tasa de Interés (%): Calcular

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Calculadora de Interés Compuesto</title>
<meta name="description" content="Calculadora de Interés Compuesto">
<meta name="keywords" content="interés compuesto, calculadora, finanzas">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript">
try {
// App JavaScript
document.addEventListener("DOMContentLoaded", function() {
// Event Listener for Form Submission
$("#interest-form").submit(function(event) {
event.preventDefault();
calculateCompoundInterest();
});

// Function to Calculate Compound Interest
function calculateCompoundInterest() {
// Get Input Values
var days = parseInt($("#days").val());
var principal = parseFloat($("#principal").val());
var interestRate = parseFloat($("#interest-rate").val()) / 100;
var compoundInterest = principal * Math.pow((1 + interestRate), days);

// Display Result
$("#result").text("El interés compuesto es: " + compoundInterest.toFixed(2));
}
});

} catch (error) {
throw error;
}
</script>

<style>
body {
background-color: #f8f9fa;
font-family: 'Roboto', sans-serif;
}

h1 {
color: #343a40;
margin-top: 40px;
margin-bottom: 30px;
text-align: center;
}

.form-label {
font-weight: bold;
color: #343a40;
}

.form-control {
border-color: #343a40;
}

.btn-primary {
background-color: #343a40;
border-color: #343a40;
}

.btn-primary:hover {
background-color: #23272b;
border-color: #23272b;
}

#result {
color: #343a40;
font-weight: bold;
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Calculadora de Interés Compuesto</h1>

<form id="interest-form">
<div class="mb-3">
<label for="days" class="form-label">Número de Días:</label>
<input type="number" class="form-control" id="days" required>
</div>
<div class="mb-3">
<label for="principal" class="form-label">Capital Inicial:</label>
<input type="number" class="form-control" id="principal" required>
</div>
<div class="mb-3">
<label for="interest-rate" class="form-label">Tasa de Interés (%):</label>
<input type="number" class="form-control" id="interest-rate" required>
</div>
<button type="submit" class="btn btn-primary">Calcular</button>
</form>

<div id="result"></div>
</div>
</body>
</html>