viernes, 4 de enero de 2019

Clase 9: Viernes 20 de Diciembre

Conversor de Monedas



En esta clase veremos un pequeño proyecto el cual utiliza JavaScript y Node JS, la idea es tener una lista de países con sus monedas oficiales y poder hacer conversiones entre ellas. Adicionalmente de todas las monedas solo se podrán hacer conversiones con las monedas asignadas como favoritas. la idea es que las conversiones se hagan sin la necesidad de crear un botón que haga submit.


Esta es la vista del HTML, se utiliza Costa Rica como base.
Se tiene un archivo JSON que tiene los datos de cada país


Entre los datos se tiene uno en especial llamado valor el cual es la conversión de 1 colón a todas las demás monedas.

Backend


En el Backend se pueden ver dos funciones, con rutas, "/" y "/convert", la función get del "/" toma los datos del json y los carga en un archivo EJS, anteriormente en una de las clases se vio JSP, como html parseado para Java, EJS es su gemelo pero con Node.
El get de "/convert" a diferencia lo que hace es obtener como parámetro un id, un valor y una lista de ids de paises los cuales son el id del país que consultó una conversión, el valor a convertir y la lista de paises de todos los favoritos del usuario.
Para cada uno de estos paises se hace la conversión y se guarda en un array el cual es enviado como respuesta.

Frontend


El html del frontend tiene un archivo JavaScript el cual tiene dos funciones.

  1. hrefcheck: Esta se encarga de ver si el país del id enviado está chequeado o no en el checkbox del menú lateral, para así eliminarlo o agregarlo del panel principal. Utiliza el JSON para asignar los datos del valor así como las imágenes.
  2. convert: La función convert llama a la función convert del backend el cual retorna una lista con los valores nuevos a mostrar y estos son asignados a los inputs utilizando jquery.

Ejemplos:

agregar nuevos paises


convertir 2000 colones a otras monedas

convertir 100 dólares a otras monedas

No hay comentarios.:

Publicar un comentario