Proyectos en JavaScript.

nodejs_api_tasks

Aplicación API en Node JS junto a base de datos Mongo DB y una web para interactuar. Cuenta con 3 Dockerfile y un Docker-Compose para desplegar.

Ejecución

  • Usa el siguiente comando para ejecutar los contenedores: docker-compose up -d
  • Puedes probar las consultas de la API utilizando la colección de Postman "Tasks List.postman_collection.json".
  • La web se ejecuta en http://localhost:8080

Estructura de Carpetas

  • 📁 images: Contiene imágenes que ilustran los diferentes contenedores y aspectos esenciales del proyecto.
  • 📁 js: Contiene el código JavaScript utilizado en la interfaz web.
  • 📁 styles: Almacena los estilos utilizados en la interfaz web.

Contenedores

Contenedores

Panorama general que muestra todos los contenedores en interacción.

1. Contenedor Mongo

Visualización del contenedor de MongoDB, una parte integral del sistema.

2. Contenedor API

Imagen representativa del contenedor API.

3. Contenedor web (Nginx)

Representación visual del contenedor Nginx, crucial para el funcionamiento fluido del proyecto.

Postman

Captura de Postman para ilustrar la interacción con la API. La colección viene incluida en el proyecto.

Web

Vista previa de la interfaz web del proyecto. 

simple_js_validator_form

Un formulario validado en JavaScript con un diseño simple en Bootstrap.

products.js:

Este archivo contiene la declaración de productos, una clase para nodos de la lista de productos, y una clase para listas enlazadas. También incluye funciones para agregar, eliminar y actualizar productos en una lista de pedidos, así como eventos relacionados con la interfaz de usuario.

validator.js:

Este archivo contiene funciones de validación para diversos campos, como fechas, teléfonos, correos electrónicos, contraseñas, códigos postales, entre otros. Estas funciones se utilizan para validar datos ingresados en formularios.

index.js:

Este archivo implementa la lógica principal de la aplicación. Contiene eventos relacionados con la interfaz de usuario, como la apertura de un modal al hacer clic en el botón "Submit", la validación del formulario al enviarlo, y la manipulación del Date Picker. Además, tiene funciones para resetear el formulario, validar campos, calcular el peso volumétrico, habilitar/deshabilitar opciones de reembolso, entre otras.

js_validator_form_bootstrap

Formulario con validaciones en JavaScript. Diseño en Bootstrap y CSS.

ToDo-JS

Lista de tareas To-Do en JavaScript.

Este proyecto consiste en una aplicación web que simula una lista de tareas To-Do en JavaScript. El usuario puede crear una tarea, que incluye un título y una descripción, y luego tiene la capacidad de eliminar la tarea o moverla hacia arriba o hacia abajo en la lista.

El usuario puede crear una nueva tarea ingresando un título y una descripción en un formulario y luego haciendo clic en un botón "Agregar". La nueva tarea se agrega a la lista que se encuentra en la parte superior de la página.

Página de perros aleatorios en JavaScript con Dog API

Este es un proyecto de JavaScript en el que he utilizado la Dog API (https://dog.ceo/dog-api/) para crear una página web que muestra imágenes de perros aleatorios cada vez que se hace clic en el botón. También se puede seleccionar una raza de perro concreta.

Tecnologías utilizadas

  • HTML5.
  • CSS3.
  • JavaScript.
  • Dog API.

Funcionamiento del proyecto

La página web cambia la imagen de manera aleatoria cada vez que el usuario hace clic en el botón "Generar". Se realizan consultas GET a la API para recibir las imágenes aleatorias. Además, si el usuario desea ver imágenes de una raza de perro en particular, puede seleccionarla en el menú desplegable.

¡Imágenes de perros para todos! 🐶🐾