Curso de JavaScript de CODERHOUSE

=======

---

Curso de JavaScript

Fundamentos del lenguaje de programación JavaScript.

🚀 Programa

Introducción a JavaScript + Onboarding

December 13, 2022

1. Conceptos generales: Sintaxis y variables

December 15, 2022

2. Control de flujos

December 20, 2022

3. Ciclos e iteraciones

December 22, 2022

AfterClass - Vemos GitHub

December 26, 2022

4. Funciones

January 3, 2023

5. Objetos

January 5, 2023

AfterClass - Objetos y funciones

January 9, 2023

6. Arrays

January 10, 2023

7. Funciones de orden superior

January 12, 2023

8. DOM

January 17, 2023

9. Eventos

January 19, 2023

10. Storage & JSON

January 24, 2023

11. Workshop

January 26, 2023

12. Operadores avanzados

January 31, 2023

13. Librerías

February 2, 2023

14. Asincronía y promesas

February 7, 2023

15. Ajax & Fetch

February 9, 2023

16. Frameworks & NodeJS

February 14, 2023

📦 Entregas del Proyecto Final

Primera entrega - 10-01-23

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.

Segunda entrega - 24-01-23

En esta etapa se solicita la entrega de la estructura del proyecto, las variables necesarias y los objetos de JS.

Objetivos generales:

• 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.

Tercera entrega - 07-02-23

En esta etapa se solicita agregar y entregar el uso de JSON y Storage, y DOM y eventos del usuario.

Objetivos generales:

• 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.

Objetivos específicos

• 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.

Cuarta entrega (final) - 24-02-23

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.

Objetivos generales:

• 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.

Objetivos específicos

• 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.

Se debe entregar

• 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.

Mi proyecto: Mattress Bank

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

Tecnologías / herramientas utilizadas

• HTML.
• JavaScript.
• SweetAlert2.
• Bootstrap.
• Webstorm.
• Google Chrome.
• Exchangerate API

Autor

Este proyecto fue creado por Carolina R. Pereira, puede encontrar más información en mis perfiles de:

• 🌐 LinkedIn
• 🌐 Medium