Está en la página 1de 84

Integrantes:

Bahiron Bonilla
Heli Cadena
Jesus Mora
Sergio Ariza

link de github: https://github.com/BahironBonilla/ing.Economica.git

Estructura de los archivos:


ingEconomica
|amortizacion
|menuAmortizacion.css
|menuAmortizacion.html
|menuAmortizacion.js
|sistemaAleman.html
|sistemaAleman.js
|sistemaAmericano.html
|sistemaAmericano.js
|sistemaFrances.html
|sistemaFrances.js
|style.css
|assets
|gradiente
|Aritmetico
|anualidad
|anualidadValorFinal
|anualidadAritmetica.css
|anualidadAritmetica.html
|anualidadAritmetica.js
|anualidadValorPresente
|anualidadAritmetica.css
|anualidadAritmetica.html
|anualidadAritmetica.js
|anualidad.html
|elementoN
|elementoN.css
|elementoN.html
|elementoN.js
|gradiente
|gradienteValorFinal
|gradienteAritmetica.css
|gradienteAritmetica.html
|gradienteAritmetica.js
|gradienteValorPresente
|gradienteAritmetica.css
|gradienteAritmetica.html
|gradienteAritmetica.js
|anualidad.html
|valorFuturo
|valorFuturoAritmetico.css
|valorFuturoAritmetico.html
|valorFuturoAritmetico.js
|valorPresente
|valorPresenteAritmetico.css
|valorPresenteAritmetico.html
|valorPresenteAritmetico.js
|velorPresentePerpetuo
|valorPresentePerpetuo.css
|valorPresentePerpetuo.html
|valorPresentePerpetuo.js
|Geometrica
|elementoN
|elementoN.css
|elementoN.html
|elementoN.js
|valorFuturo
|valorFuturoGeometrico.css
|valorFuturoGeometrico.html
|valorFuturoGeometrico.js
|valorPresente
|valorPresenteGeometrico.css
|valorPresenteGeometrico.html
|valorPresenteGeometrico.js
|valorPresentePerpetuo
|valorPresentePerpetuo.css
|valorPresentePerpetuo.html
|valorPresentePerpetuo.js
|aritmetica.html
|geometrica.html
|gradiente.css
|gradiente.html
|gradiente.js
|interes compuesto
|index.html
|interesCompuesto.css
|interesCompuesto.html
|interesCompuesto.js
|script.js
|styles.css
|interes simple
|interesSimple.css
|interesSimple.html
|interesSimple.js
|index.css
|index.html
|index.js
//-----------------------CODIGO----------------------------------------//
ingEconomica
|amortizacion
|menuAmortizacion.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.body {
background-color: rgba(86, 130, 195, 1);
}

.h1 {
text-align: center;
color: white;
padding-bottom: 50px;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 47%);
gap: 5px;
width: 60%;
height:200px;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;

justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
}
.Aleman,.Americano,.Frances {
width: 90%;
height: 90%;
background-color: rgba(64, 86, 164, 0.31);
border-color: transparent;
color: white;
font-size: large;
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5);
}
.Aleman {
border-top-left-radius: 20px;
border-radius: 20px;
margin: 10px;
}
.Aleman:hover {
opacity: 0.5;
transform: translateY(-30px);
transition: 0.5s;
}
.Americano {
border-top-right-radius: 20px;
border-radius: 20px;
margin: 10px;
}
.Americano:hover {
opacity: 0.5;
transform: translateY(-30px);
transition: 0.5s;
}

.Frances {
border-bottom-right-radius: 20px;
border-radius: 20px;
margin: 10px;
}
.Frances:hover {
opacity: 0.5;
transform: translateY(-30px);
transition: 0.5s;
}

------------------------------------------------------------------------
|menuAmortizacion.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="es">

<head>
<title>Ing. Economica</title>
<link rel="stylesheet" href="menuAmortizacion.css">
</head>

<body class="body">
<h1 class="h1">Sistemas de Amortizacion</h1>

<div class="container">
<button class="Aleman"
onclick="redireccionar('sistemaAleman.html')">Sistema Aleman</button>
<button class="Americano"
onclick="redireccionar('sistemaAmericano.html')">Sistema Americano</button>
<button class="Frances" onclick =
"redireccionar('sistemaFrances.html')">Sistema Frances</button>

</div>
<script src="menuAmortizacion.js"></script>
</body>

</html>
------------------------------------------------------------------------
|menuAmortizacion.js
------------------------------------------------------------------------
function redireccionar(url) {
window.location.href = url;
}
------------------------------------------------------------------------
|sistemaAleman.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="es">

<head>
<title>Ing. Economica</title>
<link rel="stylesheet" href="style.css">
</head>

<body class="body">
<h1 class="h1">Sistema de amortizacion Aleman</h1>

<div>
<p class="h3"> Ingrese lo sigientes datos</p>
</div>
<div class="container">
<form class="formulario" id="formularioAleman">
<div>
<label for="monto" class="label">Monto Total a pagar</label>
<input id="monto" name="monto" type="number" min="1" class="texto"
placeholder="A pagar">
</div>
<div>
<label for="tasaInteres" class="label">Tasa de interes</label>
<input id="tasaInteres" name="tasaInteres" type="number" min="0"
max="100" class="texto"
placeholder="0-100">
</div>
<div>
<label for="periodos" class="label">Numero de periodos</label>
<input id="periodos" name="periodos" type="number" min="1"
class="texto" placeholder="Cuotas">
</div>

</div>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Calcular</button>
</div>
</form>

<div style="padding: 5px;"></div>


<div class="resultado">
<div class="tabla">
<table id="calculoAmortizacionTable">
<tr>
<th>Numero de Cuota</th>
<th>Monto inicial</th>
<th>Monto final</th>
<th>Capital</th>
<th>Interes</th>
<th>Cuota a pagar</th>
<th>Total</th>
</tr>
<tr>

</tr>
<br>
</table>
</div>

</div>
<script src="sistemaAleman.js"></script>
</body>

</html>
------------------------------------------------------------------------
|sistemaAleman.js
------------------------------------------------------------------------
const form = document.getElementById("formularioAleman");
var datosFormulario
var tablaAmotizacionAleman = document.getElementById("calculoAmortizacionTable");

form.addEventListener("submit", function (event) {


event.preventDefault();

tablaAmotizacionAleman.innerHTML = "";
var formularioData = new FormData(form);
var periodos = parseInt(formularioData.get("periodos"));
var montoInicial = parseInt(formularioData.get("monto"));
var tasaInteres = parseInt(formularioData.get("tasaInteres"));

const numeroPeriodos = periodos;


const monto = montoInicial;
const descuento = monto / numeroPeriodos;

var nuevoCalculoAmortizacion = tablaAmotizacionAleman.insertRow(-1);


var nuevaCelda = nuevoCalculoAmortizacion.insertCell(0);
nuevaCelda.textContent = 'Numero de Cuota';
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(1);
nuevaCelda.textContent = 'Monto Inicial';
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(2);
nuevaCelda.textContent = 'Monto Final';
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(3);
nuevaCelda.textContent = 'Capital';
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(4);
nuevaCelda.textContent = 'Interes';
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(5);
nuevaCelda.textContent = 'Cuota a Pagar';
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(6);
nuevaCelda.textContent = 'Total';

console.log(periodos);
for (i = 1; i <= periodos; i++) {
var interes = (montoInicial * (tasaInteres / 100));
var cuota = interes + descuento;

var nuevoCalculoAmortizacion = tablaAmotizacionAleman.insertRow(-1);


var nuevaCelda = nuevoCalculoAmortizacion.insertCell(0);
nuevaCelda.textContent = i;
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(1);
nuevaCelda.textContent = montoInicial.toFixed(2);
montoInicial = montoInicial - descuento;
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(2);
nuevaCelda.textContent = montoInicial.toFixed(2);
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(3);
nuevaCelda.textContent = descuento * -1;
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(4);
nuevaCelda.textContent = interes.toFixed(2);
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(5);
nuevaCelda.textContent = cuota.toFixed(2);
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(6);
nuevaCelda.textContent = montoInicial.toFixed(2);
}
})
------------------------------------------------------------------------
|sistemaAmericano.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="es">

<head>
<title>Ing. Economica</title>
<link rel="stylesheet" href="style.css">
</head>

<body class="body">
<h1 class="h1">Sistema de amortizacion Americano</h1>

<div>
<p class="h3"> Ingrese lo sigientes datos</p>
</div>
<div class="container">
<form class="formulario" id="formularioFrances">
<div>
<label for="monto" class="label">Monto Total a pagar</label>
<input id="monto" name="monto" type="number" min="1" class="texto"
placeholder="A pagar">
</div>
<div>
<label for="tasaInteres" class="label">Tasa de interes</label>
<input id="tasaInteres" name="tasaInteres" type="number" min="0"
max="100" class="texto"
placeholder="0-100">
</div>
<div>
<label for="periodos" class="label">Numero de periodos</label>
<input id="periodos" name="periodos" type="number" min="1"
class="texto" placeholder="Cuotas">
</div>

</div>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="">Calcular</button>
</div>
</form>

<div style="padding: 5px;"></div>


<div class="resultado">
<div class="tabla">
<table id="calculoAmortizacionTable">
<tr>
<th>Numero de Cuota</th>
<th>Interes</th>
<th>Cuota a pagar</th>
<th>Capital Residual</th>
</tr>
<tr>

</tr>
<br>
</table>
</div>

</div>
<script src="sistemaAmericano.js"></script>
</body>

</html>
------------------------------------------------------------------------
|sistemaAmericano.js
------------------------------------------------------------------------
const form = document.getElementById("formularioFrances");
var datosFormulario
var tablaAmotizacionAleman = document.getElementById("calculoAmortizacionTable");

