Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Bahiron Bonilla
Heli Cadena
Jesus Mora
Sergio Ariza
.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>
</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");
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"));
console.log(periodos);
for (i = 1; i <= periodos; i++) {
var interes = (montoInicial * (tasaInteres / 100));
var cuota = interes + descuento;
<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>
</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");
console.log(periodos);
for (i = 1; i <= periodos; 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);
<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>
</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");
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"));
console.log(periodos);
for (let i = 1; i <= periodos; i++) {
------------------------------------------------------------------------
|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;
}
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;
}
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;
}
return valorElementoN;
}
function calcularElementoNDecreciente(inicial, tiempo, gradiente) {
inicial = parseInt(inicial)
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;
}
return gradiente.toFixed(2);
}
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;
}
console.log(parteSuperior);
console.log(parteInferior);
gradiente = parteSuperior / parteInferior;
return gradiente.toFixed(2);
}
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;
}
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;
}
console.log(c);
return c.toFixed(2);
}
function calcularValorPresenteDecreciente(inicial, interes, tiempo, gradiente) {
interes = interes/100
console.log(interes);
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;
}
// 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;
}
return valorElementoN;
}
function calcularElementoNDecreciente(inicial, tiempo, gradiente) {
inicial = parseInt(inicial)
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;
}
interes = interes/100
gradiente = gradiente/100
return valorFuturo.toFixed(2);
}
function calcularValorFuturoDecreciente(inicial, interes, tiempo, gradiente) {
interes = interes/100
gradiente = gradiente/100
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;
}
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);
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;
}
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;
}
function calcularTiempo(futuro, presente, tasa) {
tasa = tasa / 100;
------------------------------------------------------------------------
|script.js
------------------------------------------------------------------------
document.getElementById("resultado").addEventListener("click", function() {
var ingresos = parseInt(document.getElementsByName("ingreso1")[0].value);
var egresos = parseInt(document.getElementsByName("egreso1")[0].value);
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);
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 #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() {
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;
}
------------------------------------------------------------------------