=======
Fundamentos del lenguaje de programación JavaScript.
December 13, 2022
December 15, 2022
December 20, 2022
December 22, 2022
December 26, 2022
January 3, 2023
January 5, 2023
January 9, 2023
January 10, 2023
January 12, 2023
January 17, 2023
January 19, 2023
January 24, 2023
January 26, 2023
January 31, 2023
February 2, 2023
February 7, 2023
February 9, 2023
February 14, 2023
En esta entrega se presenta un video que muestra un sitio web creado según los requerimientos de la primera pre-entrega del proyecto final del curso de JavaScript de CoderHouse. El video muestra un simulador interactivo que cubre los temas dictados en las primeras cuatro clases del curso:
- Conceptos generales: sintaxis y variables.
- Control de flujos.
- Ciclos e iteraciones.
- Funciones.
En esta etapa se solicita la entrega de la estructura del proyecto, las variables necesarias y los objetos de JS.
- Codificar la funcionalidad inicial del simulador.
- Identificar el flujo de trabajo del script en términos de captura de entradas ingresadas por el usuario, procesamiento esencial del simulador y notificación de resultados en forma de salida.
Los temas incluidos para continuar con el simulador son:
- Objetos.
- Arrays.
- Funciones de orden superior.
En esta etapa se solicita agregar y entregar el uso de JSON y Storage, y DOM y eventos del usuario.
- Codificar funciones de procesos esenciales y notificación de resultados por HTML, añadiendo interacción al simulador.
- Ampliar y refinar el flujo de trabajo del script en términos de captura de eventos, procesamiento del simulador y notificación de resultados en forma de salidas por HTML, modificando el DOM.
- Definir eventos a manejar y su función de respuesta.
- Modificar el DOM, ya sea para definir elementos al cargar la página o para realizar salidas de un procesamiento.
- Almacenar datos (clave-valor) en el Storage y recuperarlos.
Los temas incluidos para continuar con el simulador son:
- DOM.
- Eventos.
- [AfterClass] Funciones de Orden Superior + DOM.
- Storage & JSON.
En esta etapa se solicita entregar el proyecto para su corrección final. Una página web interactiva en JavaScript, esta debe simular distintos procesos. Un “simulador” es un programa que soluciona ciertas tareas, y proporciona al usuario información de valor, de forma coherente y prolija. Utilizarás AJAX y JSON para obtener datos y diversas herramientas de JS como librerías, promises y asincronía para controlar eventos en la interfaz y producir animaciones en respuesta.
- Presentar una aplicación que utilice Javascript para solucionar un problema real al usuario.
- Utilizar Javascript para mejorar la interacción y dinamismo de la página, generando una interfaz coherente y atractiva.
- Contar con una estructura de datos clara, basada en Arrays y Objetos.
- Utilizar funciones, condicionales e iteradores para manipular los datos de la app.
- Generar y manipular el DOM. Crear vistas a partir de datos de la app y generar eventos para responder a la interacción del usuario.
- Utilizar alguna librería relevante para el simulador.
- Utilizar asincronía y fetch para cargar datos estáticos o consumir una API.
- Objetos y Arrays. Métodos de Arrays.
- Funciones y condicionales.
- Generación del DOM de forma dinámica. Eventos.
- Sintaxis avanzada.
- Al menos una librería de uso relevante para el proyecto.
- Manejo de promesas con fetch.
- Carga de datos desde un JSON local o desde una API externa.
Es un sitio web de un banco. Para realizar el simulador requerido utilizo los temas vistos durante el curso para implementar un simulador de cotización de seguros de vehículos, motocicletas e inmuebles. El localstorage se utiliza para aprendizaje, como buena práctica no se deberían almacenar datos personales de los usuarios. Implemento también el consumo de una Exchangerate API para realizar un simulador de cotización de monedas en tiempo real. Utilizo Bootstrapt 5 para que el sitio sea responsivo y para darle un estilo de forma rápida y SweetAlert2 porque mejora considerablemente la estética de las alertas.
👉 Ver video en YouTube sobre la entrega final
- HTML.
- JavaScript.
- SweetAlert2.
- Bootstrap.
- Webstorm.
- Google Chrome.
- Exchangerate API
Este proyecto fue creado por Carolina R. Pereira, puede encontrar más información en mis perfiles de: