Inicio Apuntes FPApuntes DAW Controlar tus finanzas con la aplicación web ‘Cuida tu cartera’

Controlar tus finanzas con la aplicación web ‘Cuida tu cartera’

Guarda los datos, sin base de datos

Publicado por entreunosyceros

Una vez mása aquí. Hoy vengo a dejar un pequeño artículo que en estos días de obras en mi casa, me ha venido bien. Cierto es que existen muchos programas que permiten controlar los gastos. Pero como odio el Excel, y no tenía ningún otro programa a mano, decidí crear una pequeña aplicación web con la que llevar un control de los gastos e ingresos. Buscando con esto no salirme del presupuesto mientras duren las obras en las que me he metido. Pues eso, en las siguientes líneas vamos a ver una pequeña aplicación web para controlar tus finanzas personales. La aplicación es fácil de usar, intuitiva y cuenta con una única interfaz básica, pero funcional.

La aplicación resultante de los códigos que vamos a ver enseguida, permite registrar los ingresos y gastos. Como decía, esta aplicación ha sido diseñada pensando en la facilidad de uso y la eficiencia. ¿Por qué complicar las cosas cuando se pueden hacer sencillas? Esta aplicación dispone de un diseño limpio, en el que los elementos visuales están seleccionados para que la información sea fácil de entender y utilizar.

Controlar tus finanzas con esta aplicación web

A la hora de crear la aplicación, solo hizo falta utilizar HTML, CSS y JavaScript. El código HTML se encarga de definir la estructura del sitio web, mientras que el CSS se utiliza para definir el estilo y la presentación visual de la aplicación. Por otro lado, el código JavaScript se utiliza para implementar las funcionalidades y la lógica de la aplicación.

Controla tus finanzas con la aplicación web 'Cuida tu cartera'

Esta aplicación cuenta con un menú principal, desde el cual se puede acceder a todas las funcionalidades disponibles. En la página principal, se muestra una tabla con los ingresos y gastos, además de un balance total. Cuando tenga un poco de tiempo, es posible que le añada la posibilidad de consultar los gastos e ingresos mediante un gráfico, o también utilizar categorías de gastos más importantes. Pero por el momento, y para lo que yo quería la aplicación, a mi me vale.

Como comentaba, esta aplicación se divide en tres archivos. El primero de ellos será el archivo HTML.

Archivo index.html

En este archivo index.html, será donde meteremos el siguiente código. Este será una plantilla básica de una página web escrita en HTML, la cual vamos a estructurar y definir en diferentes secciones. En ella será en la que veremos la aplicación de seguimiento de gastos, permitiendo al usuario añadir nuevas transacciones financieras. Además de ver todas las transacciones agregadas previamente.

La sección <head> contiene información sobre la página, como el título y la hoja de estilos a aplicar. La sección <body> es la sección principal de la página. Esta contiene todo lo que se muestra en la ventana del navegador, incluyendo el encabezado de la página, un formulario para añadir nuevas transacciones y la tabla en la que consultar o borrar las transacciones agregadas previamente.

El archivo de hojas de estilo externo «style.css» se utiliza para definir el diseño y la apariencia visual de la página. El archivo de JavaScript externo «script.js» se utiliza para agregar interactividad y funcionalidad a la página, como la capacidad de agregar nuevas transacciones financieras, y mostrar todas las transacciones agregadas previamente.

Dentro de este archivo, solo será necesario pegar el siguiente código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>Cuida tu cartera!!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="headerBar">
        <header>
            <div class="titulo" aria-label="Hecho en entreunosyceros.net"></div>
            <h1 class="topbar">Tu balance actual es de</h1>
            <p> <!-- balance total-->
                <span class="balance"></span>
                <span class="currency">€</span>
            </p>
         <header>
    </div>
    <hr/>
    <div class="content">
        <h3 class="secondTitle">Añadir nueva transacción: </h3>
        <div class="form"> <!-- formulario para enviar las transacciones -->
            <form id="expForm">
                <div class="formLine left">
                    <span for="type">* Tipo:</span>
                    <select id="type">
                        <option value="Seleccion">Elige una opción...</option>
                        <option value="Ingreso">Ingreso</option>
                        <option value="Gasto">Gasto</option>
                    </select>
                </div>
                <div class="formLine right">
                    <span for="name">* Nombre:</span>
                    <input type="text" id="name">
                </div>

                <div class="formLine right">
                    <span for="amount">* Cantidad:</span>
                    <input type="text" id="amount">
                </div>
                <button type="submit" class="buttonSave" title="Añadir transacción">Añadir transacción</button>
            </form>
        </div>
    </div>
    <div class="content"><!-- tabla de gastos e ingresos añadidos -->
        <table class="table">
            <thead>
                <tr>
                    <th>Tipo</th>
                    <th>Concepto</th>
                    <th>Cantidad</th>
                    <th>Fecha</th>
                    <th>Opción</th>
                </tr>
            </thead>
            <tbody id="transactionTable"></tbody>
        </table>
    </div>
    

    <script src="script.js"></script>
