VideoTube | VideoTube Sprint 2 - Proyecto Final

[J-Ciro]

:video_camera: VideoTube | VideoTube Sprint 2 - Proyecto Final

Repositorio

Descripción de Desarrollo

Construir un sitio web usando HTML, CSS, JavaScript y que además este sea Responsive. Usando como referencia el archivo figma.

Requerimientos técnicos:

Debe hacer uso de los siguientes elementos:

• [x] 1. Arreglos y objetos
• [x] 2. Funciones
• [x] 3. Eventos (.addEventListener())
• [x] 4. Métodos de arreglos
• [x] 5. Objeto Storage (localStorage y/o sessionStorage)
• [x] 6. Responsive design (implementando flex box y media query CSS), cumpliendo con el diseño propuesto en el archivo figma.

Requerimientos funcionales:

• [x] 1. Al realizar click sobre una card de cualquier video, debe dirigir al usuario a la página de detalles del elemento.
• [x] 2. Funcionalidad de los botones de filtrado por categoría
• [x] 3. Construir una página con un formulario que permita agregar un nuevo video, junto con las validaciones en JavaScript para convertir todos los inputs requeridos.
• [x] 4. En el aplicativo debe mostrar como mínimo 30 cards de video y reproducir como mínimo 10 videos.

Estructura de carpetas

La estructuración cuenta con un :page_facing_up:index.html Que es el sitio principal, una carpeta llamada :file_folder:CSS con :page_facing_up:style.css para el sitio principal :page_facing_up:subir.css para el sitio de subida de videos y :page_facing_up:video.css para la visualizacion del video, una carpeta :file_folder:script la cual contiene :page_facing_up:data.js la cual contiene todos los arrays de los videos, :page_facing_up:script.js es el script principal de sitio, :page_facing_up:subir.js el cual permite la subida de videos y :page_facing_up:video.js el cual permite visualizar los videos, ademas de eso tambien esta :file_folder:imgs en donde se ecuentran el favicon, el logo y la imagen de perfil y finalmente :file_folder:pages el cual contiene :page_facing_up:subir.html el cual permite la subida de videos y :page_facing_up:videos.html el cual permite la visualizacion de los videos.

Resumen del Desarrollo

Primera Parte

1. Se crearon las carpetas y los archivos correspondientes para el Desarrollo del proyecto

2. Se estructuro el index tratado de ser lo más correcto posible en cuanto a la estructura del HTML usando etiquetas como header , main, nav, figure, section etc, de igual forma se adapto :page_facing_up:subir.html y :page_facing_up:video.html con la misma estructura y sus funcionamientos

3. Se creo y se definieron los datos del array de los videos para poder empezar a trabajar con ellos, estos estan ubicados en el :page_facing_up:data.js

4. Se comenzó a trabajar en el :page_facing_up:script.js el cual nos permite:

   • importar los datos de :page_facing_up:data.js
   • guardar estos datos en el localStorage
   • una función la cual nos permite mostrar los videos del array pasándole dos parámetros: container y videoList
   • Realizar un filtrado de los objetos usando los botones
   • un eventoListener el cual nos permite cuando se cargue la el sitio mostrar en un contenedor los videos
   • un eventListener el cual nos permite que cuando hagamos click en los videos nos redirija al sitio :page_facing_up:video.html guardando el id de este video y la categoría
   • un eventListener para el boton de subida, cuando se presione dirige al usuario al sitio de subida de videos :page_facing_up:subir.html

5. Se comenzó a trabajar en el :page_facing_up:video.js el cual nos permite realizar:

   • importar el array de los videos datosVideos de :page_facing_up:data.js
   • creamos varias variables las cuales nos permiten obtener el id del video que fue almacenado en el sessionStorage, además otra variable la cual nos permite guardar el valor de category y otra variable que nos permite almacenar el array del video que sea igual al id del sessionStorage
   • usar una función showVideo() la cual tiene dos parámetros, contenedor y video en el cual en ellos pasaremos el contenedor a mostrar los datos y el array video donde estarán todos los videos.
   • usar una función videoRecomendados() la cual nos permite mostrar los videos recomendados según la categoría del video seleccionado

6. Se comenzo a trabajar en el :page_facing_up:subir.js el cual nos permite realizar:

   • guardar el array de datosVideos del localStorage el cual nos permite mantener los videos agreados y poder verlos a tiempo real.
   • Usar la funcion datos() el cual nos permite obtener los values necesarios del formualrio para pdoer subir el video que nosotros deseamos a la plataforma de VideoTube, ademas de esto realizando una validación si el usuario está tratando de enviar datos vacíos o espacios en blanco en el fomrulario.

Vistas: Desktop y mobile - Funcionalidad de filtrado

Estadisticas Wakatime: