56 - Desafío 3: Mostrar en tajetas todas las banderas de paises del mundo
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="banderas"> </div> <script src="funciones.js"></script> </body> </html>
#banderas { display: flex; flex-wrap: wrap; margin: 0 auto; } .tarjeta { width: 400px; margin: 20px; border: 1px solid gray; box-shadow: 0 0 10px black; border-radius: 10px; background-color: lightgray; padding: 10px; } .tarjeta img { width: 100%; border-radius: 10px; } .tarjeta p { margin: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 1rem; }
fetch("https://restcountries.com/v3.1/all") .then(response => response.json()) .then(datos => { let banderas = '' for (let pais of datos) { banderas += `<div class="tarjeta"><img src="${pais.flags.png}"><br> <p>Pais:${pais.name.common}</p> <p>Capital:${pais.capital}</p> <p>Población:${pais.population}</p> <p>Continente:${pais.region}</p> </div>` } const elemento = document.querySelector("#banderas") elemento.innerHTML = banderas })
No tiene disponible el navegador la capacidad de iframe
Retornar