form.addEventListener("submit", function (event) {


event.preventDefault();
tablaAmotizacionAleman.innerHTML = "";
var formularioData = new FormData(form);
var periodos = parseInt(formularioData.get("periodos"));
var montoInicial = parseInt(formularioData.get("monto"));
var tasaInteres = parseInt(formularioData.get("tasaInteres"));

const numeroPeriodos = periodos;


const monto = montoInicial;

var nuevoCalculoAmortizacion = tablaAmotizacionAleman.insertRow(-1);


var nuevaCelda = nuevoCalculoAmortizacion.insertCell(0);
nuevaCelda.textContent = 'Numero de Cuota';
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(1);
nuevaCelda.textContent = 'Interes';
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(2);
nuevaCelda.textContent = 'Cuota a Pagar';
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(3);
nuevaCelda.textContent = 'Capital Residual';

console.log(periodos);
for (i = 1; i <= periodos; i++) {

var interes = (montoInicial * (tasaInteres / 100));


var cuotaPagar = interes;
var nuevoCalculoAmortizacion = tablaAmotizacionAleman.insertRow(-1);
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(0);
nuevaCelda.textContent = i;

if (i < numeroPeriodos) {
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(1);
nuevaCelda.textContent = interes.toFixed(2);
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(2);
nuevaCelda.textContent = cuotaPagar.toFixed(2);
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(3);
nuevaCelda.textContent = montoInicial.toFixed(2);
} else {
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(1);
nuevaCelda.textContent = interes.toFixed(2);

var nuevaCelda = nuevoCalculoAmortizacion.insertCell(2);


cuotaPagar = cuotaPagar + montoInicial;
nuevaCelda.textContent = cuotaPagar.toFixed(2);

var nuevaCelda = nuevoCalculoAmortizacion.insertCell(3);


montoInicial = 0;
nuevaCelda.textContent = montoInicial.toFixed(2);
}
/* var nuevaCelda=nuevoCalculoAmortizacion.insertCell(5);
nuevaCelda.textContent= cuota;
var nuevaCelda=nuevoCalculoAmortizacion.insertCell(6);
nuevaCelda.textContent=montoInicial ;*/
}
})
------------------------------------------------------------------------
|sistemaFrances.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ing. Economica</title>
<link rel="stylesheet" href="style.css">
</head>

<body class="body">
<h1 class="h1">Sistema de amortizacion Frances</h1>

<div>
<p class="h3"> Ingrese lo sigientes datos</p>
</div>
<div class="container">
<form class="formulario" id="formularioFrances">
<div>
<label for="monto" class="label">Monto Total a pagar</label>
<input id="monto" name="monto" type="number" min="1" class="texto"
placeholder="A pagar">
</div>
<div>
<label for="tasaInteres" class="label">Tasa de interes</label>
<input id="tasaInteres" name="tasaInteres" type="number" min="0"
max="100" class="texto"
placeholder="0-100">
</div>
<div>
<label for="periodos" class="label">Numero de periodos</label>
<input id="periodos" name="periodos" type="number" min="1"
class="texto" placeholder="Cuotas">
</div>

</div>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="">Calcular</button>
</div>
</form>

<div style="padding: 5px;"></div>


<div class="resultado">
<div class="tabla">
<table id="calculoAmortizacionTable">
<tr>
<th>Numero de Cuota</th>
<th>Capital</th>
<th>Interes</th>
<th>Cuota a pagar</th>
<th>Capital Residual</th>
</tr>
<tr>

</tr>
<br>
</table>
</div>

</div>
<script src="sistemaFrances.js"></script>
</body>

</html>
------------------------------------------------------------------------
|sistemaFrances.js
------------------------------------------------------------------------
const form = document.getElementById("formularioFrances");
var datosFormulario
var tablaAmotizacionAleman = document.getElementById("calculoAmortizacionTable");

form.addEventListener("submit", function (event) {


event.preventDefault();

tablaAmotizacionAleman.innerHTML = "";
var formularioData = new FormData(form);
var periodos = parseInt(formularioData.get("periodos"));
var montoInicial = parseInt(formularioData.get("monto"));
var tasaInteres = parseInt(formularioData.get("tasaInteres"));

const numeroPeriodos = periodos;


const monto = montoInicial;

const descuento = monto / numeroPeriodos;

var nuevoCalculoAmortizacion = tablaAmotizacionAleman.insertRow(-1);


var nuevaCelda = nuevoCalculoAmortizacion.insertCell(0);
nuevaCelda.textContent = 'Numero de Cuota';
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(1);
nuevaCelda.textContent = 'Capital';
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(2);
nuevaCelda.textContent = 'Interes';
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(3);
nuevaCelda.textContent = 'Cuota a pagar';
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(4);
nuevaCelda.textContent = 'Capital Residual';

console.log(periodos);
for (let i = 1; i <= periodos; i++) {

var interes = montoInicial - (montoInicial * (1 + (tasaInteres / 100)));


var cuota = interes + descuento;
var cuotaPagar = (monto * (tasaInteres / 100)) / (1 - Math.pow(1 +
(tasaInteres / 100), -numeroPeriodos));
var nuevoCalculoAmortizacion = tablaAmotizacionAleman.insertRow(-1);
var nuevaCelda = nuevoCalculoAmortizacion.insertCell(0);
nuevaCelda.textContent = i;

var nuevaCelda = nuevoCalculoAmortizacion.insertCell(1);


var capital = cuotaPagar + interes;
nuevaCelda.textContent = capital.toFixed(2);

var nuevaCelda = nuevoCalculoAmortizacion.insertCell(2);


nuevaCelda.textContent = interes.toFixed(2);

var nuevaCelda = nuevoCalculoAmortizacion.insertCell(3);


nuevaCelda.textContent = cuotaPagar.toFixed(2);

montoInicial = montoInicial - capital;


var nuevaCelda = nuevoCalculoAmortizacion.insertCell(4);
nuevaCelda.textContent = montoInicial.toFixed(2);
/* var nuevaCelda=nuevoCalculoAmortizacion.insertCell(5);
nuevaCelda.textContent= cuota;
var nuevaCelda=nuevoCalculoAmortizacion.insertCell(6);
nuevaCelda.textContent=montoInicial ;*/
}
})

------------------------------------------------------------------------
|style.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);

}
.formulario{
gap: 50px;
margin: auto;
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;

}
.label {
color: white;
display: flex;

}
.texto {
height: 30px;
width: 150px;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;

}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);

}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 50;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
table{
border: 1px solid white;
color: white;
border-collapse: separate;
border-spacing: 0px;
min-width: max-content;
}
th{
position: sticky;

}
.table-wrapper{
max-height: 300px;
overflow-y: scroll;
margin: 20px;
}
th, td{
border: 1px solid white;
padding: 10px;
}
.outer-wreapper{
border: 1px solid black;
box-shadow: 0px 0px 3px black;
margin: 20px;

}
------------------------------------------------------------------------
|assets
|gradiente
|Aritmetico
|anualidad
|anualidadValorFinal
|anualidadAritmetica.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h2 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;

}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|anualidadAritmetica.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="anualidadAritmetica.css">
</head>
<body class="body">
<h1 class="h1">Anualidad Aritmetico</h1>
<h2 class="h2">En base al valor futuro</h2>
<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<form class="container">
<div>
<label for="" class="label">Tiempo</label>
<input id="tiempo" type="number" min="0" class="texto" placeholder="En
meses" required>
</div>
<div>
<label for="" class="label">Tasa de interes</label>
<input id="interes" type="number" min="0" max="100" class="texto"
placeholder="0..100" required>
</div>
<div>
<label for="" class="label">Valor Final</label>
<input id="valor" type="number" min="0" class="texto"
placeholder="Valor final" required>
</div>
<div>
<label for="" class="label">Gradiente</label>
<input id="gradiente" type="number" min="0" class="texto"
placeholder="Gradiente" required>
</div>
<div>
<label for="" class="label">Tipo de gradiente</label>
<div>
<input value="creciente" class="" type="radio" name="tipoGradiente"
id="tipoGradiente1"checked required>
<label class="label" for="tipoGradiente1">Creciente</label>
<input value="decreciente" class=" " type="radio"
name="tipoGradiente" id="tipoGradiente2" required>
<label class="label" for="tipoGradiente2">Decreciente</label>
</div>

</div>

</form>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="anualidadAritmetica.js"></script>

</body>
</html>
------------------------------------------------------------------------
|anualidadAritmetica.js
------------------------------------------------------------------------
let tiempo = document.getElementById("tiempo");
let interes = document.getElementById("interes");
let valor = document.getElementById("valor");
let final = document.getElementById("final");
let gradiente = document.getElementById("gradiente");
let p = document.getElementById("p");
let tipo = document.getElementById("tipoGradiente1").value;
let tipo2 = document.getElementById("tipoGradiente2").value;

function validar() {
let opcion = $("input:radio[name=tipoGradiente]:checked").val();
console.log(opcion);

if (opcion == "creciente") {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Valor final(P): $" +
valor.value +
" | Gradiente(g): $" +
gradiente.value +
" | Creciente" +
"<br><br>" +
"La anualidad en base al valor final de este problema es: $" +
calcularAnualidadCreciente(
valor.value,
interes.value,
tiempo.value,
gradiente.value
);
} else {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Valor final(P): $" +
valor.value +
" | Gradiente(g): $" +
gradiente.value +
" | Decreciente" +
"<br><br>" +
"La anualidad en base al valor final de este problema es: $" +
calcularAnualidadDecreciente(
valor.value,
interes.value,
tiempo.value,
gradiente.value
);
}

document.getElementById("tiempo").value = null;
document.getElementById("interes").value = null;
document.getElementById("valor").value = null;
document.getElementById("gradiente").value = null;
}

function calcularAnualidadCreciente(valor, interes, tiempo, gradiente) {


interes = interes / 100
console.log( interes,"interes");
valor = parseInt(valor)

let potencia = Math.pow(1 + interes, tiempo)


console.log(potencia);
let primeraParte = (potencia-1)/interes
let segundaParte = primeraParte - tiempo
let terceraParte = primeraParte
let cuartaParte = (gradiente/interes)*segundaParte
let quintaParte = valor - cuartaParte
let sestaParte = quintaParte / terceraParte

console.log(potencia,"potencia");
console.log(cuartaParte,"cuarta parte g/i * resto");
console.log(primeraParte,"primera ");
console.log(segundaParte,"segunda ");
anualidad = sestaParte

return anualidad.toFixed(2);
}
function calcularAnualidadDecreciente(valor, interes, tiempo, gradiente) {
interes = interes / 100
console.log( interes,"interes");
valor = parseInt(valor)
let potencia = Math.pow(1 + interes, tiempo)
console.log(potencia);
let primeraParte = (potencia-1)/interes
let segundaParte = primeraParte - tiempo
let terceraParte = primeraParte
let cuartaParte = (gradiente/interes)*segundaParte
let quintaParte = valor + cuartaParte
let sestaParte = quintaParte / terceraParte

console.log(potencia,"potencia");
console.log(cuartaParte,"cuarta parte g/i * resto");
console.log(primeraParte,"primera ");
console.log(segundaParte,"segunda ");

console.log(quintaParte);
console.log(terceraParte);
anualidad = sestaParte

return anualidad.toFixed(2);
}

