Control de Gastos Mensuales

Descripción

Este es un proyecto realizado en el curso Inmersión Dev con JavaScript de Alura Latam junto con los Maestros Christian Velasco, Leonardo Jose Castillo Lacruz y Jeanmarie Quijada, e incluyendo tres retos para realizar.

Se trata de un control de gastos mensuales, donde se introduce el nombre del gasto, su descripción y su valor, después se genera una lista mostrando dicha información junto con dos botones: editar y eliminar, y muestra el total de todos los gastos agregados.

Funciones del proyecto

• Campo Nombre del Gasto. Se introduce el nombre del gasto que se realizó.

• Campo Descripción del Gasto. Se introduce una descripción más detallada sobre el gasto que se realizó.

• Campo Valor del Gasto. Se introduce el valor del gasto que se realizó en dólares.

• Botón Agregar Gasto. Se da click para agregar la información de los campos y mostrarlos en una lista en la parte de abajo.

• Botón Editar. Se da click para editar la información de un gasto en específico.

• Botón Editar Gasto. Se da click para guardar los cambios del gasto que se editó.

• Botón Eliminar. Se da click para eliminar un gasto en específico.

• Mensaje para los campos Nombre del Gasto, Descripción del Gasto y Valor del Gasto al agregar un gasto. A los tres campos junto muestra tres mensajes.

  • Cuando no se introduce información en uno o en los tres campos muestra lo siguiente: "Por favor, llene todos los campos.".

  • Cuando se agrega un gasto muestra lo siguiente: "Gasto agregado.".

  • Cuando se agrega un gasto con un valor mayor a 150 muestra lo siguiente: "Se registró un gasto mayor a USD 150.".

• Mensaje para los campos Nombre del Gasto, Descripción del Gasto y Valor del Gasto al editar un gasto. Al agregar un gasto se muestra el botón Editar, se inserta la información a los campos y muestra dos mensajes (al darle click al botón Editar Gasto).

  • Cuando no se introduce información en uno o en los tres campos muestra lo siguiente: "Por favor, llene todos los campos.".

  • Cuando se edita un gasto muestra lo siguiente: "Gasto editado.".

• Mensaje para borrar un gasto. Al agregar un gasto se muestra el botón Eliminar y muestra un mensaje.

  • Cuando se le da click al botón Eliminar muestra lo siguiente: "Gasto eliminado.".

Tecnologías

• HTML5

• CSS3

• JavaScript

• SweetAlert2

Desafíos

• Generar un mensaje de alerta cuando se registre un gasto mayor a 150$ dólares. (Completado)

• Agregar un nuevo campo donde se pueda colocar una descripción más detallada del gasto. (Completado)

• Agregar un botón que permita modificar los gastos registrados. (Completado)

Autor

Sergio Zúñiga Fraga - Licenciado en Informática