</body>
</html>

Lo siguiente que haremos será crear el archivo en el que guardar el código JavaScript.

Archivo script.js

Esta aplicación web simple para añadir y eliminar transacciones financieras, y mostrar el balance actualizado después de cada transacción. Es necesario que en el archivo script.js añadamos el siguiente código para que la lógica se aplique.

La aplicación utiliza almacenamiento local para guardar las transacciones y mostrarlas en la tabla de transacciones después de que se agregen. La función JSON.parse se utiliza para obtener las transacciones existentes del almacenamiento local y convertirlas en un objeto JavaScript. Si no hay ninguna transacción en el almacenamiento local, se crea un nuevo array vacío.

La función addTransaction se llama cuando se envía el formulario y se comprueba si los campos están rellenados correctamente. Si es así, se crea un nuevo objeto de transacción y se añade al array transactions. En cuanto a la función showTransactions, se encarga de mostrar todas las transacciones existentes en la tabla HTML.

ConfirmDelete es una función que se utiliza para confirmar si el usuario desea eliminar una transacción. La función deleteTransaction se encarga de eliminar la transacción del array y del almacenamiento local.

La función updateBalance se encarga de calcular y mostrar el balance actualizado después de cada transacción.

Al final del código, se añade un event listener al formulario para llamar a la función addTransaction cuando el usuario envía el formulario. También se llaman las funciones showTransactions y updateBalance para mostrar las transacciones existentes y el balance actualizado en la página.

Dentro de este archivo, solo será necesario pegar el siguiente código:

// array inicial para las transacciones, y para leer del almacenaje local
let transactions = JSON.parse(localStorage.getItem('transactions')) || [];

// función para añadir una nueva transacción
const addTransaction = (e) => {
    e.preventDefault();

    // obtener tipo, nombre y cantidad
    let type = document.getElementById('type').value;
    let name = document.getElementById('name').value;
    let amount = Number(document.getElementById('amount').value.replace(',', '.'));

    // isNaN para comprobar si el número es un valor válido
    if (type != 'Seleccion' && name.trim() !== '' && !isNaN(amount) && amount > 0) {
        const transaction = {
            type,
            name,
            //  toLocaleString para convertir el número en una cadena con separador decimal adecuado antes de agregarlo a la transacción
            amount: amount.toLocaleString('es-ES', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }),
            id: transactions.length > 0 ? transactions[transactions.length - 1].id + 1 : 1,
            date: new Date().toLocaleDateString('es-ES') // añadir la fecha actual
        }

        transactions.push(transaction);
        // almacenaje local 
        localStorage.setItem('transactions', JSON.stringify(transactions));

        document.getElementById('expForm').reset();
        showTransactions();
        updateBalance();
    } else {
        alert('Rellena los campos correctamente!!');
    }
}

// función para mostrar las transacciones en la tabla
const showTransactions = () => {
    const transactionTable = document.getElementById('transactionTable');
    transactionTable.innerHTML = '';

    for (let i = 0; i < transactions.length; i++) {
        transactionTable.innerHTML += `
            <tr>
                <td>${transactions[i].type}</td>
                <td>${transactions[i].name}</td>
                <td>${transactions[i].amount.replace('.', ',')} €</td>
                <td>${transactions[i].date}</td> 
                <td><a id="deleteBtn_${transactions[i].id}" class="deleteButton" title="Borrar transacción" onclick="confirmDelete(${transactions[i].id})">Borrar</td>
            </tr>
        `;
    }
}

// confirmación de la eliminación
const confirmDelete = (id) => {
    const result = confirm("¿Estás seguro de que deseas eliminar esta transacción?");

    if (result) {
        deleteTransaction(id);
    }
}

// función para eliminar la transacción
const deleteTransaction = (id) => {
    transactions = transactions.filter((transaction) => transaction.id !== id);
    localStorage.setItem('transactions', JSON.stringify(transactions));
    showTransactions();
    updateBalance();
}

// función para actualizar el balance
const updateBalance = () => {
    let balance = 0;

    transactions.forEach((transaction) => {
        let amount = Number(transaction.amount.replace(',', '.'));
        // se usa isNaN para comprobar si el valor de la cantidad es un número válido
        if (!isNaN(amount)) {
            if (transaction.type === "Ingreso") {
                balance += amount;
            } else if (transaction.type === "Gasto") {
                balance -= amount;
            }
        }
    });

    //  asegura que el balance se muestre correctamente en el formato localizado, 
    //  con la separación de miles y decimales adecuada para el idioma y la región seleccionados
    document.querySelector(".balance").textContent = balance.toLocaleString('es-ES', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });
}

// añadir un evento listener al formulario
document.getElementById('expForm').addEventListener('submit', addTransaction);

// mostrar las transacciones y actualizar el balance al recargar la página
showTransactions();
updateBalance();

Y para terminar, vamos a crear el archivo style.css en el que guardar los estilos que le vamos a dar a la aplicación web.

