Proyectos propuestos

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:

Por cierto, en el Curso Profesional de JavaScript también haceb un reproductor de video 😄

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í

Lo logré!, aquí están:

Reproductor:

• Proyecto
• Repo

Weather:

• Proyecto
• Repo

¿Qué opinan? ¿Estrellita a los repos? jeje…

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

https://openweathermap.org/api api

En Frontend Mentor también pueden encontrar retos interesantes para hacer.

Hola wenas a [email protected],

Por aqui dejo el ejercicio del weather y la repo. Aun me queda el del video y esta en process.

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/

Hola:

dejo mi proyecto del reproductor en git:
https://github.com/robmvsk/workshop-3-media

Me costo un poco, pero le puse varias cosas:

• Personalizar la barra de volumen
• Botón de play al cargar
• Barra de avance del video.
• Full-screen.
• Adelantar 25 segundos el vídeo.
• Atrasar 10 segundos el vídeo.
• Temporizador para ocultar/mostrar los controls

Así es como luce:

Saludos 😃

no pude subir mi app a un hosting porque la api que use pedia pagar por el certificado ssl, pero aqui mi resultado:

Esta es la página de envato tutorials: https://tutsplus.com/

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.

Dejo acá el repositorio del mi web del clima y la pueden ver aquí

se acepta cualquier critica al respecto

Hola:

dejo mi proyecto en git:
https://github.com/robmvsk/workshop-3-clima

Así es como luce:

Le puse diversas validaciones para practicar:
Sino ha tecleado una ciudad
Sino pones la api key
Sino existe la ciudad

Saludos 😃

Api key free para la chaviza

const API_KEY = b1b15e88fa797225412429c1c50c122a1r

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/

💚Acá les comparto la solución al reto que realice 🤗
📌Este es el link del repositorio en GitHub

Les comparto mi tercer taller
mi repositorio se los dejo aqui
y mi aplicación desplegada aqui

Hola!! comparto mi resultado

adjunto repo saludos!!
https://github.com/pabloInaipil/open-weather-app

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!!!

No es mucho pero es trabajo honesto.

Asi quedo mi proyecto:
Repo
Weather App

Hola, comparto con uds mi proyecto.
Para hacer el video player tomé como referencia este artículo:
https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/cross_browser_video_player
Me quedo así:
https://anlalvarezba.github.io/platzi-DOM-manipulation_project3/

les comparto mi resultado, personalice un poco el diseño 😄 , me costo un poco realizar el reto, aun no lo termino, quiero seguir añadiéndole cosas

https://ivankstro7.github.io/weatherApp/

Les comparto una manera muy sencilla que encontré para resolver el primer reto

En index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Web site created using create-snowpack-app"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="%PUBLIC_URL%/_dist_/index.css"
    />
    <title>Workshop 3 Manipulacion del DOM</title>
  </head>
  <body>
    <main>
      <div id="title" class="p-4 text-center font-black">
        <h2>Reproductor de video</h2>
      </div>
      <div id="text p-2">
        <p class="text-center">Proyecto creado para el curso de manipulacion del DOM en Platzi</p>
      </div>
      <div id="app">
      </div>
    </main>

    <!-- Add more scripts here -->
    <script type="module" src="%PUBLIC_URL%/_dist_/index.js"></script>
  </body>
</html>

En index.js

//url del video
const url ="URL del video que estes utilizando";

//llamando a la etiqueta que contiene el video
const mountNode = document.getElementById("app");

//creando el contenedor del video
const container = document.createElement("div");
container.id ="video_container";
container.className ="p-4 flex justify-center";


//Creando etiqueta video
const video = document.createElement("video");
video.src = url;
video.controls =true;
video.style.maxHeight = "360px"

//creando los hijos de los contenedores
mountNode.appendChild(container);
container.appendChild(video);

Mi App del clima: https://christbm.github.io/workshop3/

les comparto mi proyecto de weather app 😁😁
---------//---------//---------//---------//---------
https://marlong03.github.io/weatherApi/

Aquí esta mi proyecto:
https://github.com/JI-Villalobos/weather-api

Ahí va mi web del clima https://marinrmarco.github.io/consulta_clima/

Ejercicio en EnvatoTuts+

Aquí les comparto mi proyecto del clima

Aun le falta el responsive design pero pronto lo hare.

Repositorio: https://github.com/iamdiegoskr/WeatherApp

Saludos

Comparto como quedo el reto del clima: https://elclimakevin.netlify.app/

Repositorio de la aplicación del clima https://github.com/Danieru-AceRo/weatherApp

dom-weather.vercel.app

https://github.com/adranuz/web-tricks/tree/master/dom-weather

Les comparto mi desarrollo,

Aqui esta mi aporte, muy buen ejercicio aqui dejo el repositorio
https://github.com/felipetoroav/weatherApp

Yo tengo un reproductor del curso profesional de js y usa intersectionObserver y otras apis como serviceworkers y visibility change

Reproductor de video
Github Repo :https://github.com/Alexis-vg/video-player
Live URL : https://alexis-vg.github.io/video-player/

Github Repo: https://github.com/Alexis-vg/my-weather-app