No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Proyectos propuestos

25/28
Recursos

Aportes 59

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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:

Weather:

驴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/

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/

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

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

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.

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

Les dejo mi proyecto del clima y el repositorio

Ac谩 dejo mi aporte 馃榿馃榿:

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

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!

Por aqu铆 mi aporte:

Repo: Link

He realizado la app del clima

Sitio
Repo

Hola [email protected] 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 鈥榯rue鈥 o 鈥榝alse鈥. 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);

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

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