Archivos style.css

En el archivo style.css, añadiremos un conjunto de reglas CSS que se aplican a diferentes elementos HTML de la página web. Algunas de las reglas, son las siguientes.

La primera regla selecciona todos los elementos de la página y les da un margen de 0 y una fuente predeterminada de Arial, Helvetica y sans-serif.

Continuaremos aplicando al elemento «body» una altura mínima en 1100 píxeles, lo convierte en un contenedor flexible con una dirección de columna, establece un fondo degradado y cambia el color del texto a negro.

En la tercera regla se aplica al elemento con la clase «headerBar«. En ella se establece su fondo en un color púrpura oscuro, el color del texto en blanco, el texto centrado y un espacio de relleno de 20 píxeles.

A la clase «topbar«, se le da un margen inferior de 10 píxeles. A las clases «currency» y «balance» se le establecen sus tamaños de fuente y pesos de fuente. «content» establece su ancho en 580 píxeles, lo centra horizontalmente y le agrega un espacio de relleno del 3% y un espacio adicional de relleno a la izquierda del 6%.

La clase «secondTitle» establece su fondo en un color púrpura claro, el color del texto en blanco, el texto centrado, un margen superior de 100 píxeles, un espacio de relleno de 20 píxeles y un tamaño de fuente de 25 píxeles.

Continuaremos aplicando a la clase «form» la siguiente regla, estableciendo un conjunto de estilos para su diseño y formato. También se aplica a elementos con las clases «left» y «right» y establece su alineación.

Le vamos a dar un conjunto de estilos a «button» para su apariencia y diseño. Finalmente, la última regla se aplica a elementos de enlace.

* {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  min-height: 1100px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to top, #9141ac, #390164);
  color: black;
}

.headerBar {
  background-color: #44005c;;
  color: rgb(255, 228, 196);
  text-align: center;
  padding: 20px;
}

/*Título*/
.titulo {
  box-sizing: border-box;
  padding: 10px;
  border: none;
  font: normal 38px / normal "Warnes", Helvetica, sans-serif;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  white-space: pre;
  text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0),
    0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272,
    0 0 80px #4e4e4e, 0 0 100px #2b2b2b;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}
/* Estilo para el título cuando se le hace hover */
.titulo:hover {
  text-shadow: 0 0 10px rgb(73, 73, 73), 0 0 20px rgb(56, 56, 56),
    0 0 30px rgb(48, 48, 48), 0 0 40px #5c5c5c, 0 0 70px #000000,
    0 0 80px #000000, 0 0 100px #000000;
}
/* Texto del título */
.titulo::after {
  content: "Cuida tu cartera!!";
}
.topbar {
  margin-bottom: 10px;
}

.currency {
  font-size: 30px;
  font-weight: 300;
}

.balance {
  font-size: 45px;
  font-weight: bold;
}

.content {
  width: 580px;
  margin: 0 auto;
  padding: 3%;
  padding-left: 6%;
}

/* Título secundario*/

.secondTitle {
  background-color: rgb(91, 0, 196);
  color: white;
  text-align: center;
  margin-top: 100px;
  padding: 20px;
  font-size: 25px;
}

/* Formulario*/
.form {
  padding: 5px;
  padding-top: 20px;
  padding-left: 10%;
  justify-content: center;
  background-color: rgb(255, 220, 176);
}

.formLine {
  display: inline-flex;
  padding: 5px 0px;
}

.left {
  float: left;
}

.right {
  float: right;
  margin-right: 100px;
}

input,
select {
  width: 130px;
  margin-left: 10px;
}

/* Estilo de la tabla */
table {
  width: 100%;
  border: 2px solid #000000;
}

thead {
  background-color: rgb(91, 0, 196);
  color: white;
  line-height: 30px;
}

tbody {
  background-color: rgb(252, 225, 192);
  line-height: 30px;
  text-align: center;
}

/* Boton */

button {
  width: 200px;
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 1.1em;
  line-height: 20px;
  background-color: rgb(132, 0, 255);
  border-radius: 5px;
  margin: 14px 25%;
  cursor: pointer;
}

button:hover {
  box-shadow: 0 0 0 3px grey;
  transition: 0.3s;
}

a {
  text-decoration: none;
  cursor: pointer;
}

Repositorio en GitHub de esta aplicación para controlar tus finanzas

Todo este código lo he subido a un repositorio en GitHub, donde también se puede descargar el código de esta aplicación web. En caso de querer modificar el código, que cada cual se sienta libre de hacerlo de la forma que quiera y necesite. Si quieres probar esta aplicación, también puedes consultar la sección de ejemplos de esta web.

En resumen, esta es una aplicación con la que controlar tus finanzas personales de forma básica y sencilla. Puede resultar una herramienta útil y eficaz, para que cualquiera pueda hacerlo. Cuenta con una interfaz fácil de usar, la aplicación permitirá tener un mayor control sobre las finanzas y así poder lograr tus metas financieras a corto, medio o largo plazo.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.