------------------------------------------------------------------------
|anualidadValorPresente
|anualidadAritmetica.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h2 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;

}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|anualidadAritmetica.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="anualidadAritmetica.css">
</head>
<body class="body">
<h1 class="h1">Anualidad Aritmetico</h1>
<h2 class="h2">En base al valor presente</h2>
<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<form class="container">
<div>
<label for="" class="label">Tiempo</label>
<input id="tiempo" type="number" min="0" class="texto" placeholder="En
meses" required>
</div>
<div>
<label for="" class="label">Tasa de interes</label>
<input id="interes" type="number" min="0" max="100" class="texto"
placeholder="0..100" required>
</div>
<div>
<label for="" class="label">Valor Presente</label>
<input id="valor" type="number" min="0" class="texto"
placeholder="Valor presente" required>
</div>
<div>
<label for="" class="label">Gradiente</label>
<input id="gradiente" type="number" min="0" class="texto"
placeholder="Gradiente" required>
</div>

<div>
<label for="" class="label">Tipo de gradiente</label>
<div>
<input value="creciente" class="" type="radio" name="tipoGradiente"
id="tipoGradiente1"checked required>
<label class="label" for="tipoGradiente1">Creciente</label>
<input value="decreciente" class=" " type="radio"
name="tipoGradiente" id="tipoGradiente2" required>
<label class="label" for="tipoGradiente2">Decreciente</label>
</div>

</div>

</form>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="anualidadAritmetica.js"></script>

</body>
</html>
------------------------------------------------------------------------
|anualidadAritmetica.js
------------------------------------------------------------------------
let tiempo = document.getElementById("tiempo");
let interes = document.getElementById("interes");
let valor = document.getElementById("valor");
let final = document.getElementById("final");
let gradiente = document.getElementById("gradiente");
let p = document.getElementById("p");
let tipo = document.getElementById("tipoGradiente1").value;
let tipo2 = document.getElementById("tipoGradiente2").value;
function validar() {
let opcion = $("input:radio[name=tipoGradiente]:checked").val();
console.log(opcion);

if (opcion == "creciente") {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Valor presente(P): $" +
valor.value +
" | Gradiente(g): $" +
gradiente.value +
" | Creciente" +
"<br><br>" +
"La anualidad en base al valor presente de este problema es: $" +
calcularAnualidadCreciente(
valor.value,
interes.value,
tiempo.value,
gradiente.value
);
} else {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Valor presente(P): $" +
valor.value +
" | Gradiente(g): $" +
gradiente.value +
" | Decreciente" +
"<br><br>" +
"La anualidad en base al valor presente de este problema es: $" +
calcularAnualidadDecreciente(
valor.value,
interes.value,
tiempo.value,
gradiente.value
);
}

document.getElementById("tiempo").value = null;
document.getElementById("interes").value = null;
document.getElementById("valor").value = null;
document.getElementById("gradiente").value = null;
}

function calcularAnualidadCreciente(valor, interes, tiempo, gradiente) {


interes = interes / 100
console.log( interes,"interes");
valor = parseInt(valor)
let potencia = Math.pow(1 + interes, -tiempo)
let potencia2 = Math.pow(1 + interes, tiempo)
console.log(potencia);
console.log(potencia2);
let primeraParte = (1-potencia)/interes
let segundaParte = primeraParte - (tiempo/potencia2)
let terceraParte = primeraParte
let cuartaParte = (gradiente/interes)*segundaParte
let quintaParte = valor - cuartaParte
let sestaParte = quintaParte / terceraParte

console.log(potencia,"potencia");
console.log(cuartaParte,"cuarta parte g/i * resto");
console.log(primeraParte,"primera ");
console.log(segundaParte,"segunda ");
anualidad = sestaParte

return anualidad.toFixed(2);
}
function calcularAnualidadDecreciente(valor, interes, tiempo, gradiente) {
interes = interes / 100
console.log( interes,"interes");
valor = parseInt(valor)
let potencia = Math.pow(1 + interes, -tiempo)
let potencia2 = Math.pow(1 + interes, tiempo)
console.log(potencia);
console.log(potencia2);
let primeraParte = (1-potencia)/interes
let segundaParte = primeraParte - (tiempo/potencia2)
let terceraParte = primeraParte
let cuartaParte = (gradiente/interes)*segundaParte
let quintaParte = valor + cuartaParte
let sestaParte = quintaParte / terceraParte

console.log(potencia,"potencia");
console.log(cuartaParte,"cuarta parte g/i * resto");
console.log(primeraParte,"primera ");
console.log(segundaParte,"segunda ");
anualidad = sestaParte

return anualidad.toFixed(2);
}

------------------------------------------------------------------------
|anualidad.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ing. Economica</title>
<link rel="stylesheet" href="./../../gradiente.css" />
</head>

<body class="body">
<h1 class="h1">Gradientes</h1>
<h2 class="h2">Anualidad</h2>

<div class="container">
<button class="simple"
onclick="redireccionar('./anualidadValorFinal/anualidadAritmetica.html')">En base
al valor futuro</button>
<button class="simple"
onclick="redireccionar('./anualidadValorPresente/anualidadAritmetica.html')">En
base al valor presente</button>
</div>
<script src="./../../gradiente.js"></script>
</body>
</html>
------------------------------------------------------------------------
|elementoN
|elementoN.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;

}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|elementoN.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="elementoN.css">
</head>
<body class="body">
<h1 class="h1">Elemento N Aritmetico</h1>
<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<form class="container">
<div>
<label for="" class="label">Cuota</label>
<input id="tiempo" type="number" min="0" class="texto"
placeholder="Numero de la cuota" required>
</div>

<div>
<label for="" class="label">Monto inicial</label>
<input id="inicial" type="number" min="0" class="texto"
placeholder="Monto inicial" required>
</div>
<div>
<label for="" class="label">Gradiente</label>
<input id="gradiente" type="number" min="0" class="texto"
placeholder="Gradiente" required>
</div>

<div>
<label for="" class="label">Tipo de gradiente</label>
<div>
<input value="creciente" class="" type="radio" name="tipoGradiente"
id="tipoGradiente1"checked required>
<label class="label" for="tipoGradiente1">Creciente</label>
<input value="decreciente" class=" " type="radio"
name="tipoGradiente" id="tipoGradiente2" required>
<label class="label" for="tipoGradiente2">Decreciente</label>
</div>

</div>

</form>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="elementoN.js"></script>

</body>
</html>
------------------------------------------------------------------------
|elementoN.js
------------------------------------------------------------------------
let tiempo = document.getElementById("tiempo");
let inicial = document.getElementById("inicial");
let gradiente = document.getElementById("gradiente");
let p = document.getElementById("p");
let tipo = document.getElementById("tipoGradiente1").value;
let tipo2 = document.getElementById("tipoGradiente2").value;
function validar() {
let opcion = $("input:radio[name=tipoGradiente]:checked").val();
console.log(opcion);

if (opcion == "creciente") {
p.innerHTML =
"Cuota(n): " +
tiempo.value +
" | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): $" +
gradiente.value +
" | Creciente" +
"<br><br>" +
"El Valor a pagar en la Cuota " +
tiempo.value +
" es: $" +
calcularElementoNCreciente(inicial.value, tiempo.value, gradiente.value);
} else {
p.innerHTML =
"Cuota(n): " +
tiempo.value +
" | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): $" +
gradiente.value +
" | Decreciente" +
"<br><br>" +
"El Valor a pagar en la Cuota " +
tiempo.value +
" es: $" +
calcularElementoNDecreciente(
inicial.value,
tiempo.value,
gradiente.value
);
}

document.getElementById("tiempo").value = null;
document.getElementById("inicial").value = null;
document.getElementById("gradiente").value = null;
}

function calcularElementoNCreciente(inicial, tiempo, gradiente) {


inicial = parseInt(inicial)
valorElementoN = inicial + (tiempo - 1) * gradiente;

return valorElementoN;
}
function calcularElementoNDecreciente(inicial, tiempo, gradiente) {
inicial = parseInt(inicial)

valorElementoN = inicial + (tiempo - 1) * -gradiente;

return valorElementoN;
}

------------------------------------------------------------------------
|gradiente
|gradienteValorFinal
|gradienteAritmetica.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h2 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;

}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|gradienteAritmetica.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="gradienteAritmetica.css">
</head>
<body class="body">
<h1 class="h1">Gradiente Aritmetico</h1>
<h2 class="h2">En base al valor futuro</h2>
<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<form class="container">
<div>
<label for="" class="label">Tiempo</label>
<input id="tiempo" type="number" min="0" class="texto" placeholder="En
meses" required>
</div>
<div>
<label for="" class="label">Tasa de interes</label>
<input id="interes" type="number" min="0" max="100" class="texto"
placeholder="0..100" required>
</div>
<div>
<label for="" class="label">Valor Final</label>
<input id="valor" type="number" min="0" class="texto"
placeholder="Valor final" required>
</div>
<div>
<label for="" class="label">Anualidad</label>
<input id="anualidad" type="number" min="0" class="texto"
placeholder="Anualidad" required>
</div>

<div>
<label for="" class="label">Tipo de gradiente</label>
<div>
<input value="creciente" class="" type="radio" name="tipoGradiente"
id="tipoGradiente1"checked required>
<label class="label" for="tipoGradiente1">Creciente</label>
<input value="decreciente" class=" " type="radio"
name="tipoGradiente" id="tipoGradiente2" required>
<label class="label" for="tipoGradiente2">Decreciente</label>
</div>

</div>

</form>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="gradienteAritmetica.js"></script>

