Renderizar tarjetas
● Introducción
En este ejercicio práctico básico aprenderás a renderizar una cierta cantidad de tarjetas como anticipo a la renderización (mostrar información en pantalla) de información proveniente de una base de datos. Por ahora, lo haremos a partir de un array (o vector en español) de objetos (conjunto de datos o propiedades de un item).
De a poco incorporamos a nuestro lenguaje vocabulario de programación.Podés visitar el ejercicio que desarrollaremos aquí.↩
● Preparación
- ◆ Creamos una carpeta y la abrimos con Visual Studio Code.
- ◆ Generamos el archivo index.html , style.css y script.js.
- ◆ Conectamos en el index.html las etiquetas link y script.
- ◆ Correjimos el lenguaje y completamos el título.
- ◆ Agregamos las etiquetas meta según nuestro objetivo con los buscadores y la difusión de este sitio en redes.
● HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Renderizar tarjetas (mostrar tarjetas en pantalla)</title>
</head>
<body>
<header>
<h1>Exploramos Países en el Mundo</h1>
<p>Aprendemos geografía programando</p>
</header>
<div class="barra-filtrado">
<div class="buscador-input">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#666"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
<input type="text" placeholder="Buscar por País, Continente, Capital o Actividad...">
</div>
<div class="botones-buscadores">
<button class="btn-filter activo" data-filter="Todos">Todos</button>
<button class="btn-filter" data-filter="América">América</button>
<button class="btn-filter" data-filter="Europa">Europa</button>
<button class="btn-filter" data-filter="África">África</button>
<button class="btn-filter" data-filter="Asia">Asia</button>
<button class="btn-filter" data-filter="Oceanía">Oceanía</button>
</div>
</div>
<main>
</main>
<!-- VENTANA EMERGENTE (MODAL) -->
<div class="modal-superpuesto" id="modalSuperpuesto">
<div class="modal-contenedor">
<button class="modal-cerrar" id="modalCerrar">×</button>
<div class="modal-encabezado">
<h2 id="modalTitulo">Nombre del País</h2>
</div>
<div class="modal-contenido">
<h3>🏛️ Historia</h3>
<p id="modalHis">Cargando información histórica...</p>
<h3>🌍 Geografía y Clima</h3>
<p id="modalGeo">Cargando información geográfica...</p>
</div>
</div>
</div>
<footer>
<p>Creado para fines didácticos por <strong>caterinaweb.net</strong></p>
</footer>
<script src="script.js"></script>
</body>
</html>● CSS
/* --- ESTILOS GENERALES --- */
:root {
--color-fondo: #f3f3f3;
--fondo-tarjeta: #ffffff;
--texto-principal: #1b1b1b;
--texto-atenuado: #555555;
--color-resaltador: #0078d4; /* Azul Microsoft */
--color-resaltador-hover: #005a9e;
--radio: 8px;
--sombra: 0 4px 12px rgba(0,0,0,0.08);
--sombra-hover: 0 8px 24px rgba(0,0,0,0.15);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
::selection{
background-color: var(--color-resaltador);
color: white;
}
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
background-color: var(--color-fondo);
color: var(--texto-principal);
}
header{
max-width: 1400px;
margin: 0 auto 30px auto;
text-align: center;
}
header h1 {
font-size: 2.2rem;
font-weight: 700;
color: #111;
margin-bottom: 8px;
}
header p {
color: var(--texto-atenuado);
font-size: 1rem;
}
.barra-filtrado{
background: var(--fondo-tarjeta);
max-width: 1400px;
margin: 0 auto 30px auto;
padding: 15px 20px;
border-radius: var(--radio);
box-shadow: var(--sombra);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap:15px;
}
.barra-filtrado .buscador-input{
flex: 1 1 300px;
position: relative;
}
.barra-filtrado .buscador-input svg{
position: absolute;
top:50%;
left: 10px;
transform: translateY(-50%);
}
.barra-filtrado .buscador-input input{
width: 100%;
padding: 12px 16px 12px 40px;
font-size: 0.95rem;
border: 1px solid #ccc;
border-radius: 36px;
outline: none;
transition: border-color 0.2s;
}
.barra-filtrado .buscador-input input:focus{
border-color: var(--color-resaltador);
box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}
.barra-filtrado .botones-buscadores{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap:8px;
margin: 0 auto;
}
.barra-filtrado .botones-buscadores button{
background: #e5e5e5;
border: none;
padding: 8px 16px 9px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
color: #333;
}
.barra-filtrado .botones-buscadores button:hover, .barra-filtrado .botones-buscadores button.activo {
background-color: var(--color-resaltador);
color: white;
}
main{
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
/* tarjeta */
main .tarjeta{
background: var(--fondo-tarjeta);
border-radius: var(--radio);
overflow: hidden;
box-shadow: var(--sombra-hover);
transition: transform 0.25s ease, box-shadow 0.25s ease;
display: flex;
flex-direction: column;
cursor: pointer;
position: relative;
border: 1px solid rgba(0,0,0,0.05);
}
main .tarjeta:hover{
transform: translateY(-5px);
box-shadow: var(--sombra-hover);
}
main .tarjeta:nth-child(11n+1){
grid-column: span 2;
max-height: 400px;
}
main .tarjeta .imagen{
width: 100%;
height: 180px;
overflow: hidden;
/* para poner el continente */
position: relative;
}
main .tarjeta:nth-child(11n+1) .imagen{
height: 100%;
}
main .tarjeta .imagen img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
main .tarjeta:hover .imagen img{
transform: scale(1.05);
}
main .tarjeta .imagen span{
position: absolute;
top: 12px;
left: 12px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 4px 10px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
backdrop-filter: blur(4px);
}
main .tarjeta .contenido{
padding: 16px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
main .tarjeta:nth-child(11n+1) .contenido{
position: absolute;
bottom: 0;
background-color: rgba(255,255,255,0.3);
width: 100%;
}
main .tarjeta .contenido .encabezado{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
main .tarjeta .contenido .encabezado h2{
font-size: 1.25rem;
font-weight: 700;
color: var(--texto-principal);
}
main .tarjeta:nth-child(11n+1) .contenido .encabezado h2{
text-shadow: 0 10px 20px rgba(255,255,255,0.9);
}
main .tarjeta .contenido p{
font-size: 0.85rem;
color: var(--texto-atenuado);
margin-bottom: 12px;
line-height: 1.4;
}
main .tarjeta:nth-child(11n+1) .contenido p{
display: none;
}
main .tarjeta:nth-child(11n+1) .contenido img{
box-shadow: 0 10px 20px rgba(255,255,255,0.9);
}
main .tarjeta .contenido .actividades {
margin-bottom: 15px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
main .tarjeta .contenido .actividades span{
background: #f0f4f8;
color: var(--color-resaltador);
font-size: 0.75rem;
padding: 4px 8px;
border-radius: 4px;
font-weight: 600;
}
/* Botón de la tarjeta */
main .tarjeta .contenido button {
margin-top: auto;
background: var(--color-resaltador);
color: white;
border: none;
padding: 10px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
text-align: center;
transition: background 0.2s;
}
main .tarjeta .contenido button:hover {
background: var(--color-resaltador-hover);
}
footer{
margin: 32px auto;
text-align: center;
color: var(--texto-atenuado)
}
/* --- VENTANA MODAL / EMERGENTE --- */
.modal-superpuesto {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1000;
}
.modal-superpuesto.active {
opacity: 1;
pointer-events: all;
}
.modal-contenedor {
background: #ffffff;
width: 90%;
max-width: 650px;
max-height: 85vh;
border-radius: 12px;
overflow-y: auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
transform: translateY(20px);
transition: transform 0.3s ease;
position: relative;
padding: 25px;
}
.modal-superpuesto.active .modal-contenedor {
transform: translateY(0);
}
.modal-cerrar {
position: absolute;
top: 15px;
right: 15px;
background: #f0f0f0;
border: none;
font-size: 1.2rem;
font-weight: bold;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
color: #333;
transition: background 0.2s;
}
.modal-cerrar:hover {
background: #e0e0e0;
}
.modal-encabezado {
display: flex;
align-items: center;
gap: 12px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 12px;
margin-bottom: 15px;
}
.modal-encabezado h2 {
font-size: 1.6rem;
color: #111;
}
.modal-contenido h3 {
font-size: 1.1rem;
color: var(--primary);
margin-top: 15px;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.modal-contenido p {
font-size: 0.95rem;
color: #444;
line-height: 1.6;
text-align: justify;
}
/* En CSS Grid, la propiedad grid-column: 1 / -1; se utiliza para hacer que un elemento ocupe todo el ancho disponible de la cuadrícula, expandiéndose desde la primera columna hasta la última.Aquí te explico detalladamente cómo funciona:El número 1: Indica que el elemento debe comenzar en la línea de cuadrícula número 1 (el borde izquierdo del grid).La barra /: Es simplemente el separador que divide la línea de inicio y la línea de fin.El número -1: En CSS Grid, los números negativos cuentan las líneas desde el final hacia atrás. El -1 representa la última línea de la cuadrícula, sin importar cuántas columnas tenga configuradas tu diseño. */
.sin-resultados {
grid-column: 1 / -1;
text-align: center;
padding: 40px;
color: var(--text-muted);
font-size: 1.2rem;
}
@media (max-width:768px) {
main .tarjeta{
max-width: 350px;
margin: auto;
}
main .tarjeta:nth-child(11n+1){
grid-column: span 1;
max-height: auto;
}
main .tarjeta:nth-child(11n+1) .imagen{
height: 180px;
}
main .tarjeta:nth-child(11n+1) .contenido{
position: static;
background-color: transparent;
}
main .tarjeta:nth-child(11n+1) .contenido .encabezado h2{
text-shadow:none;
}
main .tarjeta:nth-child(11n+1) .contenido p{
display: block;
}
}● Javascript
const paises = [
// AMÉRICA
{ id: 1, nombre: "Argentina", continente: "América", capital: "Buenos Aires", bandera: "ar", img: "imagenes/argentina.jpg", desc: "Tierra del Tango, Patagonia y la mejor carne. Playas, teatros, montañas.", actividades: ["Trekking", "Tango", "Gastronomía", "Playas"], historia: "Declaró su independencia en 1816. Atravesó un rápido desarrollo agroexportador a finales del siglo XIX y tuvo una fuerte influencia de la inmigración europea.", geo: "Ubicada en el sur de América del Sur. Posee desde climas subtropicales en el norte hasta glaciares en el sur, dominados por la cordillera de los Andes al oeste." },
{ id: 2, nombre: "Brasil", continente: "América", capital: "Brasilia", bandera: "br", img: "imagenes/brasil.jpg", desc: "Famoso por el Carnaval, las playas de Río y el Amazonas.", actividades: ["Playa", "Carnaval", "Selva"], historia: "La historia de Brasil comenzó formalmente en 1500, cuando la expedición portuguesa de Pedro Álvares Cabral llegó a sus costas. A partir de ese momento, la corona lusitana inició la colonización de este inmenso territorio americano. Durante los primeros siglos, la economía colonial se basó principalmente en la extracción del palo brasil. Posteriormente, los colonizadores introdujeron el cultivo a gran escala de la caña de azúcar. Este sistema agrícola dependió profundamente de la explotación de millones de esclavos traídos de África.En el siglo XVIII, el descubrimiento de oro y diamantes en la región de Minas Gerais desplazó el eje económico hacia el sur. El panorama cambió drásticamente en 1808, cuando la corte portuguesa se trasladó a Río de Janeiro huyendo de las tropas de Napoleón. Esta mudanza elevó el estatus del territorio, que dejó de ser una colonia tradicional para convertirse en un reino. En 1822, el príncipe regente proclamó la independencia y se coronó como Don Pedro I, naciendo así el Imperio de Brasil.Su hijo, Pedro II, gobernó durante un largo periodo de estabilidad, marcado por el auge del café y la abolición de la esclavitud en 1888. El fin de la esclavitud debilitó el apoyo de los terratenientes al emperador, lo que facilitó un golpe militar en 1889. Así se proclamó la República, que alternó el poder entre las oligarquías cafetaleras de São Paulo y Minas Gerais. En 1930, el líder político Getúlio Vargas llegó al poder e impulsó la industrialización y los derechos laborales del país.Tras varias décadas de inestabilidad, un golpe militar instauró una dictadura en 1964 que se prolongó por veintiún años. El régimen militar censuró a la oposición, pero también promovió grandes proyectos de infraestructura y crecimiento económico. La democracia regresó finalmente en 1985 con la elección de un gobierno civil y la posterior constitución de 1988. En el siglo XXI, Brasil consolidó su posición como una potencia económica global, alternando gobiernos de diferentes ideologías.", geo: "Brasil posee una geografía monumental y diversa que lo convierte en el país más grande de América del Sur y el quinto a nivel mundial. Su vasto territorio limita con casi todos los países de la región, exceptuando únicamente a Chile y Ecuador. El rasgo geográfico más emblemático del país es la Amazonía, la cual alberga la mayor selva tropical del planeta y una biodiversidad inigualable. Por esta llanura fluye el río Amazonas, que destaca como el más caudaloso del mundo y una arteria vital para el ecosistema global.Hacia el sur y el centro, el paisaje cambia drásticamente para dar paso al Planalto Brasileño, una extensa región de mesetas y sierras antiguas. En esta zona predomina el bioma del Cerrado, una vasta sabana tropical que convive con la Caatinga, un área semiárida ubicada en el noreste. Más al oeste se extiende el Pantanal, uno de los humedales de agua dulce más grandes y ricos en fauna del continente.La costa brasileña está bañada enteramente por el océano Atlántico, extendiéndose a lo largo de más de siete mil kilómetros de playas, bahías y acantilados. A pesar de su inmensidad, el relieve de Brasil es predominantemente bajo y moderado, careciendo de cordilleras de extrema altura. Su punto más elevado es el Pico da Neblina, situado en la frontera septentrional con Venezuela, el cual roza los tres mil metros de altitud.El clima del país es mayoritariamente tropical y ecuatorial, lo que propicia temperaturas cálidas y lluvias abundantes durante gran parte del año. No obstante, las regiones del extremo sur experimentan un clima subtropical, donde las estaciones están bien marcadas y pueden registrarse heladas invernales. Esta asombrosa variedad de relieves, climas y recursos hídricos consolida a Brasil como una de las mayores potencias ecológicas y agrícolas del mundo." },
{ id: 3, nombre: "Canadá", continente: "América", capital: "Ottawa", bandera: "ca", img: "imagenes/canada.jpg", desc: "Naturaleza salvaje, lagos cristalinos y auroras boreales.", actividades: ["Esquí", "Auroras Boreales", "Canoa"], historia: "Habitado originalmente por las Primeras Naciones, fue colonizado por franceses y británicos. Se independizó pacíficamente del Reino Unido en 1867.", geo: "Segundo país más extenso del mundo. Su clima es frío/continenteal con vastos bosques boreales, las Montañas Rocosas y miles de lagos fríos." },
{ id: 4, nombre: "Estados Unidos", continente: "América", capital: "Washington D.C.", bandera: "us", img: "imagenes/usa.jpg", desc: "Parques nacionales, metrópolis e industria del entretenimiento.", actividades: ["Rascacielos", "Parques Temáticos", "Compras"], historia: "Se independizó de Gran Bretaña en 1776 con sus 13 colonias iniciales. Durante el siglo XX emergió como una superpotencia global económica y militar.", geo: "Abarca gran parte de Norteamérica con fronteras en dos océanos. Presenta desiertos, llanuras fértiles, montañas altiplánicas y bosques templados." },
{ id: 5, nombre: "México", continente: "América", capital: "Ciudad de México", bandera: "mx", img: "imagenes/mexico.jpg", desc: "Rica cultura ancestral, pirámides y playas caribeñas.", actividades: ["Arqueología", "Gastronomía", "Buceo"], historia: "Cuna de grandes civilizaciones como los Mayas y Aztecas. Tras el dominio español, obtuvo su independencia en 1821 preservando una profunda herencia mestiza.", geo: "Ubicado en el sur de Norteamérica. Cuenta con mesetas centrales, dos grandes sierras madres, selvas tropicales y penínsulas icónicas como Yucatán." },
{ id: 6, nombre: "Colombia", continente: "América", capital: "Bogotá", bandera: "co", img: "imagenes/colombia.jpg", desc: "Capital del café, biodiversidad y la calidez de su gente.", actividades: ["Ruta del Café", "Salsa", "Biodiversidad"], historia: "Punto clave de la ruta española en el Caribe, obtuvo su independencia liderada por Simón Bolívar en 1819 formándose como parte de la Gran Colombia.", geo: "Único país de Sudamérica con costas en el Pacífico y el Caribe. Cruzado por tres cordilleras andinas, con valles fértiles y acceso a la Amazonía." },
{ id: 7, nombre: "Perú", continente: "América", capital: "Lima", bandera: "pe", img: "imagenes/peru.jpg", desc: "Hogar de Machu Picchu y una gastronomía de clase mundial.", actividades: ["Senderismo Inca", "Gastronomía", "Historia"], historia: "Centro del vasto Imperio Incaico. En el periodo colonial fue el Virreinato más próspero de Sudamérica antes de proclamar su independencia en 1821.", geo: "Posee una costa desértica, la imponente Sierra de los Andes y la vasta Selva Amazónica al este que cubre más del 50% de su territorio." },
{ id: 8, nombre: "Chile", continente: "América", capital: "Santiago", bandera: "cl", img: "imagenes/chile.jpg", desc: "Desde el desierto más árido hasta imponentes glaciares.", actividades: ["Astronomía", "Vinos", "Glaciares"], historia: "Logró su independencia en 1818. Durante el siglo XX se consolidó mediante una economía sólida impulsada por la minería y la agricultura de exportación.", geo: "Un país largo y estrecho entre la Cordillera de los Andes y el Océano Pacífico. Incluye el desierto de Atacama y la árida Patagonia." },
{ id: 9, nombre: "Costa Rica", continente: "América", capital: "San José", bandera: "cr", img: "imagenes/costarica.jpg", desc: "Pionero en turismo ecológico y estilo de vida 'Pura Vida'.", actividades: ["Canopy", "Surf", "Volcanes"], historia: "Obtuvo la independencia en 1821. Destaca globalmente por haber abolido su ejército en 1948 para destinar presupuesto a la educación y salud.", geo: "Ubicado en Centroamérica. Presenta un ecosistema con más del 5% de la biodiversidad mundial, cordilleras volcánicas y costas en el Pacífico y Caribe." },
{ id: 10, nombre: "Uruguay", continente: "América", capital: "Montevideo", bandera: "uy", img: "imagenes/uruguay.jpg", desc: "Tranquilidad, magníficas costas atlánticas y tradición de mate.", actividades: ["Playa", "Turismo Rural", "Punta del Este"], historia: "Fundado como estado tapón tras conflictos entre Brasil y Argentina, proclamó su independencia en 1825, convirtiéndose en una democracia pionera.", geo: "Caracterizado por llanuras suaves, colinas bajas (cuchillas) y una extensa franja costera a lo largo del Río de la Plata y el Océano Atlántico." },
// EUROPA
{ id: 11, nombre: "España", continente: "Europa", capital: "Madrid", bandera: "es", img: "imagenes/espana.jpg", desc: "Historia flamenca, arquitectura impresionante y tapas únicas.", actividades: ["Flamenco", "Tapas", "Arquitectura"], historia: "Unificada en el siglo XV tras la Reconquista, forjó un imperio global. Pasó a ser una democracia moderna tras la Constitución de 1978.", geo: "Ocupa la mayor parte de la península ibérica. Ofrece mesetas centrales altiplánicas, cordilleras como los Pirineos y amplias costas mediterráneas." },
{ id: 12, nombre: "Francia", continente: "Europa", capital: "París", bandera: "fr", img: "imagenes/francia.jpg", desc: "El país del arte, la moda, el vino y la romántica Torre Eiffel.", actividades: ["Arte", "Vinos", "Moda"], historia: "La Revolución Francesa de 1789 cambió la historia política mundial promoviendo la libertad y la democracia. Referente cultural de Europa por siglos.", geo: "Posee una geografía variada que abarca desde las llanuras del norte hasta los imponentes Alpes en el este y los Pirineos en el sur." },
{ id: 13, nombre: "Italia", continente: "Europa", capital: "Roma", bandera: "it", img: "imagenes/italia.jpg", desc: "Cuna del Imperio Romano, pizzas, pastas y arte renacentista.", actividades: ["Historia", "Gastronomía", "Arte"], historia: "Cuna de la civilización romana y del Renacimiento. Se unificó como estado moderno en el siglo XIX (1861).", geo: "Una península en forma de bota que se adentra en el mar Mediterráneo, rodeada por los Alpes en el norte y volcanes como el Vesubio." },
{ id: 14, nombre: "Alemania", continente: "Europa", capital: "Berlín", bandera: "de", img: "imagenes/alemania.jpg", desc: "Ingeniería avanzada, castillos de cuento y el Oktoberfest.", actividades: ["Cerveza", "Castillos", "Tecnología"], historia: "Unificada en 1871. Tras la Segunda Guerra Mundial estuvo dividida en dos bloques hasta la histórica caída del Muro de Berlín en 1989.", geo: "Ubicada en el centro de Europa. Va desde las llanuras del mar del Norte hasta los Alpes Bávaros, atravesada por ríos como el Rin y el Danubio." },
{ id: 15, nombre: "Reino Unido", continente: "Europa", capital: "Londres", bandera: "gb", img: "imagenes/reinounido.jpg", desc: "Tradición monárquica, museos célebres y paisajes verdes.", actividades: ["Museos", "Teatro", "Té de la tarde"], historia: "Cuna de la Revolución Industrial y del mayor imperio colonial colonial en el siglo XIX. Pionero del parlamentarismo moderno.", geo: "Nación insular compuesta por Gran Bretaña e Irlanda del Norte. Terreno de colinas suaves, tierras altas en Escocia y costas rocosas." },
{ id: 16, nombre: "Suiza", continente: "Europa", capital: "Berna", bandera: "ch", img: "imagenes/suiza.jpg", desc: "Famosa por sus Alpes, relojes de precisión y chocolates.", actividades: ["Esquí", "Trenes alpinos", "Chocolates"], historia: "Fundada en 1291 como una confederación defensiva. Destaca por su histórica neutralidad internacional y democracia directa.", geo: "País sin salida al mar dominado geográficamente por la cordillera de los Alpes, con valles profundos y cientos de lagos de origen glaciar." },
{ id: 17, nombre: "Grecia", continente: "Europa", capital: "Atenas", bandera: "gr", img: "imagenes/grecia.jpg", desc: "Cuna de la civilización occidental e islas de ensueño.", actividades: ["Mitología", "Cruceros", "Arqueología"], historia: "Considerada la cuna de la filosofía, los Juegos Olímpicos y la democracia. Su legado filosófico sentó las bases de Occidente.", geo: "Ubicada en el extremo sur de los Balcanes. Incluye miles de islas en los mares Egeo y Jónico y un relieve interior altamente montañoso." },
{ id: 18, nombre: "Países Bajos", continente: "Europa", capital: "Ámsterdam", bandera: "nl", img: "imagenes/paisesbajos.jpg", desc: "Tierra de tulipanes, molinos de viento y miles de bicicletas.", actividades: ["Ciclismo", "Canales", "Tulipanes"], historia: "Potencia marítima y comercial global en el siglo XVII (Siglo de Oro neerlandés). Destaca por su innovación en ingeniería hidráulica.", geo: "Gran parte de su superficie se encuentra bajo el nivel del mar, ganando terreno gracias a pólders, diques y canales característicos." },
{ id: 19, nombre: "Noruega", continente: "Europa", capital: "Oslo", bandera: "no", img: "imagenes/noruega.jpg", desc: "Impresionantes fiordos, sol de medianoche y auroras.", actividades: ["Fiordos", "Cruceros", "Auroras"], historia: "Era vikinga desde el siglo VIII. Tras uniones históricas con Dinamarca y Suecia, recuperó su plena independencia en 1905.", geo: "Famosa por su costa dentada recortada por profundos fiordos glaciares, montañas árticas y acceso al Círculo Polar Ártico." },
{ id: 20, nombre: "Portugal", continente: "Europa", capital: "Lisboa", bandera: "pt", img: "imagenes/portugal.jpg", desc: "Costas atlánticas, azulejos tradicionales y fado encantador.", actividades: ["Surf", "Fado", "Gastronomía"], historia: "Pionero mundial en la Era de los Descubrimientos marítimos durante los siglos XV y XVI, explorando rutas hacia Asia y América.", geo: "Ubicado en el suroeste europeo en la península ibérica, con extensas playas atlánticas, colinas verdes y archipiélagos (Madeira y Azores)." },
// ASIA
{ id: 21, nombre: "Japón", continente: "Asia", capital: "Tokio", bandera: "jp", img: "imagenes/japon.jpg", desc: "Contraste perfecto entre tecnología futurista y tradiciones.", actividades: ["Anime", "Onsen", "Tecnología"], historia: "Siglos de aislamiento feudal bajo shogunes terminaron en la Era Meiji (1868), transformándose en potencia global y tecnológica.", geo: "Archipiélago volcánico en el Anillo de Fuego del Pacífico. Montañoso en más de un 70%, coronado por el volcán activo Monte Fuji." },
{ id: 22, nombre: "China", continente: "Asia", capital: "Pekín", bandera: "cn", img: "imagenes/china.jpg", desc: "La Gran Muralla, rascacielos y milenaria herencia cultural.", actividades: ["Muralla China", "Kung Fu", "Rascacielos"], historia: "Una de las civilizaciones continuas más antiguas del mundo, gobernada por dinastías imperiales hasta 1912 y convertida en República Popular en 1949.", geo: "Tercer país más grande del mundo. Contiene desde el desierto de Gobi y la meseta del Tíbet hasta fértiles llanuras fluviales al este." },
{ id: 23, nombre: "India", continente: "Asia", capital: "Nueva Delhi", bandera: "in", img: "imagenes/india.jpg", desc: "Tierra de especias, espiritualidad y el icónico Taj Mahal.", actividades: ["Yoga", "Espiritualidad", "Especias"], historia: "Cuna del Hinduismo y Budismo. Logró la independencia del Imperio Británico en 1947 bajo el liderazgo pacifista de Mahatma Gandhi.", geo: "Subcontinentee asiático rodeado por el Océano Índico. Delimitado al norte por los picos del Himalaya y al sur por mesetas y costas." },
{ id: 24, nombre: "Tailandia", continente: "Asia", capital: "Bangkok", bandera: "th", img: "imagenes/tailandia.jpg", desc: "Templos dorados, cocina picante y playas paradisíacas.", actividades: ["Comida Callejera", "Masajes", "Templos"], historia: "Único país del sudeste asiático que nunca fue colonizado por potencias europeas, manteniendo su histórica monarquía tradicional.", geo: "Ubicado en el centro de la península de Indochina. Cuenta con selvas en el norte, llanuras fértiles centrales e islas de agua cristalina al sur." },
{ id: 25, nombre: "Corea del Sur", continente: "Asia", capital: "Seúl", bandera: "kr", img: "imagenes/corea.jpg", desc: "K-Pop, belleza, tecnología y deliciosa comida barbacoa.", actividades: ["K-Pop", "Tecnología", "Compras"], historia: "Tras la Guerra de Corea (1950-1953), el país experimentó un asombroso desarrollo económico conocido como el 'Milagro del Río Han'.", geo: "Ocupa la mitad sur de la península de Corea. Territorio predominantemente montañoso con una extensa línea costera e islas." },
{ id: 26, nombre: "Indonesia", continente: "Asia", capital: "Yakarta", bandera: "id", img: "imagenes/indonesia.jpg", desc: "Archipiélago volcánico con el famoso paraíso de Bali.", actividades: ["Surf", "Volcanes", "Templos"], historia: "Antigua colonia holandesa (Indias Orientales Neerlandesas), declaró su independencia en 1945 agrupando a cientos de etnias diversas.", geo: "El estado insular más grande del mundo con más de 17.000 islas. Atraviesa el ecuador con exuberante selva y docenas de volcanes activos." },
{ id: 27, nombre: "Vietnam", continente: "Asia", capital: "Hanói", bandera: "vn", img: "imagenes/vietnam.jpg", desc: "Paisajes kársticos en Ha Long, historia y gran gastronomía.", actividades: ["Navegación", "Café", "Mercados"], historia: "Con una resistencia histórica ante dominios extranjeros, unificó el país tras el fin de la Guerra de Vietnam en 1975.", geo: "Tiene forma de 'S' a lo largo de la costa del Mar de la China Meridional. Destaca por el delta del río Mekong y la bahía de Ha Long." },
{ id: 28, nombre: "Emiratos Árabes", continente: "Asia", capital: "Abu Dabi", bandera: "ae", img: "imagenes/emiratos.jpg", desc: "Lujo, rascacielos imponentes y experiencias en el desierto.", actividades: ["Safari Desierto", "Rascacielos", "Compras"], historia: "Federación de 7 emiratos formada en 1971. Transformó radicalmente su economía nómada a raíz del descubrimiento de petróleo.", geo: "Ubicado en la península arábiga. Dominado por desiertos de arena (como Rub al-Jali) y una moderna franja costera en el Golfo Pérsico." },
{ id: 29, nombre: "Maldivas", continente: "Asia", capital: "Malé", bandera: "mv", img: "imagenes/maldivas.jpg", desc: "Bungalows sobre aguas cristalinas e increíbles corales.", actividades: ["Buceo", "Resorts sobre Agua", "Snorkel"], historia: "Protectorado británico hasta 1965. Es una república islámica que se ha posicionado como referente del turismo sostenible de lujo.", geo: "País insular en el Océano Índico formado por 26 atolones de coral. Es el país más plano y de menor altitud media del mundo." },
{ id: 30, nombre: "Singapur", continente: "Asia", capital: "Singapur", bandera: "sg", img: "imagenes/singapur.jpg", desc: "Ciudad-Estado ultra moderna, limpia y futurista.", actividades: ["Jardines", "Arquitectura", "Compras"], historia: "Fundada como puerto comercial británico en 1819. Se independizó en 1965 y se convirtió en uno de los centros financieros globales más prósperos.", geo: "Ubicada en el extremo sur de la península de Malasia. Es una isla-estado altamente urbanizada e innovadora en arquitectura verde." },
// ÁFRICA
{ id: 31, nombre: "Egipto", continente: "África", capital: "El Cairo", bandera: "eg", img: "imagenes/egipto.jpg", desc: "Faraones, las grandes Pirámides y cruceros en el Río Nilo.", actividades: ["Pirámides", "Crucero Nilo", "Historia"], historia: "Una de las civilizaciones más antiguas e influyentes del mundo antiguo, nacida hace más de 5.000 años a orillas del fértil río Nilo.", geo: "Ubicado en el noreste de África. Dominado casi por completo por el desierto del Sáhara, excepto por el fértil valle y delta del Nilo." },
{ id: 32, nombre: "Sudáfrica", continente: "África", capital: "Pretoria", bandera: "za", img: "imagenes/sudafrica.jpg", desc: "La nación del arcoíris, safaris y Ciudad del Cabo.", actividades: ["Safari", "Vinos", "Montaña"], historia: "Marcada por el régimen de segregación racial (Apartheid), transitó a la democracia pacífica en 1994 liderada por Nelson Mandela.", geo: "Situada en el extremo sur del continentee africano. Posee una meseta central rodeada por el Gran Escarpamiento y costas en dos océanos." },
{ id: 33, nombre: "Kenia", continente: "África", capital: "Nairobi", bandera: "ke", img: "imagenes/kenia.jpg", desc: "El corazón del safari africano y la gran migración.", actividades: ["Safari", "Cultura Masai", "Fotografía"], historia: "Obtuvo su independencia del Reino Unido en 1963. Se ha consolidado como el centro financiero y logístico más importante del este de África.", geo: "Atravesado por el ecuador y el Gran Valle del Rift. Presenta sabanas abiertas, cordilleras de alta montaña y playas en el Océano Índico." },
{ id: 34, nombre: "Marruecos", continente: "África", capital: "Rabat", bandera: "ma", img: "imagenes/marruecos.jpg", desc: "Zocos coloridos, desierto del Sáhara y arquitectura morisca.", actividades: ["Zocos", "Desierto", "Cultura"], historia: "Reino de larga tradición independiente con influencia bereber, árabe y europea, tras finalizar el protectorado franco-español en 1956.", geo: "Suroeste de África. Posee costas en el Atlántico y el Mediterráneo, el imponente sistema montañoso del Atlas y dunas del Sáhara." },
{ id: 35, nombre: "Tanzania", continente: "África", capital: "Dodoma", bandera: "tz", img: "imagenes/tanzania.jpg", desc: "Hogar del Kilimanjaro y el mítico parque Serengueti.", actividades: ["Alpinismo", "Safari", "Playas Zanzíbar"], historia: "Formada en 1964 tras la unión de la Tanganica continenteal y el archipiélago de Zanzíbar tras desligarse del mandato británico.", geo: "Alberga el punto más alto de África (Monte Kilimanjaro) y enormes reservas naturales de fauna salvaje como el cráter de Ngorongoro." },
{ id: 36, nombre: "Madagascar", continente: "África", capital: "Antananarivo", bandera: "mg", img: "imagenes/madagascar.jpg", desc: "Biodiversidad única en el mundo, lémures y gigantescos baobabs.", actividades: ["Lémures", "Trekking", "Ecoturismo"], historia: "Poblada originalmente por navegantes austronesios y africanos. Fue colonia francesa hasta obtener su independencia en 1960.", geo: "Cuarta isla más grande del mundo, situada en el Océano Índico. Debido a su aislamiento, más del 80% de su flora y fauna es endémica." },
{ id: 37, nombre: "Etiopía", continente: "África", capital: "Adís Abeba", bandera: "et", img: "imagenes/etiopia.jpg", desc: "Historia milenaria, iglesias talladas en roca y cuna del café.", actividades: ["Cultura", "Arqueología", "Ruta del Café"], historia: "Uno de los estados independientes más antiguos. Evitó la colonización europea (salvo una breve ocupación italiana) preservando su historia.", geo: "Ubicado en el Cuerno de África. Dominado por el Macizo Etíope, un altiplano cortado por el Valle del Rift con variados microclimas." },
{ id: 38, nombre: "Mauricio", continente: "África", capital: "Port Louis", bandera: "mu", img: "imagenes/mauricio.jpg", desc: "Isla del Océano Índico con arrecifes y lagunas turquesas.", actividades: ["Playas Lujo", "Snorkel", "Relax"], historia: "Isla deshabitada descubierta por portugueses, gobernada por holandeses, franceses y británicos hasta independizarse en 1968.", geo: "Isla volcánica rodeada por barreras de coral intactas, ubicado en el sudoeste del Océano Índico con clima tropical todo el año." },
{ id: 39, nombre: "Senegal", continente: "África", capital: "Dakar", bandera: "sn", img: "imagenes/senegal.jpg", desc: "Cultura musical vibrante, historia y el famoso Lago Rosa.", actividades: ["Música", "Surf", "Mercados"], historia: "Punto clave para el comercio atlántico en la época colonial francesa. Independiente desde 1960, destaca por su estabilidad política.", geo: "En el extremo más occidental del continentee africano. Plano y semiárido en el norte (Sahel) con zonas de manglares fértiles en el sur." },
{ id: 40, nombre: "Ghana", continente: "África", capital: "Acra", bandera: "gh", img: "imagenes/ghana.jpg", desc: "Conocida por su hospitalidad, castillos históricos y cacao.", actividades: ["Historia Afro", "Playas", "Festivales"], historia: "Antigua 'Costa de Oro', fue el primer país del África subsahariana en independizarse del dominio colonial europeo en 1957.", geo: "Ubicado en el Golfo de Guinea. Cuenta con el lago Volta (uno de los embalses artificiales más grandes del mundo) y selvas tropicales." },
// OCEANÍA
{ id: 41, nombre: "Australia", continente: "Oceanía", capital: "Camberra", bandera: "au", img: "imagenes/australia.jpg", desc: "Canguros, la Gran Barrera de Coral y la Ópera de Sídney.", actividades: ["Surf", "Buceo", "Avistamiento Canguros"], historia: "Habitada por aborígenes desde hace 65.000 años. Tras la llegada británica en el siglo XVIII, se consolidó como federación en 1901.", geo: "Un continentee entero rodeado por océanos. Su interior es un vasto desierto (Outback), con bosques templados y selvas en las costas." },
{ id: 42, nombre: "Nueva Zelanda", continente: "Oceanía", capital: "Wellington", bandera: "nz", img: "imagenes/nuevazelanda.jpg", desc: "Paisajes de película, fiordos, cultura Maorí y deportes de aventura.", actividades: ["Deportes Extremos", "Senderismo", "Cultura Maorí"], historia: "Poblada por los Maoríes en el siglo XIV. El Tratado de Waitangi de 1840 estableció las bases de la convivencia con los colonos británicos.", geo: "Formada por dos islas principales (Norte y Sur). Destaca por su actividad volcánica, glaciares, fiordos e imponentes Alpes del Sur." },
{ id: 43, nombre: "Fiyi", continente: "Oceanía", capital: "Suva", bandera: "fj", img: "imagenes/fiyi.jpg", desc: "Islas idílicas con impresionantes arrecifes de coral blando.", actividades: ["Buceo", "Relax", "Playa"], historia: "Antigua colonia británica desde 1874 que trajo importante población india. Independiente desde 1970 como república insular.", geo: "Archipiélago de más de 300 islas de origen volcánico con selvas tropicales, rodeadas de arrecifes coralinos vírgenes." },
{ id: 44, nombre: "Samoa", continente: "Oceanía", capital: "Apia", bandera: "ws", img: "imagenes/samoa.jpg", desc: "Tranquilidad, cascadas escondidas y piscinas naturales oceanográficas.", actividades: ["Cascadas", "Snorkel", "Relax"], historia: "Poblado polinésico ancestral. Tras administrarse por Alemania y Nueva Zelanda, se convirtió en el primer país pacífico independiente en 1962.", geo: "Compuesta por dos islas volcánicas principales (Upolu y Savai'i) cubiertas de frondosa vegetación tropical y acantilados." },
{ id: 45, nombre: "Papúa Nueva Guinea", continente: "Oceanía", capital: "Puerto Moresby", bandera: "pg", img: "imagenes/papua.jpg", desc: "Increíble diversidad cultural, tribus ancestrales y selvas vírgenes.", actividades: ["Trekking Kokoda", "Tribus", "Ecoturismo"], historia: "Independiente desde 1975 de Australia. Es una de las regiones lingüística y culturalmente más diversas del planeta con más de 800 lenguas.", geo: "Ocupa la mitad oriental de la isla de Nueva Guinea. Presenta escarpadas cordilleras centrales e inexploradas selvas húmedas." },
{ id: 46, nombre: "Vanuatu", continente: "Oceanía", capital: "Port Vila", bandera: "vu", img: "imagenes/vanuatu.jpg", desc: "Famoso por sus volcanes activos accesibles y buceo en naufragios.", actividades: ["Volcanes", "Buceo", "Playa"], historia: "Anteriormente conocido como las Nuevas Hébridas, fue administrado conjuntamente por Reino Unido y Francia hasta su independencia en 1980.", geo: "Archipiélago de origen volcánico en forma de 'Y'. Posee volcanes muy activos como el Monte Yasur y arrecifes de coral." },
{ id: 47, nombre: "Tonga", continente: "Oceanía", capital: "Nukualofa", bandera: "to", img: "imagenes/tonga.jpg", desc: "Uno de los pocos lugares donde puedes nadar con ballenas jorobadas.", actividades: ["Nadar con Ballenas", "Kayak", "Playa"], historia: "Conocido como el 'Reino Amistoso'. Es la única monarquía autóctona sobreviviente en el Océano Pacífico que nunca perdió su soberanía.", geo: "Consta de 169 islas repartidas en el Pacífico sur, caracterizadas por atolones de coral e islas volcánicas rodeadas de fosas oceánicas." },
{ id: 48, nombre: "Palaos", continente: "Oceanía", capital: "Ngerulmud", bandera: "pw", img: "imagenes/palaos.jpg", desc: "Santuario marino mundial conocido por el Lago de las Medusas.", actividades: ["Buceo", "Snorkel", "Naturaleza"], historia: "Gobernado por España, Alemania, Japón y EE.UU., se convirtió en un estado libre asociado totalmente independiente en 1994.", geo: "Archipiélago de más de 500 islas verdes de piedra caliza conocidas como 'Rock Islands' con sistemas marinos protegidos." },
{ id: 49, nombre: "Islas Salomón", continente: "Oceanía", capital: "Honiara", bandera: "sb", img: "imagenes/salomon.jpg", desc: "Ricas en historia de la Segunda Guerra Mundial y vida marina.", actividades: ["Buceo Histórico", "Pesca", "Cultura"], historia: "Famosas por ser escenario de cruentas batallas del Pacífico en la Segunda Guerra Mundial (como Guadalcanal). Se independizaron en 1978.", geo: "Cadena de islas montañosas cubiertas de selva y atolones bajos situados al este de Papúa Nueva Guinea." },
{ id: 50, nombre: "Micronesia", continente: "Oceanía", capital: "Palikir", bandera: "fm", img: "imagenes/micronesia.jpg", desc: "Famosa por las ruinas arqueológicas sobre el agua de Nan Madol.", actividades: ["Arqueología", "Buceo", "Aventura"], historia: "Compuesta por cuatro estados insulares federados con rica tradición de navegación oceánica. Formó un acuerdo de libre asociación en 1986.", geo: "Distribuida en miles de kilómetros del Océano Pacífico con más de 600 islas e islotes que van desde picos volcánicos hasta atolones." }
];
const main = document.querySelector('main');
const botonesParaFiltrar = document.querySelector('.botones-buscadores');
const inputDeBusqueda = document.querySelector('.barra-filtrado input');
// Elementos de la Ventana Emergente
const modalSuperpuesto = document.getElementById('modalSuperpuesto');
const modalCerrar = document.getElementById('modalCerrar');
const modalTitulo = document.getElementById('modalTitulo');
const modalHis = document.getElementById('modalHis');
const modalGeo = document.getElementById('modalGeo');
//iniciamos mostrando todos
let continenteElegido = "Todos";
let requerimientoBusqueda ="";
function renderizarTarjetas (){
//La etiqueta main comienza vacía.
main.innerHTML='';
//El método filter() en JavaScript crea un nuevo array con todos los elementos que cumplan una condición específica provista por una función. Su característica principal es que no modifica el array original, sino que devuelve una copia superficial filtrada.
//Si continenteElegido es igual a Todos, pasa y si continenteElegido es igual a uno específico, solo pasa si cumple
//La primera vez es Todos, pero eso puede cambiar con el addEventListener
const paisesElegidos = paises.filter(pais=> {
const seleccionPorContinente = continenteElegido === "Todos" || continenteElegido===pais.continente;
//Tomo lo que se escribió y lo pongo en minúsculas
const seleccionPorInput = requerimientoBusqueda.toLowerCase();
// veo si está incluida en
const coincidenciaConBusqueda =
pais.nombre.toLowerCase().includes(seleccionPorInput) ||
pais.continente.toLowerCase().includes(seleccionPorInput) ||
pais.capital.toLowerCase().includes(seleccionPorInput) ||
pais.desc.toLowerCase().includes(seleccionPorInput) ||
pais.actividades.some(act => act.toLowerCase().includes(seleccionPorInput)) ;
return seleccionPorContinente && coincidenciaConBusqueda;
});
// Si no se encontró nada
if (paisesElegidos.length === 0) {
main.innerHTML = `<div class="sin-resultados">No se encontraron resultados para tu búsqueda.</div>`;
return;
}
//Recorro el vector de objetos
paisesElegidos.forEach(pais=>{
// Por cada objeto pais, creo una etiqueta article
const tarjeta = document.createElement('article');
// le agrego la clase tarjeta
tarjeta.className = 'tarjeta';
tarjeta.innerHTML = `
<div class="imagen">
<img src="${pais.img}" alt="">
<span>${pais.continente}</span>
</div>
<div class="contenido">
<div class="encabezado">
<h2>${pais.nombre}</h2>
<img src="imagenes/banderas/${pais.bandera}.png" alt="">
</div>
<p><strong>Capital: </strong> ${pais.capital}</p>
<p>${pais.desc}</p>
<div class="actividades">
${pais.actividades.map(act => `<span class="tag">${act}</span>`).join('')}
</div>
<button onclick="abrirVentana(${pais.id})">Explorar Más</button>
</div>
`;
//la agrego al main
main.appendChild(tarjeta);
});
}
// --- LÓGICA DE LA VENTANA EMERGENTE (MODAL) ---
window.abrirVentana = function(id) {
const pais = paises.find(c => c.id === id);
if (!pais) return;
modalTitulo.textContent = pais.nombre;
modalHis.textContent = pais.historia;
modalGeo.textContent = pais.geo;
modalSuperpuesto.classList.add('active');
};
function closeModal() {
modalSuperpuesto.classList.remove('active');
}
modalCerrar.addEventListener('click', closeModal);
// Cerrar al hacer clic fuera del recuadro
modalSuperpuesto.addEventListener('click', (e) => {
if (e.target === modalSuperpuesto) closeModal();
});
//escucho y tomo lo que se escribió en el input
// inputDeBusqueda es la etiqueta que está en el html
// requermientoDeBusqueda es una string (palabra) que escribe el usuario, es el valor que tiene en su interior la etiqueta.
inputDeBusqueda.addEventListener('input',(evento)=>{
requerimientoBusqueda = evento.target.value.trim();
//vuelvo a renderizar
renderizarTarjetas();
});
//escucho los botones y vuelvo a renderizar con otro valor de continenteElegido.
//Frente a cualquier click que suceda en esa caja.
botonesParaFiltrar.addEventListener('click', (e) => {
// si el click se hace en una etiqueta buuton
if (e.target.tagName === 'BUTTON') {
//esto es para darle el estilo
document.querySelectorAll('.btn-filter').forEach(btn => btn.classList.remove('activo'));
e.target.classList.add('activo');
// toma el valor que tiene en su dataset
continenteElegido = e.target.dataset.filter;
console.log(continenteElegido);
renderizarTarjetas();
}
});
renderizarTarjetas();● Recursos
◆ Íconos y fuentes: https://fonts.google.com
◆ imágenes: https://unsplash.com/es
◆ imágenes: https://pexel.com