Proyectos propuestos
Clase 26 de 29 • Curso de Manipulación del DOM
Contenido del curso
Jose Anibal Garcia Giraldo
student•
hace 5 años
Johan Puentes
student•
hace 2 años
Clase 26 de 29 • Curso de Manipulación del DOM
Contenido del curso
Jose Anibal Garcia Giraldo
Johan Puentes
William Fernando Cañas Salas
Isaac Yael Ruiz
William Fernando Cañas Salas
Carlos Eduardo Gomez García
Axel Yaguana
Misael Valdez
Alexis Steven Valderrama
Misael Valdez
Rafael Ángel Girón Girón
FELIX EVR
Juan Cruz
Irving Juárez
Francisco Javier Pecino Leon
Irving Juárez
Rodrigo Martinez
Alejandro Repizp
Pablo Inaipil
Vsqz Gabriel
Jimmy Buriticá Londoño
Vsqz Gabriel
John Ruiz
Nina Lucia
Roberto Medina
John Ruiz
Max Andy Diaz Neyra
Roberto Carlos Martinez Loredo
Roberto Medina
Sebastian Heredia
John Ruiz
John Ruiz
Angel Eduardo Quispe Pomajulca
Héctor Antonio Jiménez Manzo
Héctor Antonio Jiménez Manzo
José Alonso Paredes Marin
marlong yesith mendoza garcia
Les 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 😁👍👍