</body>
</html>
------------------------------------------------------------------------
|gradienteAritmetica.js
------------------------------------------------------------------------
let tiempo = document.getElementById("tiempo");
let interes = document.getElementById("interes");
let valor = document.getElementById("valor");
let final = document.getElementById("final");
let anualidad = document.getElementById("anualidad");
let p = document.getElementById("p");
let tipo = document.getElementById("tipoGradiente1").value;
let tipo2 = document.getElementById("tipoGradiente2").value;
function validar() {
let opcion = $("input:radio[name=tipoGradiente]:checked").val();
console.log(opcion);

if (opcion == "creciente") {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Valor final(P): $" +
valor.value +
" | Anualidad(g): $" +
anualidad.value +
" | Creciente" +
"<br><br>" +
"La gradiente en base al valor final de este problema es: $" +
calcularAnualidadCreciente(
valor.value,
interes.value,
tiempo.value,
anualidad.value
);
} else {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Valor final(P): $" +
valor.value +
" | Anualidad(g): $" +
anualidad.value +
" | Decreciente" +
"<br><br>" +
"La gradiente en base al valor final de este problema es: $" +
calcularAnualidadDecreciente(
valor.value,
interes.value,
tiempo.value,
anualidad.value
);
}

document.getElementById("tiempo").value = null;
document.getElementById("interes").value = null;
document.getElementById("valor").value = null;
document.getElementById("anualidad").value = null;
}

function calcularAnualidadCreciente(valor, interes, tiempo, anualidad) {


interes = interes / 100;
console.log(interes, "interes");
valor = parseInt(valor);
anualidad = parseInt(anualidad);

let potencia = Math.pow(1 + interes, tiempo);


let primeraParte = (potencia - 1) / interes;
let segundaParte = anualidad * primeraParte;
let parteSuperior = valor - segundaParte;
let terceraParte = primeraParte - tiempo;
let cuartaParte = 1 / interes;
let parteInferior = cuartaParte * terceraParte;

gradiente = parteSuperior / parteInferior;

return gradiente.toFixed(2);
}

function calcularAnualidadDecreciente(valor, interes, tiempo, anualidad) {


interes = interes / 100;
console.log(interes, "interes");
valor = parseInt(valor);
anualidad = parseInt(anualidad);

let potencia = Math.pow(1 + interes, tiempo);


let primeraParte = (potencia - 1) / interes;
let segundaParte = anualidad * primeraParte;
let parteSuperior = valor + segundaParte;
let terceraParte = primeraParte - tiempo;
let cuartaParte = 1 / interes;
let parteInferior = cuartaParte * terceraParte;
console.log(parteSuperior);
console.log(parteInferior);
gradiente = parteSuperior / parteInferior;

return gradiente.toFixed(2);
}

------------------------------------------------------------------------
|gradienteValorPresente
|gradienteAritmetica.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h2 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;

}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|gradienteAritmetica.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="gradienteAritmetica.css">
</head>
<body class="body">
<h1 class="h1">Gradiente Aritmetico</h1>
<h2 class="h2">En base al valor presente</h2>
<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<form class="container">
<div>
<label for="" class="label">Tiempo</label>
<input id="tiempo" type="number" min="0" class="texto" placeholder="En
meses" required>
</div>
<div>
<label for="" class="label">Tasa de interes</label>
<input id="interes" type="number" min="0" max="100" class="texto"
placeholder="0..100" required>
</div>
<div>
<label for="" class="label">Valor Presente</label>
<input id="valor" type="number" min="0" class="texto"
placeholder="Valor presente" required>
</div>
<div>
<label for="" class="label">Anualidad</label>
<input id="anualidad" type="number" min="0" class="texto"
placeholder="Anualidad" required>
</div>

<div>
<label for="" class="label">Tipo de gradiente</label>
<div>
<input value="creciente" class="" type="radio" name="tipoGradiente"
id="tipoGradiente1"checked required>
<label class="label" for="tipoGradiente1">Creciente</label>
<input value="decreciente" class=" " type="radio"
name="tipoGradiente" id="tipoGradiente2" required>
<label class="label" for="tipoGradiente2">Decreciente</label>
</div>

</div>

</form>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="gradienteAritmetica.js"></script>

</body>
</html>
------------------------------------------------------------------------
|gradienteAritmetica.js
------------------------------------------------------------------------
let tiempo = document.getElementById("tiempo");
let interes = document.getElementById("interes");
let valor = document.getElementById("valor");
let final = document.getElementById("final");
let anualidad = document.getElementById("anualidad");
let p = document.getElementById("p");
let tipo = document.getElementById("tipoGradiente1").value;
let tipo2 = document.getElementById("tipoGradiente2").value;
function validar() {
let opcion = $("input:radio[name=tipoGradiente]:checked").val();
console.log(opcion);

if (opcion == "creciente") {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Valor presente(P): $" +
valor.value +
" | Anualidad(g): $" +
anualidad.value +
" | Creciente" +
"<br><br>" +
"La gradiente en base al valor presente de este problema es: $" +
calcularAnualidadCreciente(
valor.value,
interes.value,
tiempo.value,
anualidad.value
);
} else {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Valor presente(P): $" +
valor.value +
" | Anualidad(g): $" +
anualidad.value +
" | Decreciente" +
"<br><br>" +
"La gradiente en base al valor presente de este problema es: $" +
calcularAnualidadDecreciente(
valor.value,
interes.value,
tiempo.value,
anualidad.value
);
}

document.getElementById("tiempo").value = null;
document.getElementById("interes").value = null;
document.getElementById("valor").value = null;
document.getElementById("anualidad").value = null;
}

function calcularAnualidadCreciente(valor, interes, tiempo, anualidad) {


interes = interes / 100;
console.log(interes, "interes");
valor = parseInt(valor);
anualidad = parseInt(anualidad);

let potencia = Math.pow(1 + interes, -tiempo);


let potencia2 = Math.pow(1 + interes, tiempo);

let primeraParte = (1 - potencia) / interes;

let segundaParte = anualidad * primeraParte;

let parteSuperior = valor - segundaParte;

let terceraParte = primeraParte - tiempo / potencia2;


let cuartaParte = 1 / interes;
let parteInferior = cuartaParte * terceraParte;

console.log(parteSuperior);
console.log(parteInferior);
gradiente = parteSuperior / parteInferior;
return gradiente.toFixed(2);
}

function calcularAnualidadDecreciente(valor, interes, tiempo, anualidad) {


interes = interes / 100;
console.log(interes, "interes");
valor = parseInt(valor);
anualidad = parseInt(anualidad);

let potencia = Math.pow(1 + interes, -tiempo);


let potencia2 = Math.pow(1 + interes, tiempo);

let primeraParte = (1 - potencia) / interes;

let segundaParte = anualidad * primeraParte;

let parteSuperior = valor + segundaParte;

let terceraParte = primeraParte - tiempo / potencia2;


let cuartaParte = 1 / interes;
let parteInferior = cuartaParte * terceraParte;

console.log(parteSuperior);
console.log(parteInferior);
gradiente = parteSuperior / parteInferior;

return gradiente.toFixed(2);
}

------------------------------------------------------------------------
|anualidad.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ing. Economica</title>
<link rel="stylesheet" href="./../../gradiente.css" />
</head>

<body class="body">
<h1 class="h1">Gradientes</h1>
<h2 class="h2">Gradinete</h2>

<div class="container">
<button class="simple"
onclick="redireccionar('./gradienteValorFinal/gradienteAritmetica.html')">En base
al valor futuro</button>
<button class="simple"
onclick="redireccionar('./gradienteValorPresente/gradienteAritmetica.html')">En
base al valor presente</button>
</div>
<script src="./../../gradiente.js"></script>
</body>
</html>
------------------------------------------------------------------------
|valorFuturo
|valorFuturoAritmetico.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;

}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|valorFuturoAritmetico.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="valorFuturoAritmetico.css">
</head>
<body class="body">
<h1 class="h1">Valor Futuro Aritmetico</h1>
<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<form class="container">
<div>
<label for="" class="label">Tiempo</label>
<input id="tiempo" type="number" min="0" class="texto" placeholder="En
meses" required>
</div>
<div>
<label for="" class="label">Tasa de interes</label>
<input id="interes" type="number" min="0" max="100" class="texto"
placeholder="0..100" required>
</div>
<div>
<label for="" class="label">Monto inicial</label>
<input id="inicial" type="number" min="0" class="texto"
placeholder="Monto inicial" required>
</div>
<div>
<label for="" class="label">Gradiente</label>
<input id="gradiente" type="number" min="0" class="texto"
placeholder="Gradiente" required>
</div>

<div>
<label for="" class="label">Tipo de gradiente</label>
<div>
<input value="creciente" class="" type="radio" name="tipoGradiente"
id="tipoGradiente1"checked required>
<label class="label" for="tipoGradiente1">Creciente</label>
<input value="decreciente" class=" " type="radio"
name="tipoGradiente" id="tipoGradiente2" required>
<label class="label" for="tipoGradiente2">Decreciente</label>
</div>

</div>

</form>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="valorFuturoAritmetico.js"></script>

</body>
</html>
------------------------------------------------------------------------
|valorFuturoAritmetico.js
------------------------------------------------------------------------
let tiempo = document.getElementById("tiempo");
let interes = document.getElementById("interes");
let inicial = document.getElementById("inicial");
let final = document.getElementById("final");
let gradiente = document.getElementById("gradiente");
let p = document.getElementById("p");
let tipo = document.getElementById("tipoGradiente1").value;
let tipo2 = document.getElementById("tipoGradiente2").value;
function validar() {
let opcion = $("input:radio[name=tipoGradiente]:checked").val();
console.log(opcion);

if (opcion == "creciente") {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): $" +
gradiente.value +
" | Creciente" +
"<br><br>" +
"El Valor futuro de este problema es: $" +
calcularValorFuturoCreciente(
inicial.value,
interes.value,
tiempo.value,
gradiente.value
);
} else {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): $" +
gradiente.value +
" | Decreciente" +
"<br><br>" +
"El Valor futuro de este problema es: $" +
calcularValorFuturoDecreciente(
inicial.value,
interes.value,
tiempo.value,
gradiente.value
);
}

document.getElementById("tiempo").value = null;
document.getElementById("interes").value = null;
document.getElementById("inicial").value = null;
document.getElementById("gradiente").value = null;
}

