DHTML Ya

xxxxxxxxxx
 
<!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>
​
​

xxxxxxxxxx
 
* {
    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;

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()
    })

xxxxxxxxxx
 
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

57 - Desafío 4: Examen múltiple opciones con banderas del mundo

Retornar