Proyectos propuestos

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…

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 😄

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

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

https://openweathermap.org/api 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/

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/

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.

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:

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.

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/

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 😃

Asi quedo mi proyecto:
Repo
Weather App

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

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

Justo habia hecho este proyecto hace poco, el primero con una API que hice de hecho.
WeatherApp Netlify
Mi repo

Interesante!

Comparto mi proyecto… tarde un poco pero use otros dos llamados a API. Que tal me quedo?

API de clima
API de nombre de paises
API de banderas

Aquí

Repo:
https://github.com/Vale-78/Video-ManipDom

Link Video:
https://vale-78.github.io/Video-ManipDom/

https://danieljher21.github.io/app-weather/ os comparto la mia

Les dejo mi proyecto del clima y el repositorio

Weather App:
Demo: https://carlitoxe.github.io/workshop-weather-app/
Repo: https://github.com/carlitoxe/workshop-weather-app

Video Player:
Demo: https://carlitoxe.github.io/video-player/
Repo: https://github.com/carlitoxe/video-player

Acá dejo mi aporte 😁😁:

me parecio mas divertido hacer una pagina de frases:
https://inmortalini.github.io/Advice-generator-app/

https://whip-soil-3b5.notion.site/Proyectos-propuestos-9a6d47b00a8041dbbabc68707665a2ca

Si llegaron hasta aquí felicitaciones. espero les sirva de ayuda mi aporte, el código esta comentado para que lo comprendan mejor por partes…
Aquí les comparto mi: repo
Aquí les comparto mi: weatherApp

Retos completados!
↓

• video-player
• repo
  .
  .
  .
  ↓
• weather app
• repo

Por aquí mi aporte:

Repo: Link

He realizado la app del clima

Sitio
Repo

Hola chic@s espero que esten bien!!
aquí les comparto mi proyecto:

la hice tomando un poco de ideas 😉

Mi proyecto:

Buenas noches,

comparto URL del proyecto (reproductor de video).

https://github.com/jhyate/platzi-manipulacion-dom-workshop-3.git

Gracias.

Hay una propiedad llamada controls, esta puede ser ‘true’ o ‘false’. Esta propiedad hace todo el reto planteado por el profesor (reto del reproductor de video).Espero a alguien le sirva.

Y después de varios días y muchos errores al fiiiiin!!! quedó mi app, vaya que se aprende un montón haciendo por cuenta propia
Aquí está desplegada por si quieren darle un vistazo Weather App

Repo github
Page desplegada en netlify

No es mucho pero es trabajo honesto.

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/

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