function calcularValorFuturoCreciente(inicial, interes, tiempo, gradiente) {


let primeraParte =
(Math.pow(1 + interes / 100, tiempo) - 1) / (interes / 100);
let segundaParte = gradiente / (interes / 100);
let terceraParte =
(Math.pow(1 + interes / 100, tiempo) - 1) / (interes / 100) - tiempo;
console.log(primeraParte);
console.log(segundaParte);
console.log(terceraParte);
let valorFuturo = inicial * primeraParte + segundaParte * terceraParte;
return valorFuturo.toFixed(2);
}
function calcularValorFuturoDecreciente(inicial, interes, tiempo, gradiente) {
let primeraParte =
(Math.pow(1 + interes / 100, tiempo) - 1) / (interes / 100);
let segundaParte = gradiente / (interes / 100);
let terceraParte =
(Math.pow(1 + interes / 100, tiempo) - 1) / (interes / 100) - tiempo;

console.log(primeraParte);
console.log(segundaParte);
console.log(terceraParte);
let valorFuturo = (inicial * primeraParte) - (segundaParte * terceraParte);
return valorFuturo.toFixed(2);
}

------------------------------------------------------------------------
|valorPresente
|valorPresenteAritmetico.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;
}

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;

}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|valorPresenteAritmetico.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="valorPresenteAritmetico.css">
</head>
<body class="body">
<h1 class="h1">Valor Presente Aritmetico</h1>
<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<form class="container">
<div>
<label for="" class="label">Tiempo</label>
<input id="tiempo" type="number" min="0" class="texto" placeholder="En
meses" required>
</div>
<div>
<label for="" class="label">Tasa de interes</label>
<input id="interes" type="number" min="0" max="100" class="texto"
placeholder="0..100" required>
</div>
<div>
<label for="" class="label">Monto inicial</label>
<input id="inicial" type="number" min="0" class="texto"
placeholder="Monto inicial" required>
</div>
<div>
<label for="" class="label">Gradiente</label>
<input id="gradiente" type="number" min="0" class="texto"
placeholder="Gradiente" required>
</div>

<div>
<label for="" class="label">Tipo de gradiente</label>
<div>
<input value="creciente" class="" type="radio" name="tipoGradiente"
id="tipoGradiente1"checked required>
<label class="label" for="tipoGradiente1">Creciente</label>
<input value="decreciente" class=" " type="radio"
name="tipoGradiente" id="tipoGradiente2" required>
<label class="label" for="tipoGradiente2">Decreciente</label>
</div>

</div>

</form>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="valorPresenteAritmetico.js"></script>

</body>
</html>
------------------------------------------------------------------------
|valorPresenteAritmetico.js
------------------------------------------------------------------------
let tiempo = document.getElementById("tiempo");
let interes = document.getElementById("interes");
let inicial = document.getElementById("inicial");
let final = document.getElementById("final");
let gradiente = document.getElementById("gradiente");
let p = document.getElementById("p");
let tipo = document.getElementById("tipoGradiente1").value;
let tipo2 = document.getElementById("tipoGradiente2").value;
function validar() {
let opcion = $("input:radio[name=tipoGradiente]:checked").val();
console.log(opcion);

if (opcion == "creciente") {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): $" +
gradiente.value +
" | Creciente" +
"<br><br>" +
"El Valor Presente de este problema es: $" +
calcularValorPresenteCreciente(
inicial.value,
interes.value,
tiempo.value,
gradiente.value
);
} else {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): $" +
gradiente.value +
" | Decreciente" +
"<br><br>" +
"El Valor Presente de este problema es: $" +
calcularValorPresenteDecreciente(
inicial.value,
interes.value,
tiempo.value,
gradiente.value
);
}

document.getElementById("tiempo").value = null;
document.getElementById("interes").value = null;
document.getElementById("inicial").value = null;
document.getElementById("gradiente").value = null;
}

function calcularValorPresenteCreciente(inicial, interes, tiempo, gradiente) {


interes = interes/100
console.log(interes);

let primeraParte = tiempo / Math.pow(1 + interes, tiempo)


let segundaParte = (1 - Math.pow(1 + interes, -tiempo)) / interes
let terceraParte =(gradiente / interes)
let cuartaParte = ((1 - Math.pow(1 + interes, -tiempo)) / interes)
let quintaParte = (segundaParte - primeraParte);
let sestaParte = terceraParte * quintaParte
let septimaParte = inicial * cuartaParte
let c =
septimaParte + sestaParte

console.log(c);

return c.toFixed(2);
}
function calcularValorPresenteDecreciente(inicial, interes, tiempo, gradiente) {
interes = interes/100
console.log(interes);

let primeraParte = tiempo / Math.pow(1 + interes, tiempo)


let segundaParte = (1 - Math.pow(1 + interes, -tiempo)) / interes
let terceraParte =(gradiente / interes)
let cuartaParte = ((1 - Math.pow(1 + interes, -tiempo)) / interes)
let quintaParte = (segundaParte - primeraParte);
let sestaParte = terceraParte * quintaParte
let septimaParte = inicial * cuartaParte
let c =
septimaParte - sestaParte

console.log(septimaParte);
console.log(sestaParte);

console.log(c);

return c.toFixed(2);
}
------------------------------------------------------------------------
|velorPresentePerpetuo
|valorPresentePerpetuo.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;

}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|valorPresentePerpetuo.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="valorPresentePerpetuo.css">
</head>
<body class="body">
<h1 class="h1">Valor Presente Aritmetico Perpetuo</h1>
<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<form class="container">
<div>
<label for="" class="label">Tasa de interes</label>
<input id="interes" type="number" min="0" max="100" class="texto"
placeholder="0..100" required>
</div>
<div>
<label for="" class="label">Monto inicial</label>
<input id="inicial" type="number" min="0" class="texto"
placeholder="Monto inicial" required>
</div>
<div>
<label for="" class="label">Gradiente</label>
<input id="gradiente" type="number" min="0" class="texto"
placeholder="Gradiente" required>
</div>

</form>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="valorPresentePerpetuo.js"></script>

</body>
</html>
------------------------------------------------------------------------
|valorPresentePerpetuo.js
------------------------------------------------------------------------
let interes = document.getElementById("interes");
let inicial = document.getElementById("inicial");
let gradiente = document.getElementById("gradiente");
let p = document.getElementById("p");

function validar() {

p.innerHTML =
"Intereses(i): " +
interes.value +
"% | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): $" +
gradiente.value +
"<br><br>" +
"El Valor Presente perpetuo de este problema es: $" +
calcularValorPresetePerpetuoAritmetico(
inicial.value,
interes.value,
gradiente.value
);

document.getElementById("interes").value = null;
document.getElementById("inicial").value = null;
document.getElementById("gradiente").value = null;
}

function calcularValorPresetePerpetuoAritmetico(valor, interes, gradiente) {


interes = interes / 100;
vpp = valor / interes + gradiente / Math.pow(interes, 2);
return vpp.toFixed(2);
}

// console.log(calcularValorPresetePerpetuoAritmetico(200000,2.5,10000));//!
24.000.000
// console.log(calcularValorPresetePerpetuoGeometrico(300000,20,10));//! 3.000.000

------------------------------------------------------------------------
|Geometrica
|elementoN
|elementoN.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;
}

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;

}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|elementoN.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="elementoN.css">
</head>
<body class="body">
<h1 class="h1">Elemento N Geometrica</h1>
<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<form class="container">
<div>
<label for="" class="label">Cuota</label>
<input id="tiempo" type="number" min="0" class="texto"
placeholder="Numero de la cuota" required>
</div>

<div>
<label for="" class="label">Monto inicial</label>
<input id="inicial" type="number" min="0" class="texto"
placeholder="Monto inicial" required>
</div>
<div>
<label for="" class="label">Gradiente</label>
<input id="gradiente" type="number" min="0" max = "100" class="texto"
placeholder="0..100" required>
</div>

<div>
<label for="" class="label">Tipo de gradiente</label>
<div>
<input value="creciente" class="" type="radio" name="tipoGradiente"
id="tipoGradiente1"checked required>
<label class="label" for="tipoGradiente1">Creciente</label>
<input value="decreciente" class=" " type="radio"
name="tipoGradiente" id="tipoGradiente2" required>
<label class="label" for="tipoGradiente2">Decreciente</label>
</div>

</div>

</form>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="elementoN.js"></script>

</body>
</html>
------------------------------------------------------------------------
|elementoN.js
------------------------------------------------------------------------
let tiempo = document.getElementById("tiempo");
let inicial = document.getElementById("inicial");
let gradiente = document.getElementById("gradiente");
let p = document.getElementById("p");
let tipo = document.getElementById("tipoGradiente1").value;
let tipo2 = document.getElementById("tipoGradiente2").value;
function validar() {
let opcion = $("input:radio[name=tipoGradiente]:checked").val();
console.log(opcion);

if (opcion == "creciente") {
p.innerHTML =
"Cuota(n): " +
tiempo.value +
" | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): " +
gradiente.value +
"% | Creciente" +
"<br><br>" +
"El Valor a pagar en la Cuota " +
tiempo.value +
" es: $" +
calcularElementoNCreciente(inicial.value, tiempo.value, gradiente.value);
} else {
p.innerHTML =
"Cuota(n): " +
tiempo.value +
" | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): " +
gradiente.value +
"% | Decreciente" +
"<br><br>" +
"El Valor a pagar en la Cuota " +
tiempo.value +
" es: $" +
calcularElementoNDecreciente(
inicial.value,
tiempo.value,
gradiente.value
);
}

document.getElementById("tiempo").value = null;
document.getElementById("inicial").value = null;
document.getElementById("gradiente").value = null;
}

function calcularElementoNCreciente(inicial, tiempo, gradiente) {


inicial = parseInt(inicial)
valorElementoN = inicial *(Math.pow((1+gradiente),(tiempo-1)))

return valorElementoN;
}
function calcularElementoNDecreciente(inicial, tiempo, gradiente) {
inicial = parseInt(inicial)

vlorElementoN = inicial *(Math.pow((1+(-gradiente)),(tiempo-1)))

return valorElementoN;
}

------------------------------------------------------------------------
|valorFuturo
|valorFuturoGeometrico.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;
}

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;

}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|valorFuturoGeometrico.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="valorFuturoGeometrico.css">
</head>
<body class="body">
<h1 class="h1">Valor Futuro Geometrico</h1>
<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<form class="container">
<div>
<label for="" class="label">Tiempo</label>
<input id="tiempo" type="number" min="0" class="texto" placeholder="En
meses" required>
</div>
<div>
<label for="" class="label">Tasa de interes</label>
<input id="interes" type="number" min="0" max="100" class="texto"
placeholder="0..100" required>
</div>
<div>
<label for="" class="label">Monto inicial</label>
<input id="inicial" type="number" min="0" class="texto"
placeholder="Monto inicial" required>
</div>
<div>
<label for="" class="label">Gradiente</label>
<input id="gradiente" type="number" min="0" max= "100 "class="texto"
placeholder="0..100" required>
</div>

