Skip to content

Latest commit

 

History

History
58 lines (32 loc) · 2.82 KB

README.md

File metadata and controls

58 lines (32 loc) · 2.82 KB
Raw

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