Proyectos propuestos
Contenido del curso
Operaciones básicas
Workshop 1: Fetch
Eventos
Workshop 2: Lazy loading
Workshop 3
Librerías relacionadas
Conclusiones
Proyectos propuestos
Contenido del curso
Proyectos propuestos
Jose Anibal Garcia Giraldo
Estudiante
Johan Puentes
Estudiante
William Fernando Cañas Salas
Estudiante
Isaac Yael Ruiz
EstudianteWilliam Fernando Cañas Salas
Estudiante
Carlos Eduardo Gomez García
Estudiante
Axel Yaguana
Team Platzi
Misael Valdez
Estudiante
Alexis Steven Valderrama
EstudianteMisael Valdez
Estudiante
Rafael Ángel Girón Girón
Estudiante
FELIX EVR
Estudiante
Juan Cruz
Estudiante
Irving Juárez
Estudiante
Francisco Javier Pecino Leon
EstudianteIrving Juárez
Estudiante
Rodrigo Martinez
Estudiante
Alejandro Repizp
Estudiante
Pablo Inaipil
Estudiante
Vsqz Gabriel
Estudiante
Jimmy Buriticá Londoño
EstudianteVsqz Gabriel
Estudiante
John Ruiz
Estudiante
Nina Lucia
Estudiante
Roberto Medina
EstudianteJohn Ruiz
Estudiante
Max Andy Diaz Neyra
Estudiante
Roberto Carlos Martinez Loredo
EstudianteRoberto Medina
Estudiante
Sebastian Heredia
EstudianteJohn Ruiz
EstudianteJohn Ruiz
Estudiante
Angel Eduardo Quispe Pomajulca
Estudiante
Héctor Antonio Jiménez Manzo
EstudianteHéctor Antonio Jiménez Manzo
Estudiante
José Alonso Paredes Marin
Estudiante
marlong yesith mendoza garcia
EstudianteLes comparto mi solución al reto 😀, Creé el app para consultar el clima. Incluye bastantes validaciones, le dediqué bastante esfuerzo pero aprendí mucho
Pueden ver la página desplegada aquí
porfavor, te recomiendo encarecidamente y por experiencia, que elimines la api key que sé que tienes en el repo, no es recomendable que lo subas a sitios publicos como gh pages si tienes una apikey, es mejor en servicios con prueba gratuita o bajo costo como vercel o netlify.
Lo logré!, aquí están:
Reproductor:
Weather:
¿Qué opinan? ¿Estrellita a los repos? jeje..
Está muy bueno el diseño! Sin embargo no sé si soy yo pero no me deja usar la línea de tiempo para adelantar el video
Hola Isaac! jajaj me has pillado.. la línea del tiempo sólo tiene efecto visual, no se puede interactuar con ella :D
El reproductor de video lo hice hace años xD . Para que se les haga fácil les recomendaré lo que a mi me sirvió hace años cuando estaba haciendo la práctica, y es esta documentación de la API de Audio/Video (que ya lo puse en una clase anterior): . HTML Audio and Video DOM Reference . Y por último, después de que termine de hacer esa práctica por mi cuenta hace unos años, hice un tutorial sobre ello: . ADVERTENCIA: Estos tutoriales los hice hace años, la calidad no es la mejor, y es posible que el código sea código espagueti ¬¬, además yo lo hice con jQuery, pero por si le sirve a alguien, dejo aquí la lista de reproducción, te puede servir para saber cómo interactuar con la API de Audio/Video del DOM. . Aquí dejo un preview del reproductor que hice ;-; (de hecho tengo una versión más actualizada de este reproductor hecho con JavaScript puro pero no he hecho el tutorial para ello xD) Si quieren puedo subir el repositorio de la versión actualizada ya hecho directamente con JavaScript y con código más legible jajaja, como sea, aquí está el preview:
@youtube
Por cierto, en el Curso Profesional de JavaScript también haceb un reproductor de video :D
En Frontend Mentor también pueden encontrar retos interesantes para hacer.
Este es mi aporte yo lo edité asi les dejo mi github para que aprecien mejor el cariño que le puse ;) https://github.com/misaellvz/workshop3
Oye te quedo muy cool el diseño
Gracias !!
Esta es la página de envato tutorials: https://tutsplus.com/
Y aquí el ejercicio en EnvatoTuts+ explicado.
api
Una amiga mía hizo el reto del weather app y woow, le agrego mapa y además te muestra el clima por defecto, según tu localización https://weatherapp-ria.netlify.app/
la repo del sitio?? es chulisimo
Api key free para la chaviza
const API_KEY = b1b15e88fa797225412429c1c50c122a1r
💚Acá les comparto la solución al reto que realice 🤗 📌Este es el link del repositorio en GitHub
Comparto video player realizado con html -css-js utilizando la API de htmlVideo https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs
acá el código en git https://github.com/pabloInaipil/video-Player-App
acá funcionando https://pabloinaipil.github.io/video-Player-App/
Saludos comunidad Platzi!!!
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
aqui mi solucion al reto al reproductor de video:
https://github.com/GabrielAdmer/video-inteligente
El video tarda mucho en cargar :( https://agitated-noyce-56ee25.netlify.app/
Me gustó. Es totalmente funcional. 👍 Deberías mejorar un poco la presentación, quitar tanto Lorem ...
El lorem era para probar el intersection observer ya que si se muestra el 50% del video de reproducirá automáticamente , y si estoy mejorando mi diseño :D , gracias por el feedback
Hola wenas a tod@s,
Por aqui dejo el ejercicio del weather y la repo. Aun me queda el del video y esta en process.
Amo el diseño!!
Hola:
dejo mi proyecto del reproductor en git: https://github.com/robmvsk/workshop-3-media
Me costo un poco, pero le puse varias cosas:
Así es como luce:
Saludos :)
Wow @Roberto, muy bueno!!
Magnífico trabajo!!
no pude subir mi app a un hosting porque la api que use pedia pagar por el certificado ssl, pero aqui mi resultado:
Hola Roberto:
Me paso lo mismo, pero puse un input para que el usuario copiara la apiKey, y con eso funciono.
En mi repo esta el proyecto que realice, por si acaso.
Saludos :)
Lo dejare para el final del curso y hare los dos, lo genial es ver lo que todos han hecho esta comunidad es muy crack.
Wenas a tod@s;
Tengo una pregunta existencial. Resulta que estoy haciendo el proyecto de video y estoy usando el template de snowpack y tailwind de los proyectos anteriores. Por alguna razón cuando agrego el archivo .mp4, da error 404 y no entiendo por qué? He intentado son usar el template y funciona. Algun@ le ha pasado esto antes y como lo han solucionado. Gracias de antemano.
He encontrado la solución, cuando agreguen un archivo al template como por ejemplo un video para que snowpack lo encuentre:
Tiene que ir siempre este parámetro: %PUBLIC_URL%/dist. Como está en el ejemplo del video TAG :
<video src="%PUBLIC_URL%/_dist_/interstellar.mp4" controls data-video></video>
Saludos.
Aquí va mi aporte al reto que propuso para el app del clima
Esta colgada en esta pagina Aquí, acepto sugerencias de mejora.
Les comparto la solución de mi reto, pueden verla en https://checktheclimate.netlify.app/
Cabe mencionar que aún no es responsive, pero estoy trabajando en eso
Dejo acá el repositorio del mi web del clima y la pueden ver aquí
bro, el link no sirve, sin embargo en la imagen se ve que le agregaste varios detalles aparte de las tarjetas 😁👍👍