<div>
<label for="" class="label">Tipo de gradiente</label>
<div>
<input value="creciente" class="" type="radio" name="tipoGradiente"
id="tipoGradiente1"checked required>
<label class="label" for="tipoGradiente1">Creciente</label>
<input value="decreciente" class=" " type="radio"
name="tipoGradiente" id="tipoGradiente2" required>
<label class="label" for="tipoGradiente2">Decreciente</label>
</div>

</div>

</form>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="valorFuturoGeometrico.js"></script>

</body>
</html>
------------------------------------------------------------------------
|valorFuturoGeometrico.js
------------------------------------------------------------------------
let tiempo = document.getElementById("tiempo");
let interes = document.getElementById("interes");
let inicial = document.getElementById("inicial");
let final = document.getElementById("final");
let gradiente = document.getElementById("gradiente");
let p = document.getElementById("p");
let tipo = document.getElementById("tipoGradiente1").value;
let tipo2 = document.getElementById("tipoGradiente2").value;
function validar() {
let opcion = $("input:radio[name=tipoGradiente]:checked").val();
console.log(opcion);

if (opcion == "creciente") {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): " +
gradiente.value +
"% | Creciente" +
"<br><br>" +
"El Valor futuro de este problema es: $" +
calcularValorFuturoCreciente(
inicial.value,
interes.value,
tiempo.value,
gradiente.value
);
} else {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): " +
gradiente.value +
"% | Decreciente" +
"<br><br>" +
"El Valor futuro de este problema es: $" +
calcularValorFuturoDecreciente(
inicial.value,
interes.value,
tiempo.value,
gradiente.value
);
}

document.getElementById("tiempo").value = null;
document.getElementById("interes").value = null;
document.getElementById("inicial").value = null;
document.getElementById("gradiente").value = null;
}

function calcularValorFuturoCreciente(inicial, interes, tiempo, gradiente) {

interes = interes/100
gradiente = gradiente/100

if( interes != gradiente){


let parteIzquierda = inicial/(interes-gradiente)
let primeraParte = (Math.pow((1+interes),tiempo))
let segundaParte = (Math.pow((1+gradiente),tiempo))
let parteDerecha = primeraParte-segundaParte
valorFuturo = parteIzquierda*parteDerecha
}else{
let parteIzquierda = tiempo*inicial
let parteDerecha = (Math.pow((1+interes),(tiempo-1)))
valorFuturo = parteIzquierda*parteDerecha
}

return valorFuturo.toFixed(2);
}
function calcularValorFuturoDecreciente(inicial, interes, tiempo, gradiente) {
interes = interes/100
gradiente = gradiente/100

if( interes != gradiente){


let parteIzquierda = inicial/(interes+gradiente)
let primeraParte = (Math.pow((1+interes),tiempo))
let segundaParte = (Math.pow((1-gradiente),tiempo))
let parteDerecha = primeraParte-segundaParte
valorFuturo = parteIzquierda*parteDerecha
}else{
let parteIzquierda = inicial/(interes+interes)
let primeraParte = (Math.pow((1+interes),tiempo))
let segundaParte = (Math.pow((1-interes),tiempo))
let parteDerecha = primeraParte-segundaParte
valorFuturo = parteIzquierda*parteDerecha
}

return valorFuturo.toFixed(2);
}

------------------------------------------------------------------------
|valorPresente
|valorPresenteGeometrico.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;
}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|valorPresenteGeometrico.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="valorPresenteGeometrico.css">
</head>
<body class="body">
<h1 class="h1">Valor Presente Geometrico</h1>
<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<form class="container">
<div>
<label for="" class="label">Tiempo</label>
<input id="tiempo" type="number" min="0" class="texto" placeholder="En
meses" required>
</div>
<div>
<label for="" class="label">Tasa de interes</label>
<input id="interes" type="number" min="0" max="100" class="texto"
placeholder="0..100" required>
</div>
<div>
<label for="" class="label">Monto inicial</label>
<input id="inicial" type="number" min="0" class="texto"
placeholder="Monto inicial" required>
</div>
<div>
<label for="" class="label">Gradiente</label>
<input id="gradiente" type="number" min="0" max = "100" class="texto"
placeholder="0..100" required>
</div>

<div>
<label for="" class="label">Tipo de gradiente</label>
<div>
<input value="creciente" class="" type="radio" name="tipoGradiente"
id="tipoGradiente1"checked required>
<label class="label" for="tipoGradiente1">Creciente</label>
<input value="decreciente" class=" " type="radio"
name="tipoGradiente" id="tipoGradiente2" required>
<label class="label" for="tipoGradiente2">Decreciente</label>
</div>

</div>

</form>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="valorPresenteGeometrico.js"></script>

</body>
</html>
------------------------------------------------------------------------
|valorPresenteGeometrico.js
------------------------------------------------------------------------
let tiempo = document.getElementById("tiempo");
let interes = document.getElementById("interes");
let inicial = document.getElementById("inicial");
let final = document.getElementById("final");
let gradiente = document.getElementById("gradiente");
let p = document.getElementById("p");
let tipo = document.getElementById("tipoGradiente1").value;
let tipo2 = document.getElementById("tipoGradiente2").value;
function validar() {
let opcion = $("input:radio[name=tipoGradiente]:checked").val();
console.log(opcion);

if (opcion == "creciente") {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): " +
gradiente.value +
"% | Creciente" +
"<br><br>" +
"El Valor Presente de este problema es: $" +
calcularValorPresenteCreciente(
inicial.value,
interes.value,
tiempo.value,
gradiente.value
);
} else {
p.innerHTML =
"Tiempo(n): " +
tiempo.value +
" cuotas | Intereses(i): " +
interes.value +
"% | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): " +
gradiente.value +
"% | Decreciente" +
"<br><br>" +
"El Valor Presente de este problema es: $" +
calcularValorPresenteDecreciente(
inicial.value,
interes.value,
tiempo.value,
gradiente.value
);
}

document.getElementById("tiempo").value = null;
document.getElementById("interes").value = null;
document.getElementById("inicial").value = null;
document.getElementById("gradiente").value = null;
}

function calcularValorPresenteCreciente(inicial, interes, tiempo, gradiente) {


interes = interes / 100;
gradiente = gradiente / 100;

if (interes != gradiente) {
let parteIzquierda = inicial / (interes - gradiente);
let primeraParte = (1 + gradiente) / (1 + interes);
let segundaParte = Math.pow(primeraParte, tiempo);
let parteDerecha = 1 - segundaParte;
valorPresente = parteIzquierda * parteDerecha;
} else {
let parteIzquierda = tiempo * inicial;
let parteDerecha = 1 + interes;
valorPresente = parteIzquierda / parteDerecha;
}

return valorPresente.toFixed(2);
}
function calcularValorPresenteDecreciente(inicial, interes, tiempo, gradiente) {
interes = interes / 100;
gradiente = gradiente / 100;

if (interes != gradiente) {
let parteIzquierda = inicial / (interes + gradiente);
let primeraParte = (1 - gradiente) / (1 + interes);
let segundaParte = Math.pow(primeraParte, tiempo);
let parteDerecha = 1 - segundaParte;
valorPresente = parteIzquierda * parteDerecha;
} else {
let parteIzquierda = inicial / (interes + interes);

let primeraParte = (1 - interes) / (1 + interes);


let segundaParte = Math.pow(primeraParte, tiempo);
let parteDerecha = 1 - segundaParte;
valorPresente = parteIzquierda * parteDerecha;
}

return valorPresente.toFixed(2);
}

------------------------------------------------------------------------
|valorPresentePerpetuo
|valorPresentePerpetuo.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;

}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|valorPresentePerpetuo.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="valorPresentePerpetuo.css">
</head>
<body class="body">
<h1 class="h1">Valor Presente Geometrico Perpetuo</h1>
<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<form class="container">
<div>
<label for="" class="label">Tasa de interes</label>
<input id="interes" type="number" min="0" max="100" class="texto"
placeholder="0..100" required>
</div>
<div>
<label for="" class="label">Monto inicial</label>
<input id="inicial" type="number" min="0" class="texto"
placeholder="Monto inicial" required>
</div>
<div>
<label for="" class="label">Gradiente</label>
<input id="gradiente" type="number" min="0" max="100 "class="texto"
placeholder="0..100" required>
</div>

</form>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="valorPresentePerpetuo.js"></script>

</body>
</html>
------------------------------------------------------------------------
|valorPresentePerpetuo.js
------------------------------------------------------------------------
let interes = document.getElementById("interes");
let inicial = document.getElementById("inicial");
let gradiente = document.getElementById("gradiente");
let p = document.getElementById("p");

function validar() {

p.innerHTML =
"Intereses(i): " +
interes.value +
"% | Monto inicial(P): $" +
inicial.value +
" | Gradiente(g): $" +
gradiente.value +
"<br><br>" +
"El Valor Presente perpetuo de este problema es: $" +
calcularValorPresetePerpetuoGeometrico(
inicial.value,
interes.value,
gradiente.value
);

document.getElementById("interes").value = null;
document.getElementById("inicial").value = null;
document.getElementById("gradiente").value = null;
}

function calcularValorPresetePerpetuoGeometrico(valor, interes, gradiente) {


interes = interes / 100
gradiente = gradiente / 100
vpp = 0
if(gradiente<interes){
vpp = valor / (interes-gradiente)
}

return vpp.toFixed(2);
}

// console.log(calcularValorPresetePerpetuoAritmetico(200000,2.5,10000));//!
24.000.000
// console.log(calcularValorPresetePerpetuoGeometrico(300000,20,10));//! 3.000.000
------------------------------------------------------------------------
|aritmetica.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ing. Economica</title>
<link rel="stylesheet" href="gradiente.css" />
</head>

<body class="body">
<h1 class="h1">Gradientes</h1>
<h2 class="h2">Aritmetico</h2>

