60 - Desafío 7: Consumir la API del sitio Dailymotion.com
Problema:
pagina.html
estilos.css
funciones.js
Ejecución de la página
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prueba</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <div id="datos"> </div> <script src="funciones.js"></script> </body> </html>
#datos { display: flex; flex-wrap: wrap; margin: 0 auto; max-width: 1400px; } .tarjeta { width: 400px; margin: 20px; border: 1px solid gray; box-shadow: 0 0 10px black; border-radius: 10px; background-color: lightgray; } .tarjeta img { width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px; } .tarjeta p { margin: 10px; font-family: cursive; font-size: 1.2rem; }
fetch("https://api.dailymotion.com/videos?limit=100") .then(response => response.json()) .then(datos => { let cadena = '' for (let reg of datos.list) cadena += `<div class="tarjeta"><a target="_blank" href="https://www.dailymotion.com/video/${reg.id}"> <img src="https://www.dailymotion.com/thumbnail/video/${reg.id}"></a><br><p>${reg.title}</p></div>` document.querySelector("#datos").innerHTML = cadena })
No tiene disponible el navegador la capacidad de iframe
Retornar