Problema: Consumir la API pública con la información de los distintos paises del mundo del problema anterior.
Se debe mostrar al azar una bandera y cuatro nombres de países en una serie de botones.
Contar la cantidad de respuestas correctas e incorrectas.
El sitio:
https://restcountries.com
tiene una API pública que nos permite consultar todos los nombres de paises, banderas, capitales etc.
La dirección que debemos acceder para recuperar un archivo JSON con dicha información es:
https://restcountries.com/v3.1/all
Los datos que retorna tienen el siguiente formato:
Se debe mostrar la bandera y cuatro paises (uno de ellos correctos):
Solución
La lectura de la solución debería efectuarse luego de haber intentado resolverlo en forma individual.
index.html
<!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="juego">
<div id="contenedor"></div>
<div id="botones"></div>
<div id="resultados"></div>
</div>
<script src="funciones.js"></script>
</body>
</html>
La hoja de estilo para mostrar la información.
estilos.css
* {
margin: 0;
padding: 0;
}
#juego {
margin: 0 auto;
width: 820px;
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
img {
width: 820px;
height: 400px;
border: 1px solid black;
box-shadow: 0 0 10px black;
margin-bottom: 1rem;
}
.boton {
width: 204px;
height: 100px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 1.2rem;
white-space: normal;
box-shadow: 0 0 10px black;
}
#botones {
display: flex;
margin-bottom: 1rem;
}
#resultados {
font-size: 2.5em;
font-family: Georgia, 'Times New Roman', Times, serif;
border: 1px solid black;
box-shadow: 0 0 10px black;
padding: 20px;
}
Toda la funcionalidad se encuentra en el archivo JavaScript.
funciones.js
function proximaBandera() {
const paises = []
let cant = 0
do {
let aleatorio = Math.trunc(Math.random() * 250)
if (!paises.includes(aleatorio)) {
paises.push(aleatorio)
cant++
}
} while (cant < 4);
let correcta = Math.trunc(Math.random() * 4)
let pos = paises[correcta]
let pregunta = `<img src="${datos[pos].flags.png}">`
const d = document.querySelector("#contenedor")
d.innerHTML = pregunta
pregunta = `
<input class="boton" type="button" value="${datos[paises[0]].name.common}" id="b1">
<input class="boton" type="button" value="${datos[paises[1]].name.common}" id="b2">
<input class="boton" type="button" value="${datos[paises[2]].name.common}" id="b3">
<input class="boton" type="button" value="${datos[paises[3]].name.common}" id="b4">
`
const b = document.querySelector("#botones")
b.innerHTML = pregunta
for (let f = 1; f <= 4; f++)
document.querySelector(`#b${f}`).addEventListener('click', evt => {
if (correcta == `${f - 1}`)
correctas++
else {
incorrectas++
alert(`Es la bandera de ${datos[paises[correcta]].name.common}`)
}
actualizarResultados()
})
}
function actualizarResultados() {
document.querySelector("#resultados").innerHTML = `
<p>Correctas: ${correctas}</p>
<p>Incorrectas: ${incorrectas}</p>`
proximaBandera()
}
let correctas = 0
let incorrectas = 0
let datos = null
fetch("https://restcountries.com/v3.1/all")
.then(response => response.json())
.then(bande => {
datos = bande
actualizarResultados()
})
definimos tres variables globales para los contadores de correctas e incorrectas y la variable que almacenará la referencia al arreglo de datos que se recuperará del servidor:
let correctas = 0 let incorrectas = 0 let datos = null
Hacemos seguidamente la petición al servidor de todos los datos de países, donde actualizamos la variable 'datos' y llamamos a la función 'actualizarResultados':
fetch("https://restcountries.com/v3.1/all")
.then(response => response.json())
.then(bande => {
datos = bande
actualizarResultados()
})
La función 'actualizarResultados' muestra la cantidad de preguntas correctas e incorrectas hasta este momento y pasa a llamar a la función 'proximaBandera':
function actualizarResultados() {
document.querySelector("#resultados").innerHTML = `
<p>Correctas: ${correctas}</p>
<p>Incorrectas: ${incorrectas}</p>`
proximaBandera()
}
La función 'proximaBandera' define un vector donde almacenaremos al azar 4 números aleatorios entre 0 y 249 (que debemos controlar que no se repitan):
function proximaBandera() {
const paises = []
let cant = 0
do {
let aleatorio = Math.trunc(Math.random() * 250)
if (!paises.includes(aleatorio)) {
paises.push(aleatorio)
cant++
}
} while (cant < 4);
Ahora generamos un valor entre 0 y 3, el mismo representa la posición de la bandera que debe adivinar el usuario:
let correcta = Math.trunc(Math.random() * 4)
let pos = paises[correcta]
Mostramos la bandera generando una etiqueta 'img' y recuperando de la variable datos la bandera:
let pregunta = `<img src="${datos[pos].flags.png}">`
onst d = document.querySelector("#contenedor")
d.innerHTML = pregunta
Ahora generamos los cuatro botones con los nombre de países que hemos elegido al azar (uno de ellos es el correcto):
pregunta = `
<input class="boton" type="button" value="${datos[paises[0]].name.common}" id="b1">
<input class="boton" type="button" value="${datos[paises[1]].name.common}" id="b2">
<input class="boton" type="button" value="${datos[paises[2]].name.common}" id="b3">
<input class="boton" type="button" value="${datos[paises[3]].name.common}" id="b4">
`
const b = document.querySelector("#botones")
b.innerHTML = pregunta
Debemos registrar el evento 'click' para cada uno de los cuatro botones y dentro del mismo veriridar si coincide con la bandera correcta, aumentando en uno el contador respectivo y proceder a llamar a 'actualizarResultados' para que se muestre la siguiente bandera:
for (let f = 1; f <= 4; f++)
document.querySelector(`#b${f}`).addEventListener('click', evt => {
if (correcta == `${f - 1}`)
correctas++
else {
incorrectas++
alert(`Es la bandera de ${datos[paises[correcta]].name}`)
}
actualizarResultados()
})