<div class="container">
<button class="simple"
onclick="redireccionar('./Aritmetivo/anualidad/anualidad.html')">Anualidad</button>
<button class="simple"
onclick="redireccionar('./Aritmetivo/elementoN/elementoN.html')">Elemento
N</button>
<!-- <button class="simple"
onclick="redireccionar('./Aritmetivo/gradiente/')">Gradiente</button> -->
<button class="simple"
onclick="redireccionar('./Aritmetivo/valorFuturo/valorFuturoAritmetico.html')">Valo
r Futuro</button>
<button class="simple"
onclick="redireccionar('./Aritmetivo/valorPresente/valorPresenteAritmetico.html')">
Valor Presente</button>
<button class="simple"
onclick="redireccionar('./Aritmetivo/valorPresentePerpetuo/valorPresentePerpetuo.ht
ml')">Valor Presente Perpetuo</button>
</div>
<script src="gradiente.js"></script>
</body>
</html>

------------------------------------------------------------------------
|geometrica.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ing. Economica</title>
<link rel="stylesheet" href="gradiente.css" />
</head>

<body class="body">
<h1 class="h1">Gradientes</h1>
<h2 class="h2">Geometrico</h2>

<div class="container">
<button class="simple"
onclick="redireccionar('./Geometrica/elementoN/elementoN.html')">Elemento
N</button>
<button class="simple"
onclick="redireccionar('./Geometrica/valorFuturo/valorFuturoGeometrico.html')">Valo
r Futuro</button>
<button class="simple"
onclick="redireccionar('./Geometrica/valorPresente/valorPresenteGeometrico.html')">
Valor Presente</button>
<button class="simple"
onclick="redireccionar('./Geometrica/valorPresentePerpetuo/valorPresentePerpetuo.ht
ml')">Valor Presente Perpetuo</button>
</div>
<script src="gradiente.js"></script>
</body>
</html>

------------------------------------------------------------------------
|gradiente.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.body {
background-color: rgba(86, 130, 195, 1);
}

.h1 {
text-align: center;
color: white;
padding-bottom: 10px;
}
.h2 {
text-align: center;
color: white;
padding-bottom: 50px;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 47%);
gap: 10px;
width: 50%;
height: 80%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
}
.compuesto,.gradiente,.simple,.amortizacion {
width: 100%;
height: 100%;
background-color: rgba(64, 86, 164, 0.31);
border-color: transparent;
color: white;
font-size: large;
border-radius: 20px;
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5);
}
.simple {
border-top-left-radius: 20px;
height: 70px;
}
.simple:hover {
opacity: 0.5;
transform: translateY(-5px);
transition: 0.5s;
}
.compuesto {
border-top-right-radius: 20px;

}
.compuesto:hover {
opacity: 0.5;
transform: translateY(-30px);
transition: 0.5s;
}
.gradiente {
border-bottom-left-radius: 20px;
}
.gradiente:hover {
opacity: 0.5;
transform: translateY(-30px);
transition: 0.5s;
}
.amortizacion {
border-bottom-right-radius: 20px;
}
.amortizacion:hover {
opacity: 0.5;
transform: translateY(-30px);
transition: 0.5s;
}
------------------------------------------------------------------------
|gradiente.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ing. Economica</title>
<link rel="stylesheet" href="gradiente.css" />
</head>

<body class="body">
<h1 class="h1">Gradientes</h1>

<div class="container">
<button class="simple"
onclick="redireccionar('./aritmetica.html')">Aritmeticas</button>
<button class="simple"
onclick="redireccionar('./geometrica.html')">Geometrico</button>
</div>
<script src="gradiente.js"></script>
</body>
</html>

------------------------------------------------------------------------
|gradiente.js
------------------------------------------------------------------------
function redireccionar(url) {
window.location.href = url;
}

------------------------------------------------------------------------
|interes compuesto
|index.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Interes Compuesto</h1>
<div id="formularioInformacion">
<form>
<div>
<label>Preriodos de pago</label>
<input type="number" name="periodos" min="0"
placeholder="0..100">
<label>Valor presente</label>
<input type="number" name="presente" min="0"
placeholder="0..100">
</div>
<div>
<label>Tasa de interes</label>
<input type="number" name="tasa" min="0" max="100"
placeholder="0..100">
<label>Valor futuro</label>
<input type="number" name="futuro" min="0"
placeholder="0..100">
</div>
<div id="valores">
<div>
<label>Ingresos</label>
<input type="number" name="ingreso1" min="0"
placeholder="Monto">
<input type="number" name="tiempo1" min="0"
placeholder="mes">
<!--<button>+</button>-->
</div>
<div>
<label>Egresos</label>
<input type="number" name="egreso1" min="0"
placeholder="Monto">
<input type="number" name="tiempo1" min="0"
placeholder="mes">
<!--<button>+</button>-->
</div>
</div>
<p id="resultado">Resultados</p>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
------------------------------------------------------------------------
|interesCompuesto.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;
}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|interesCompuesto.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="es">

<head>
<title>Ing. Economica</title>
<link rel="stylesheet" href="interesCompuesto.css">
</head>

<body class="body">
<h1 class="h1">Interes Compuesto</h1>

<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<div class="container">
<div>
<label for="" class="label">Tiempo</label>
<input id="tiempo" type="number" min="0" class="texto" placeholder="En
meses">
</div>
<div>
<label for="" class="label">Tasa de interes</label>
<input id="interes" type="number" min="0" max="100" class="texto"
placeholder="0..100">
</div>
<div>
<label for="" class="label">Monto inicial</label>
<input id="inicial" type="number" min="0" class="texto"
placeholder="Monto inicial">
</div>
<div>
<label for="" class="label">Monto final</label>
<input id="final" type="number" min="0" class="texto"
placeholder="Monto final">
</div>

</div>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script src="interesCompuesto.js"></script>
</body>

</html>
------------------------------------------------------------------------
|interesCompuesto.js
------------------------------------------------------------------------

console.log("inicio");
function validar() {
let periodos = document.getElementById("tiempo");
let tasa =document.getElementById("interes");
let futuro = document.getElementById("final");
let presente = document.getElementById("inicial");
let p = document.getElementById("p");
console.log("Periodos",periodos.value);
console.log("Tasa",tasa.value);
console.log("Presente",presente.value);
console.log("Futuro",futuro.value);
if (periodos.value && tasa.value && presente.value && !futuro.value ){
console.log("valor futuro");
p.innerHTML =
"Tiempo(n): " +
periodos.value +
" meses | Intereses(i): " +
tasa.value +
"% | Monto inicial(P): $" +
presente.value +
"<br><br>" +
"El monto final de este problema es: $" +
calcularValorFuturo(presente.value, tasa.value, periodos.value);
}
if (periodos.value && tasa.value && !presente.value && futuro.value) {
p.innerHTML =
"Tiempo(n): " +
periodos.value +
" meses | Intereses(i): " +
tasa.value +
"% | Monto final(F): $" +
futuro.value +
"<br><br>" +
"El monto inicial de este problema es: $" +
calcularValorPresente(final.value, interes.value, tiempo.value);
}
if (periodos.value && !tasa.value && presente.value && futuro.value) {
p.innerHTML =
"Tiempo(n): " +
periodos.value +
" meses | Monto inicial(P): $" +
presente.value +
" | Monto final(F): $" +
futuro.value +
"<br><br>" +
"El interes de este problema es: " +
calcularInteres(final.value, inicial.value, tiempo.value) * 100 +
"%";
}
if (!periodos.value && tasa.value && presente.value && futuro.value) {
p.innerHTML =
" Intereses(i): " +
tasa.value +
"% | Monto inicial(P): $" +
presente.value +
" | Monto final(F): $" +
futuro.value +
"<br><br>" +
"El tiempo requerido es: " +
calcularTiempo(final.value, inicial.value, interes.value) +
" meses";
}
if (periodos.value && tasa.value && presente.value && futuro.value) {
p.innerHTML =
"Tiempo(n): " +
periodos.value +
" meses | Intereses(i): " +
tasa.value +
"% | Monto inicial(P): $" +
presente.value +
"Monto final(F): $" +
futuro.value +
"<br><br>No necesitas calcular nada";
}

document.getElementById("tiempo").value = null;
document.getElementById("interes").value = null;
document.getElementById("inicial").value = null;
document.getElementById("final").value = null;
}
function calcularValorFuturo(presente, tasa, periodos) {
tasa = tasa / 100;

valorFuturo = presente * Math.pow(1 + tasa, periodos);


console.log(valorFuturo);
return valorFuturo;
}
function calcularValorPresente(futuro, tasa, periodos) {
tasa = tasa / 100;

valorPresente = futuro / Math.pow(1 + tasa, periodos);


return Math.round(valorPresente);
}
function calcularInteres(futuro, presente, periodos) {
tasaI = Math.pow(futuro / presente, 1 / periodos);
console.log(tasaI);
tasaI = (tasaI - 1);
return tasaI.toFixed(2);

}
function calcularTiempo(futuro, presente, tasa) {
tasa = tasa / 100;

tiempo = Math.log(futuro / presente) / Math.log(1 + tasa);


return Math.round(tiempo);
}

------------------------------------------------------------------------
|script.js
------------------------------------------------------------------------
document.getElementById("resultado").addEventListener("click", function() {
var ingresos = parseInt(document.getElementsByName("ingreso1")[0].value);
var egresos = parseInt(document.getElementsByName("egreso1")[0].value);

if (isNaN(ingresos) && isNaN(egresos)) {


calcular();
} else {
alert("¡Ya valió!");
}
});

function calcular() {
var periodos = parseInt(document.getElementsByName("periodos")[0].value);
var presente = parseFloat(document.getElementsByName("presente")[0].value);
var tasa = parseFloat(document.getElementsByName("tasa")[0].value) / 100;
var futuro = parseFloat(document.getElementsByName("futuro")[0].value);

var valorInteresCompuesto = futuro - presente;

var valorFuturo = presente * Math.pow(1 + tasa, periodos);


var valorPresente = futuro / Math.pow(1 + tasa, periodos);
var tiempo = Math.log(futuro / presente) / Math.log(1 + tasa);
var tasaI = Math.pow(futuro / presente, 1 / periodos);
tasaI = (tasaI - 1) * 100;

if (!isNaN(valorFuturo)) {
document.getElementsByName("futuro")[0].value = Math.round(valorFuturo);
}
if (!isNaN(valorPresente)) {
document.getElementsByName("presente")[0].value = Math.round(valorPresente);
}
if (!isNaN(tiempo)) {
document.getElementsByName("periodos")[0].value = Math.round(tiempo);
}
if (!isNaN(tasaI)) {
document.getElementsByName("tasa")[0].value = Math.round(tasaI);
}
/*
alert("Valor del interés compuesto: " + Math.round(valorInteresCompuesto));
alert("Valor futuro: " + Math.round(valorFuturo));
alert("Valor presente: " + Math.round(valorPresente));
alert("Tiempo: " + Math.round(tiempo));
alert("Tasa: "+ Math.round(tasaI));*/
}

