58 - Desafío 5: Mostrar una imagen al azar de un perro recuperada mediante fetch
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 class="contenedor"> <div class="marco"> <img id="imagen1" class="perro"> </div> </div> <script src="funciones.js"></script> </body> </html>
* { margin: 0; padding: 0; } .contenedor { height: 100vh; display: flex; background-color: white; justify-content: center; align-items: center; } .perro { width: 600px; } .marco { padding: 1rem; background-color: white; border-radius: 5px; box-shadow: 0 0 10px black; }
function recuperarImagen() { fetch("https://dog.ceo/api/breeds/image/random") .then(respuesta => respuesta.json()) .then(datos => { document.querySelector("#imagen1").setAttribute("src", datos.message) }) } recuperarImagen() setInterval(recuperarImagen, 5000)
No tiene disponible el navegador la capacidad de iframe
Retornar