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.eu
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.eu/rest/v2/all
Los datos que retorna tienen el siguiente formato:
Se debe mostrar la bandera y cuatro paises (uno de ellos correctos):
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].flag}">` const d = document.querySelector("#contenedor") d.innerHTML = pregunta pregunta = ` <input class="boton" type="button" value="${datos[paises[0]].name}" id="b1"> <input class="boton" type="button" value="${datos[paises[1]].name}" id="b2"> <input class="boton" type="button" value="${datos[paises[2]].name}" id="b3"> <input class="boton" type="button" value="${datos[paises[3]].name}" 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}`) } 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.eu/rest/v2/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.eu/rest/v2/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].flag}">` const 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}" id="b1"> <input class="boton" type="button" value="${datos[paises[1]].name}" id="b2"> <input class="boton" type="button" value="${datos[paises[2]].name}" id="b3"> <input class="boton" type="button" value="${datos[paises[3]].name}" 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() })