------------------------------------------------------------------------
|styles.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
background-color: #5682c4;
color: white;
text-align: center;
/*background-color: rgba(86, 130, 195, 1);*/
}

h1{
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}

#formularioInformacion {
/*background-color: #a4b6d0;*/
background-color: rgba(137, 145, 222, 0.53);
color: white;
padding: 30px;
border-radius: 20px;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: space-around;
gap: 15px;
}

#formularioInformacion div{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}

#formularioInformacion form div select, #formularioInformacion form div input{


border: none;
border-radius: 3px;
color: white;
background-color: transparent;
border-radius: 20px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;
margin-left: 10px;
}

#formularioInformacion div select option {


background-color: #a4b6d0;
}

#formularioInformacion #valores{
display: flex;
}

#resultado {
width: 200px;
font-size: larger;
background-color: #5660bd;
color: white;
border: none;
border-radius: 30px;
padding: 10px;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);

#resultados:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
------------------------------------------------------------------------
|interes simple
|interesSimple.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.body {
background-color: rgba(86, 130, 195, 1);
}
.h1 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.h3 {
text-align: center;
color: white;
padding-bottom: 5px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
gap: 10px;
width: 95%;
background-color: rgba(137, 145, 222, 0.53);
margin: auto;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
text-align: center;

.label {
color: white;
display: flex;

display: inline-block;
text-align: left;
}
.select{

border-radius: 15px;
width: 100%;
height: 30px;
background-color: transparent;
border: solid 2px;
border-color: white;
color: white;
outline: none;
}
.option{
border-radius: 5px;
color: black;
}
.texto {
height: 30px;
width: 100%;
display: flex;

color: white;
background-color: transparent;
border-radius: 15px;
border: solid 2px;
border-color: white;
outline: none;
text-align: center;

}
.botonResultado {
width: 200px;
background-color: rgba(86, 96, 189, 1);
color: white;
font-size: larger;
text-align: center;
margin: auto;
align-items: center;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
border-radius: 35px;
border-color: transparent;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.botonResultado:hover {
background-color: rgb(146, 153, 214);
width: 250px;
transition: 0.5s;
}
.resultado {
width: 95%;
height: 300px;
background-color: rgba(171, 176, 221, 0.53);
margin: auto;
padding-top: 30px;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.p {
font-size: larger;
}
------------------------------------------------------------------------
|interesSimple.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="es">

<head>
<title>Ing. Economica</title>
<link rel="stylesheet" href="interesSimple.css">
</head>

<body class="body">
<h1 class="h1">Interes Simple</h1>

<div>
<p class="h3"> Digita los datos que tengas</p>
</div>
<div class="container">
<div>
<label for="" class="label">Tiempo</label>
<input id="tiempo" type="number" min="0" class="texto" placeholder="En
meses">
</div>
<div>
<label for="" class="label">Tasa de interes</label>
<input id="interes" type="number" min="0" max="100" class="texto"
placeholder="0..100">
</div>
<div>
<label for="" class="label">Tipo de Anualidad</label>
<div>
<select class="select" placeholder="Seleccione">
<option value="opcion1">Opción 1</option>
<option value="opcion2" selected>Opción 2</option>
<option value="opcion3">Opción 3</option>
</select>
</div>

</div>
<div>
<label for="" class="label">Monto inicial</label>
<input id="inicial" type="number" min="0" class="texto"
placeholder="Monto inicial">
</div>
<div>
<label for="" class="label">Monto final</label>
<input id="final" type="number" min="0" class="texto"
placeholder="Monto final">
</div>

</div>
<div style="padding: 5px;"></div>
<div class="botonResultado">
<button class="botonResultado" onclick="validar()">Resultado</button>
</div>
<div style="padding: 5px;"></div>
<div class="resultado">
<p id="p" style="color: white;text-shadow: 2px 1px 4px rgba(0, 0, 0,
0.5);font-size: larger;"></p>
</div>
<script src="interesSimple.js"></script>
</body>

</html>
------------------------------------------------------------------------
|interesSimple.js
------------------------------------------------------------------------
let tiempo = document.getElementById("tiempo");
let interes = document.getElementById("interes");
let inicial = document.getElementById("inicial");
let final = document.getElementById("final");
let p = document.getElementById("p");
function validar() {

if (tiempo.value && interes.value && inicial.value && !final.value) {


p.innerHTML = "Tiempo(n): "+tiempo.value+" meses | Intereses(i):
"+interes.value+"% | Monto inicial(P): $"+inicial.value+"<br><br>"+"El monto final
de este problema es: $"+calcularValorFuturo(inicial.value, interes.value,
tiempo.value);
}
if (tiempo.value && interes.value && !inicial.value && final.value) {
p.innerHTML = "Tiempo(n): "+tiempo.value+" meses | Intereses(i):
"+interes.value+"% | Monto final(F): $"+final.value+"<br><br>"+"El monto inicial de
este problema es: $"+calcularValorPresente(final.value, interes.value,
tiempo.value);
}
if (tiempo.value && !interes.value && inicial.value && final.value) {
p.innerHTML = "Tiempo(n): "+tiempo.value+" meses | Monto inicial(P):
$"+inicial.value+" | Monto final(F): $"+final.value+"<br><br>"+"El interes de este
problema es: "+calcularInteres(final.value, inicial.value, tiempo.value)*100+"%";
}
if (!tiempo.value && interes.value && inicial.value && final.value) {
p.innerHTML = " Intereses(i): "+interes.value+"% | Monto inicial(P):
$"+inicial.value+" | Monto final(F): $"+final.value+"<br><br>"+"El tiempo requerido
es: "+calcularTiempo(final.value, inicial.value, interes.value)+" meses";
}
if (tiempo.value && interes.value && inicial.value && final.value) {
p.innerHTML = "Tiempo(n): "+tiempo.value+" meses | Intereses(i):
"+interes.value+"% | Monto inicial(P): $"+inicial.value+"Monto final(F):
$"+final.value+"<br><br>No necesitas calcular nada";
}

document.getElementById("tiempo").value = null;
document.getElementById("interes").value = null;
document.getElementById("inicial").value = null;
document.getElementById("final").value = null;

}
function calcularValorFuturo(inicial, interes, tiempo) {
return inicial * (1 + (interes/100) * tiempo);
}
function calcularValorPresente(final, interes, tiempo) {
return final / (1 + tiempo * (interes/100));
}
function calcularInteres(final, inicial, tiempo) {
if (tiempo === 0) {
return 0;
}
if (inicial === 0) {
return 'Valor inicial no puede ser cero';
}
const tasaDeInteresSimple = (1 / tiempo) * ((final / inicial) - 1);
return tasaDeInteresSimple;
}
function calcularTiempo(final, inicial, interes) {
return 1 / (interes/100) * ((final / inicial) - 1);
}
------------------------------------------------------------------------
|index.css
------------------------------------------------------------------------
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
.body {
/* background-color: rgba(86, 130, 195, 1); */
background-image: url(./assets/3665587.jpg);
background-size: cover;
width:100%;
height: 100%;
}

.h1 {
text-align: center;
color: white;
}

.container {
display: grid;
grid-template-columns: repeat(auto-fill, 47%);
gap: 30px;
width: 70%;
height: 80%;
background-color: rgb(137, 146, 222);
margin: auto;
padding: 20px;
padding-left: 0px;
padding-right: 0px;
border-radius: 20px;
justify-content: center;
align-items: center;
box-shadow: 20px 20px 4px rgba(0, 0, 0, 0.5);
}
.titulo{
background-color: rgb(137, 146, 222);

width: 70%;
height: auto;
margin: auto;
margin-bottom: 10px;
padding: 10px;
justify-content: center;
border-radius: 20px;
}
.card{
background-color: #ffffffd7;
width: 60%;
height: auto;
margin: auto;
margin-top: 40px;
padding: 20px;
padding-bottom: 60px;
justify-content: center;
border-radius: 20px;

}
.compuesto,.gradiente,.simple,.amortizacion {
width: 100%;
height: 100%;
background-color: rgba(64, 86, 164, 0.31);
border-color: transparent;
color: white;
font-size: large;
border-radius: 20px;
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5);
}
.simple {
border-top-left-radius: 20px;
height: 70px;
}
.simple:hover {
opacity: 0.5;
transform: translateY(-10px);
transition: 0.5s;
}
.compuesto {
border-top-right-radius: 20px;

}
.compuesto:hover {
opacity: 0.5;
transform: translateY(-30px);
transition: 0.5s;
}
.gradiente {
border-bottom-left-radius: 20px;
}
.gradiente:hover {
opacity: 0.5;
transform: translateY(-30px);
transition: 0.5s;
}
.amortizacion {
border-bottom-right-radius: 20px;
}
.amortizacion:hover {
opacity: 0.5;
transform: translateY(-30px);
transition: 0.5s;
}

.center{
width: 100%;
height: 100%;
align-items: center;
justify-content: center ;
}
------------------------------------------------------------------------
|index.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ing. Economica</title>
<link rel="stylesheet" href="index.css" />
</head>

<body class="body">
<div class="card">
<div class="titulo">
<h1 class="h1">Ingenieria Economica</h1>
</div>
<div class="center">
<div class="container">
<button
class="simple"
onclick="redireccionar('interes simple/interesSimple.html')"
>
Interes Simple
</button>
<button
class="simple"
onclick="redireccionar('./interes compuesto/interesCompuesto.html')"
>
Interes Compuesto
</button>
<button
class="simple"
onclick="redireccionar('gradiente/gradiente.html')"
>
Gradiente
</button>
<button
class="simple"
onclick="redireccionar('amortizacion/menuAmortizacion.html')"
>
Sistemas de Amortizacion
</button>
</div>
</div>
<script src="index.js"></script>
</div>
</body>
</html>

------------------------------------------------------------------------
|index.js
------------------------------------------------------------------------
function redireccionar(url) {
window.location.href = url;
}

------------------------------------------------------------------------

También podría gustarte