Ledger Nano X - The secure hardware wallet
SHARE
TWEET

Tu primer WebApp

a guest Apr 7th, 2020 727 in 121 days
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="es-AR">
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  8.     <link rel="stylesheet" href="css/bootstrap.min.css">
  9.     <link rel="stylesheet" href="css/heroic-features.css">
  10.     <link rel="stylesheet" href="css/nerdflix.css">
  11.     <link rel="shortcut icon" href="img/favicon.ico">
  12.     <title>Nerdflix</title>
  13. </head>
  14.  
  15. <body>
  16.     <!-- Logo -->
  17.     <h1>
  18.         <img src="img/nerdflix.png" class="img-responsive">
  19.     </h1>
  20.     <div class="container">
  21.  
  22.         <!-- Titulo -->
  23.         <div class="row">
  24.             <div class="col-lg-12 text-center">
  25.                 <h3>Últimos Estrenos</h3>
  26.             </div>
  27.         </div>
  28.  
  29.         <!-- Catálogo -->
  30.         <div id="peliculas" class="row text-center">
  31.  
  32.             <!-- Ficha de Película -->
  33.             <div class="col-md-3 col-sm-4 pelicula hide">
  34.                 <div class="thumbnail">
  35.                     <img src="img/sin-foto.jpg" class="poster">
  36.                     <div class="caption">
  37.                         <h4 class="titulo">TITULO</h4>
  38.                         <p class="estreno">ESTRENO</p>
  39.                         <a href="#reproductor" class="btn btn-primary reproducir">Ver ahora</a>
  40.                         <p class="descripcion hide">ESTRENO</p>
  41.                     </div>
  42.                 </div>
  43.             </div>
  44.  
  45.         </div>
  46.  
  47.     </div>
  48.  
  49.     <!-- Reproductor -->
  50.     <div id="reproductor" class="container">
  51.  
  52.         <div class="row">
  53.             <div class="col-lg-12">
  54.                 <h1 class="page-header">
  55.                     <strong id="titulo">TITULO</strong> <time id="estreno">(1900)</time>
  56.                 </h1>
  57.             </div>
  58.         </div>
  59.  
  60.         <div class="row">
  61.  
  62.             <div class="col-sm-8">
  63.                 <iframe id="video" src="https://www.youtube.com/embed/DMxOk3AIAVU" class="embed-responsive-item" frameborder="0" allowfullscreen></iframe>
  64.                 <h3>Descripción:</h3>
  65.                 <p id="descripcion">UNA BREVE RESEÑA DE LA PELICULA</p>
  66.             </div>
  67.  
  68.             <div class="col-sm-4 text-center">
  69.                 <img id="poster" class="img-thumbnail img-responsive" src="img/sin-foto.jpg">
  70.             </div>
  71.  
  72.         </div>
  73.  
  74.     </div>
  75.  
  76.     <!-- Area para programar el funcionamiento -->
  77.     <script>
  78.         //https://drive.google.com/file/d/188V8JTlsPzhdQpGS6SFV_QhTewLTVNwe/view?usp=sharing
  79.  
  80.         fetch("http://gsx2json.com/api?id=1orQGJzOgHvKep6LJsZCmZgWM_sQOkPAZdZPEn9GFcm4&columns=false").then(procesarDatos)
  81.  
  82.         function procesarDatos(datos) {
  83.             datos.json().then(crearCatalogo)
  84.         }
  85.  
  86.         function crearCatalogo(peliculas) {
  87.             // console.log(procesarDatos)
  88.             peliculas.rows.forEach(crearPelicula)
  89.  
  90.         }
  91.  
  92.         function crearPelicula(pelicula) {
  93.             let ficha = document.querySelector(".pelicula").cloneNode(true)
  94.                 //let repro = document.querySelector("#reproductor").cloneNode(true)
  95.  
  96.             ficha.querySelector(".titulo").innerText = pelicula.titulo
  97.             ficha.querySelector(".estreno").innerText = pelicula.estreno
  98.             ficha.querySelector(".poster").src = pelicula.poster
  99.             ficha.querySelector(".descripcion").innerText = pelicula.descripcion
  100.  
  101.             // repro.querySelector("#video").src = pelicula.trailer
  102.             ficha.querySelector(".reproducir").src = pelicula.trailer
  103.             ficha.querySelector(".reproducir").onclick = verPelicula2
  104.  
  105.             ficha.classList.remove("hide")
  106.             document.querySelector("#peliculas").appendChild(ficha)
  107.                 //document.querySelector("#peliculas").appendChild(ficha)
  108.         }
  109.  
  110.         function verPelicula2() {
  111.             let repro = document.querySelector("#reproductor")
  112.             let pelicula = this.parentNode.parentNode
  113.                 //alert(pelicula.querySelector(".poster").src)
  114.             repro.querySelector("#video").src = pelicula.querySelector(".reproducir").src
  115.             repro.querySelector("#poster").src = pelicula.querySelector(".poster").src
  116.             repro.querySelector("#titulo").innerText = pelicula.querySelector(".titulo").innerText
  117.             repro.querySelector("#estreno").innerText = pelicula.querySelector(".estreno").innerText
  118.             repro.querySelector("#descripcion").innerText = pelicula.querySelector(".descripcion").innerText
  119.                 //alert(this.parentNode)
  120.                 //console.log(pelicula.querySelector(".titulo").innerText)
  121.  
  122.         }
  123.  
  124.         function verPelicula(pelicula) {
  125.  
  126.  
  127.             // let ficha = document.querySelector("#reproductor")
  128.             alert(pelicula.target)
  129.                 //ficha.querySelector("#titulo").innerText = pelicula.titulo
  130.                 //ficha.querySelector("#estreno").innerText = pelicula.estreno
  131.                 //ficha.querySelector("#descripcion").innerText = pelicula.descripcion
  132.  
  133.             //ficha.querySelector("#video").src = pelicula.trailer
  134.             //document.querySelector("#reproductor").appendChild(ficha)
  135.         }
  136.     </script>
  137. </body>
  138.  
  139. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top