Guía práctica | TechnoFinanzas
Cómo crear una calculadora de meta de ahorro
En esta guía vas a crear una calculadora sencilla que funciona directamente en el navegador. La idea es que la persona escriba su meta de ahorro, cuánto ya tiene guardado y en cuántos meses quiere lograrla. Al final, la herramienta calcula cuánto necesita ahorrar cada mes.
Es un proyecto simple, útil y perfecto para un sitio de finanzas personales porque convierte una meta grande en una cantidad mensual clara.
Qué hace esta calculadora
- Pide una meta total de ahorro.
- Pide un ahorro inicial.
- Pide el número de meses.
- Calcula cuánto falta por ahorrar.
- Muestra cuánto se necesita guardar cada mes.
Ejemplo: si la meta es 1,200, ya tienes 200 y quieres lograrlo en 10 meses, la calculadora mostrará cuánto necesitas ahorrar mensualmente para llegar a esa meta.
Vista previa
Aquí puedes ver cómo funciona la lógica de la herramienta.
Consejo: este tipo de herramienta funciona muy bien porque es fácil de entender y no necesita servidor. Solo requiere HTML, CSS y JavaScript.
Copia el código
Puedes copiar este código completo y usarlo como base en tu sitio.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Meta de Ahorro</title>
<style>
/* Estilos generales de la página */
body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#f4f7fb;
color:#1f2937;
line-height:1.6;
padding:40px 20px;
}
/* Contenedor principal */
.container{
max-width:760px;
margin:0 auto;
}
/* Tarjeta principal de la calculadora */
.card{
background:#ffffff;
border:1px solid #d9e2ec;
border-radius:18px;
padding:28px;
box-shadow:0 10px 30px rgba(15,23,42,.08);
}
/* Título principal */
h1{
margin-top:0;
line-height:1.2;
font-size:2rem;
color:#0f766e;
}
p{margin:0 0 14px}
/* Etiquetas de los campos */
label{
display:block;
font-weight:bold;
margin-bottom:6px;
}
/* Campos del formulario y botón */
input, button{
width:100%;
padding:12px 14px;
font-size:16px;
border-radius:10px;
border:1px solid #cbd5e1;
margin-bottom:16px;
box-sizing:border-box;
}
/* Botón principal */
button{
background:#0f766e;
color:#fff;
border:none;
cursor:pointer;
font-weight:bold;
}
/* Caja del resultado */
.result{
display:none;
background:#ecfeff;
border:1px solid #bae6fd;
color:#164e63;
padding:18px;
border-radius:12px;
margin-top:18px;
}
/* Caja de error */
.error{
display:none;
background:#fef2f2;
border:1px solid #fecaca;
color:#991b1b;
padding:16px;
border-radius:12px;
margin-top:18px;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h1>Calculadora de meta de ahorro</h1>
<p>Calcula cuánto necesitas ahorrar cada mes para alcanzar tu meta.</p>
<!-- Formulario principal -->
<form id="savingsForm">
<label for="goal">Meta total de ahorro</label>
<input type="number" step="0.01" min="0" id="goal" placeholder="Ejemplo: 1200" required>
<label for="initial">Ahorro inicial</label>
<input type="number" step="0.01" min="0" id="initial" placeholder="Ejemplo: 200" required>
<label for="months">Número de meses</label>
<input type="number" min="1" id="months" placeholder="Ejemplo: 12" required>
<button type="submit">Calcular</button>
</form>
<!-- Caja para mostrar errores -->
<div class="error" id="errorBox"></div>
<!-- Caja para mostrar el resultado del cálculo -->
<div class="result" id="resultBox">
<p><strong>Meta total:</strong> <span id="resultGoal"></span></p>
<p><strong>Ahorro inicial:</strong> <span id="resultInitial"></span></p>
<p><strong>Falta por ahorrar:</strong> <span id="resultRemaining"></span></p>
<p><strong>Plazo:</strong> <span id="resultMonths"></span></p>
<p><strong>Necesitas ahorrar cada mes:</strong> <span id="resultMonthly"></span></p>
</div>
</div>
</div>
<script>
// Seleccionamos el formulario y las cajas de mensaje
const form = document.getElementById('savingsForm');
const errorBox = document.getElementById('errorBox');
const resultBox = document.getElementById('resultBox');
// Esta función da formato bonito a los números
function formatNumber(value) {
return new Intl.NumberFormat('es-ES', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(value);
}
// Escuchamos el envío del formulario
form.addEventListener('submit', function(e) {
// Evitamos que la página se recargue
e.preventDefault();
// Leemos los valores que escribe el usuario
const goal = parseFloat(document.getElementById('goal').value);
const initial = parseFloat(document.getElementById('initial').value);
const months = parseInt(document.getElementById('months').value, 10);
// Reiniciamos cajas de error y resultado
errorBox.style.display = 'none';
resultBox.style.display = 'none';
errorBox.textContent = '';
// Validamos que la meta sea correcta
if (isNaN(goal) || goal <= 0) {
errorBox.textContent = 'Ingresa una meta de ahorro válida.';
errorBox.style.display = 'block';
return;
}
// Validamos el ahorro inicial
if (isNaN(initial) || initial < 0) {
errorBox.textContent = 'Ingresa un ahorro inicial válido.';
errorBox.style.display = 'block';
return;
}
// Validamos el número de meses
if (isNaN(months) || months <= 0) {
errorBox.textContent = 'Ingresa un número de meses válido.';
errorBox.style.display = 'block';
return;
}
// Si ya tiene más dinero del objetivo, mostramos mensaje
if (initial >= goal) {
errorBox.textContent = 'Tu ahorro inicial ya alcanza o supera la meta.';
errorBox.style.display = 'block';
return;
}
// Calculamos cuánto falta por ahorrar
const remaining = goal - initial;
// Calculamos cuánto debería ahorrar cada mes
const monthly = remaining / months;
// Mostramos los resultados finales
document.getElementById('resultGoal').textContent = formatNumber(goal);
document.getElementById('resultInitial').textContent = formatNumber(initial);
document.getElementById('resultRemaining').textContent = formatNumber(remaining);
document.getElementById('resultMonths').textContent = months + ' meses';
document.getElementById('resultMonthly').textContent = formatNumber(monthly);
// Hacemos visible la caja de resultados
resultBox.style.display = 'block';
});
</script>
</body>
</html>Recibe más guías prácticas
Suscríbete si quieres recibir las últimas guías prácticas sobre IA y finanzas personales.
